Flexbox: vertically centering text in its box [duplicate] - css

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I vertically align elements in a div?
(28 answers)
How do I vertically align text in a div?
(34 answers)
Closed 2 years ago.
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...)

Answer 1

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>New<br>Testament</li><li>Old<br>Testament</li><li>Topics</li>
</ul>
</div>
<div class="widget">
<div class="flextabs">
New<br>Testament
Old<br>Testament
Topics
</div>
</div>
</div>

Answer 2

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.