How to Vertically Align Text Inside a Flexbox

How to vertically center text inside flex element

To center the flex items along the main axis (in your case column/vertically), add justify-content: center; to the container (and erase the flex settings from the children):

#elem1 {  height: 180px;  border: 1px solid #ddd;  display: flex;  flex-direction: column;  justify-content: center;}
.inner_element { text-align: center;}
<div id="elem1">  <div class="inner_element">aaaa</div>  <div class="inner_element">bbbb</div></div>

Vertical Align when using flex

You can use align-items to vertically align flex items along the Cross Axis in a row layout.

Specifically, align-items: center so the flex items margin boxes are centered within the line on the cross-axis. Have a look at the updated CodeSandbox Demo

.container {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="container">
<h4>Workbench</h4>
<span>☰</span>
</div>

Flexbox - center text vertically

main {  height: 200px;  width: 200px;}a {  display: flex;  align-items: center;  justify-content: center;  background-color: red;  height: 100%;}
<main>  <a href="/">    <div class="tile">Text</div>  </a></main>

Flexbox: vertically centering text in its box

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>

Vertical center when using flex

Simply add .thing { display: flex; flex-direction: column; justif-content: center; } to the CSS. flex-direction: column; will make sure that the normal block-level element behavior is maintained. justify-content: center; aligns the items at the cenetr of the main-axis (in this case the vertical axis).