Reputation: 131
Im trying to just practice my flexbox skills but I can't center a certain class within the flexbox container to center. It only centers when I apply justify-content: center;
to the container but it wont center if I apply it to the child which is .head1
.
I also cant align it vertically using align-items. Even if I use it in the flexbox container it still won't align vertically. I also tried aligning the h1
element but it also didn't work. What am I doing wrong??
EDIT: To clarify, im trying to change both the h1
element and the .head1
element.
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.flex-container{
display: flex;
justify-content: center;
}
h3{
/*color: white;*/
color: black;
font-size: 3rem;
}
h1{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/*color: white;*/
color: black;
font-size: 3rem;
}
.head1{
}
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Your own stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css">
<h1 class ="text-uppercase"><strong>Welcome to the Landing Page</strong></h1>
<div class="flex-container">
<h3 class="head1"> Find out more!</h3>
</div>
Upvotes: 0
Views: 1689
Reputation: 67738
If you want to vertically center both h1
and h3
on the page, you need to move the h1
into your .flex-container
. Apply flex-direction: column
, justify-content: center
and height: 100%
to that and text-align: center
to h1
and h3
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.flex-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
h3 {
color: black;
text-align: center;
font-size: 3rem;
}
h1 {
color: black;
font-size: 3rem;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="flex-container">
<h1 class="text-uppercase"><strong>Welcome to the Landing Page</strong></h1>
<h3 class="head1"> Find out more!</h3>
</div>
Upvotes: 1
Reputation: 101
If I understand correctly, you want to align .head1 element vertically. You can do this in two ways add a property align-items: center to parent flex-container or align-self: center to child element in flex-container. And also you have to specify height for parent container. I hope this helps you.
body,
html {
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.flex-container{
display: flex;
justify-content: center;
height: 100%;
/* align-items: center; it's works too*/
}
h3{
/*color: white;*/
color: black;
font-size: 3rem;
}
h1{
text-align: center;
color: black;
font-size: 3rem;
}
.head1{
align-self: center;
}
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Your own stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css">
<h1 class ="text-uppercase"><strong>Welcome to the Landing Page</strong></h1>
<div class="flex-container">
<h3 class="head1"> Find out more!</h3>
</div>
Upvotes: 1