Text not centering vertically with flex

Question

As the title states, I am not able to center my content vertically. When I inspect the divs, I have this bit of empty space below my divs and I don't know where that is coming from. Perhaps that's the problem, since when I go into the dev tool styles and put in <line-height: 3> it centers. I don't wish to hardcode things like this, and flex normally works, but I'm totally stumped here.

If you need to see anything else, please let me know!

.table-page-nav-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
 }

.arrow-btn {
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

.page-index-inner {
  text-align: center;
  width: 244px;
  height: 50px;
  border-radius: 4px;
  box-shadow: 0 5px 5px rgba(0,0,0,0.2);
  margin: 0px 20px;
}

<div class="table-page-nav-wrapper">
    <div class="arrow-btn"><</div>
    <div class="page-index-inner">Why won't I center correctly?</div>
    <div class="arrow-btn">></div>
</div>

@TannerDolby He is using Sass, so the blocks are correctly formatted. — Dom, Feb 11 '21 at 16:44
@Dom Yes makes sense. The `css` tag was used and no explicit statement of Sass was made so I wasn't sure. — Tanner Dolby, Feb 11 '21 at 16:45
This is my mistake. I am using Sass. Didn't know it needed to be explicitly stated. — LovelyAndy, Feb 11 '21 at 16:50

Dom · Accepted Answer · 2021-02-11T16:56:39.423

2

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.

edited Feb 11 '21 at 16:56

answered Feb 11 '21 at 16:43

Dom

734
3
8

1

Thanks for the detailed answer! – LovelyAndy Feb 11 '21 at 16:54

score 1 · Answer 2 · answered Feb 11 '21 at 17:33

As @DOM explained the code is technical correct.

The common missunderstanding is, that flexbox works on the immediate inner elements of the wrapping flexbox-container but not on the childs or the content of this inner elements.

As centered inner grids are typical css tasks: additional to @DOM's solution here is a general css helper class I use and which does the trick. Just add it to div.table-page-nav-wrapper:

.center_HV,
.center_HV > div {
    display: flex;
    justify-content: center;
    align-items: center;                
}

That works on line breaks too.

Thanks for the response and insight! – LovelyAndy Feb 11 '21 at 20:28 — LovelyAndy, Feb 11 '21 at 20:28

Text not centering vertically with flex

2 Answers2