Center text vertically on flex container items

Question

I have this codepen https://codepen.io/luisguerra/pen/prROqY, I'm trying to center vertically the text inside each item.

The reason I want is that I don't know how many items in the list will I have, and I want them distributed with same height and each one center vertically (all items should only have 1 line) but line-height: 100% doesn't work, thoughts?

.site-content {
  height: 400px;
}

.menu {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.item {
  flex: 1;
}

 <div class="site-content">
      <div class="menu">
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
     </div>
</div>

`line-height : 100%;` doesn't refer to the parent div height, but to the current font-size. For example, if your `.item` class had `font-size : 12px;` and `line-height : 200%;`, the line-height will be 24px, which is 200% of 12px. Hope you will understand better what is line-height. Here is a [**W3School** link](https://www.w3schools.com/cssref/pr_dim_line-height.asp) which explain perfectly how does line-height works — Louis 'LYRO' Dupont, Aug 07 '17 at 07:27
Possible duplicate of [How to vertically align text inside a flexbox?](https://stackoverflow.com/questions/25311541/how-to-vertically-align-text-inside-a-flexbox) — Rob, Aug 07 '17 at 10:11

score 1 · Answer 1 · answered Aug 07 '17 at 07:23

1

justify-content: center to the .menu will help you since your flex-direction is column.

answered Aug 07 '17 at 07:23

Abin Thaha

4,493
3
13
41

score 0 · Accepted Answer · answered Aug 07 '17 at 07:27

Use this code 100% working:

.site-content {
  height: 400px;
}

.menu {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.item {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

 <div class="site-content">
      <div class="menu">
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
     </div>
</div>

Nice! this worked, I was missing the flex direction inside each item — Luis Guerra, Aug 07 '17 at 07:30

Center text vertically on flex container items

2 Answers2