Flex Items Not Centering Vertically

Flex items not centering vertically

Your flex container has no extra height. The only height is the height of the content. Therefore, there is no space for vertical centering.

First step, add some height:

.row-centered {  
  display: flex;
  height: 100vh;
}

Second step, remove unnecessary rules, some of which are preventing vertical alignment.

.col-centered {
    display: flex;
    flex-direction: column;
   /* align-self: flex-start;
    float: none;
    margin-right: 0 auto; */
}

.row-centered {  display: flex;  height: 100vh;}.col-centered {  display: flex;  flex-direction: column;}.us-container {  display: flex;  justify-content: center;  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><section id="us" class="container-fluid">  <div class="row row-centered us-container">    <div class="col-sm-8 col-md-8 col-xs-8 col-centered ">      <p class="text-justify">blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah        blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</p>      <h3 class="text-center">blah blah blah</h3>    </div>  </div></section>

Flexbox not centering content vertically

In CSS, block-level elements normally take 100% width of the parent, by default.

So, without doing anything, an h1 will expand to cover the full width of its parent:

div { border: 1px solid black; }h1  { background-color: yellow; }

<div>  <h1>    David  </h1></div>

Text not centering vertically with flex

It is centered correctly. The outer div is centered vertically. What you want to achieve is centering the contents of the div vertically.

So either you make the inner div a flex container itself by adding display: flex to it and then vertically centering the contents with align-items: center or you could just give the inner div a line-height of 50px since the height of it already hard-coded. This will only work with a text without line-breaks.

CSS Flexbox Not Centering Vertically

You can just add this in the .row class

align-items: center;

flex items are not centering

Your flex containers are missing align-items: center.

Add this to your code:

.fireteam #fireteamMembers {
  align-items: center; /* NEW */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  height: 4.2rem;
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  border-radius: 5px;
  overflow: hidden;
}

.fireteam {  padding: 0 5px;}
.fireteam>p {  max-width: 100%;  overflow: hidden;  white-space: nowrap;  margin: 0 0 0.1rem;}
.fireteam #fireteamMembers {  align-items: center; /* NEW */  display: flex;  flex-direction: column;  flex-wrap: wrap;  align-content: center;  justify-content: center;  height: 4.2rem;  list-style: none;  padding: 0;  border: 1px solid #000;  border-radius: 5px;  overflow: hidden;}
.fireteam .fireteamMember {  width: 1.5rem;  height: 1.5rem;  background: #000;  color: white;  border-radius: 50%;  margin: 0.25rem;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><div class="fireteam col-xs-4">  <p>name</p>  <label>X members</label>  <ul id="fireteamMembers">    <li class="fireteamMember"></li>  </ul></div><div class="fireteam col-xs-4">  <p>name</p>  <label>X members</label>  <ul id="fireteamMembers">    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>  </ul></div><div class="fireteam col-xs-4">  <p>name</p>  <label>X members</label>  <ul id="fireteamMembers">    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>  </ul></div><div class="fireteam col-xs-4">  <p>name</p>  <label>X members</label>  <ul id="fireteamMembers">    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>  </ul></div><div class="fireteam col-xs-4">  <p>name</p>  <label>X members</label>  <ul id="fireteamMembers">    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>  </ul></div><div class="fireteam col-xs-4">  <p>name</p>  <label>X members</label>  <ul id="fireteamMembers">    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>    <li class="fireteamMember"></li>  </ul></div>

flex align-items center is not centering

There's nothing centering them (in your codepen).

Add this to your code:

.element{
    display: flex;
    justify-content: center; /* horizontal alignment */

.element__item {
    display: flex;           /* nested flex container */
    align-items: center;     /* vertical alignment */
}

revised codepen

Flexbox elements not centering

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>

Elements not centering vertically

You can use flexbox to get this right. CSS Tricks has a great article on flexbox.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• Remove float:right from .arrow-right

• Add display: flex to #overlayedbox to make it a flex box, having justify-content: space-between and align-items: center to align items vertically centered and having arrow signs at the both ends making it spaced in the between.

#overlayedbox{  display: flex;  justify-content: space-between;  font-family: OpenSans, arial, "sans-serif";  background: rgba(50,50,50,0.6);  border-radius: 25px;  padding: 20px;  width: 200;  height: 15px;  text-align: center;  align-items: center;  margin-left: auto;  margin-right: auto;}  #arrow-left {  width: 0;   height: 0;   border-top: 10px solid transparent;  border-bottom: 10px solid transparent;    border-right: 10px solid white; }
#arrow-right{  width: 0;  height: 0;  border-top: 10px solid transparent;  border-bottom: 10px solid transparent;  border-left: 10px solid white;}

<div id="overlayedbox">   <div id="arrow-left"></div>  1.0.0  <div id="arrow-right"></div></div>

---

Related Topics