Cris
Cris

Reputation: 131

Flexbox elements not centering

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

Answers (2)

Johannes
Johannes

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 h1and 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

Volodymyr
Volodymyr

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

Related Questions