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).
.container {
height: 100vh;
width: 100vw;
display: flex;
flex-wrap: wrap;
}
.thing {
background: red;
color: white;
margin: 5px;
text-align: center;
flex: 1 0 30%;
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="container">
<div class="thing">
text
</div>
<div class="thing">
text
</div>
<div class="thing">
text
</div>
<div class="thing">
text
</div>
</div>
Related Topics
Href Image Link Download on Click
Keep the Middle Item Centered When Side Items Have Different Widths
Should I Use ≪I≫ Tag For Icons Instead of ≪Span≫
How to Make an HTML Button Not Reload the Page
Make a Grid Item Span to the Last Row/Column in Implicit Grid
How to Change Source of ≪Img≫ Tag on Hover
Why the Content Is Not Covered by the Background of an Overlapping Element
How to Create Custom Tags For Html
Another: Force Chrome to Fully Buffer Mp4 Video
Nesting Optgroups in a Dropdownlist/Select
Are Custom Elements Valid Html5
Why Are My Css3 Media Queries Not Working on Mobile Devices
Use Images Instead of Radio Buttons
Center Image Horizontally Within a Div
Make Background Color Extend into Overflow Area
Does ≪Style≫ Have to Be in the ≪Head≫ of an HTML Document
Font Awesome Icon in Select Option
How to Include an HTML Page into Another HTML Page Without Frame/Iframe