How to vertically align text inside a flexbox with CSS?

Spread the love

To vertically align text inside a flexbox with CSS, we set the align-items property.

For instance, we write

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

to add align-items: center; to vertically center align the content in the li element.

We make li elements flex containers with display: flex;.

By John Au-Yeung