Flexbox: vertically centering text in its box

Question

I'm trying to make tabs with labels that are sometimes two lines. I started out with a ul method, but switched to flexbox hoping to solve two problems: (1) get the tabs to fill the width of the container, and (2) vertically center the labels. Width-filling worked, but centering didn't.

Everybody says justify-content:center and align-items:center will do what I want, but they apparently act only on the boxes themselves, not the text inside them. To horizontally center the text, I can use text-align: center, but there is nothing I can find that will center it vertically. One rumor mentioned align-content:center but that also has no effect. Here is the Codepen I have been playing in: https://codepen.io/OsakaWebbie/pen/mdVrMYK All the lines with /* nope */ are things I tried in vain based on various rumors.

What am I missing? (Sometimes I miss the days when we used tables for layout, in which this would be a piece of cake...)

@JovylleBermudez This is just s snippet to work on the CSS. In my real code it's a real, clickable link that does something. — OsakaWebbie, Jun 16 '20 at 06:09
@Temani Afif (I don't know how to contact you other than a comment - I hope you see it): Neither of the links you provided are relevant. The first link is one that I already read before posting my question, but it is about arranging the items, not aligning the text (as are tons of others like it). The second link isn't even about flexbox - one part of the answer mentions it as the 2020 method, but doesn't suggest assigning `display: flex` on the child items, which is the right answer to my question. Downvoting and closing my question seems unfair. — OsakaWebbie, Jun 16 '20 at 11:44
The second link provide 25 answers about centring items and if you check them all you will see at least 5 talking about flexbox and you will not find any answer saying *add flex to child items* but you will see canonical answers explaining how to align and from them you will undertand that using `align-items: center;justify-content: center;align-content: center; ` will have no effect if the element is not a flexbox container, this is the basic of flexbox AND you will get other ways to center your content. So the links I provided doesn't only answer your question they do even more. — Temani Afif, Jun 16 '20 at 11:50
and don't assume I have downvoted your question because this is something you can never know. (I have added more duplicates, now you have more ways to center your content) — Temani Afif, Jun 16 '20 at 11:51
no one said that your question is inappropriate. Closing a question as duplicate doesn't imply that your question is bad or you shouldn't have asked it. It's simply a duplicate because it was already discussed before. That's it. Don't take it personnaly. We don't judge *you*, we judge the content of your question — Temani Afif, Jun 17 '20 at 00:08
I just want to learn how to be a better participant on SO. I only ask when I have exhausted my own research efforts, so my questions are usually specific to my situation, not something general that lots of people want to know. Perhaps that sort of question is not in the spirit of SO - I function better in the sort of forum with conversational threads rather than Q, A, and short comments. But SO is where everyone is these days, so if I don't want to wait days or weeks for a response, I need to come here. — OsakaWebbie, Jun 17 '20 at 01:01

score 1 · Answer 1 · answered Jun 16 '20 at 04:31

1

So I looked at your codepen and it seems to me that you might just need to edit this CSS rule and add the below:

li a.series-switcher {
    display: flex;
    align-items: center;
}

The other widget would be .flextabs a.series-switcher

Adding display: flex; fixes the issue there as well.

Hope it helps.

answered Jun 16 '20 at 04:31

Jakub A Suplicki

3,185
1
13
24

Thanks - two of you gave the same (correct) answer. I can only select one as the official answer, so I chose John's because he included a demo, but of course I upvoted yours as well. – OsakaWebbie Jun 16 '20 at 06:07

score 1 · Accepted Answer · answered Jun 16 '20 at 04:31

Add this to your CSS code:

.series-switcher {
 display: flex;
}

Or in your case add display: flex; to your .flextabs a.series-switcher class in CSS will work too.

/* basic setup to simulate my environment */
#sidebar { width: 320px; padding: 0 30px; background-color: #eaeaea; }
.widget { clear:both; padding: 10px 0; }
ul { list-style: none; margin: 0; padding: 0;}
a { text-decoration: none; color: #666; }
a:hover { color: #000; }

/* list method */
#series-switcher-ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle; /* nope */
}
li a.series-switcher {
  display: block;
  background-color: #ccc;
  border: 1px solid #999;
  border-radius: 8px 8px 0 0;
  padding: 0 15px;
  line-height: 0.8em;
  text-align: center;
  height: 2.5em;
  vertical-align: middle; /* nope */
}
li a.series-switcher.active {
  background-color: unset;
  color: #000;
  border-bottom-width: 0;
  
}

/* flexbox method */
.flextabs {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center; /* nope */
  justify-content: center; /* nope */
  align-content: center; /* nope */
  vertical-align: middle; /* nope */
}
.flextabs a.series-switcher {
  flex: auto;
  background-color: #ccc;
  border: 1px solid #999;
  border-radius: 8px 8px 0 0;
  height: 2.5em;
  padding: 0 15px;
  line-height: 0.8em;
  text-align: center;
  align-items: center; /* nope */
  justify-content: center; /* nope */
  align-content: center; /* nope */
  vertical-align: middle; /* nope */
}
.flextabs a.series-switcher.active {
  background-color: unset;
  color: #000;
  border-bottom-width: 0;
}

.series-switcher {
 display: flex;
}

<div id="sidebar">
  <div class="widget">
    <ul id="series-switcher-ul">
     <li><a href="#" class="series-switcher series-nt active">New<br>Testament</a></li><li><a href="#" class="series-switcher series-ot">Old<br>Testament</a></li><li><a href="#" class="series-switcher series-topics">Topics</a></li>
    </ul>
  </div>

  <div class="widget">
    <div class="flextabs">
     <a href="#" class="series-switcher series-nt active">New<br>Testament</a>
      <a href="#" class="series-switcher series-ot">Old<br>Testament</a>
     <a href="#" class="series-switcher series-topics">Topics</a>
    </div>
  </div>
</div>

Interesting! I would have never thought to make each of the main flexbox's items another little flexbox with no children. CSS is such a mystery sometimes. — OsakaWebbie, Jun 16 '20 at 06:05

Flexbox: vertically centering text in its box

2 Answers2