What is the correct way to force text in a div to vertically align to the middle? I have found a couple 'tricks', but I need something that works with a single line and multiple lines. Hopefully I am missing something stupid simple:
http://jsfiddle.net/rogerguess/DawFy/
.header {
display: inline-block;
text-align: center;
width: 123px;
background: green;
border-radius: 4px 4px 4px 4px;
height: 80px;
vertical-align: middle;
}
<div >
<div class="header">test1 </div>
<div class="header">some text that will wrap</div>
<div class="header">test3</div>
</div>
Using the Line-Height Property In most cases, you can also center text vertically in a div by setting the line-height property with a value that is equal to the container element's height.
The CSS just sizes the <div> , vertically center aligns the <span> by setting the <div> 's line-height equal to its height, and makes the <span> an inline-block with vertical-align: middle . Then it sets the line-height back to normal for the <span> , so its contents will flow naturally inside the block.
Change display: inline-block;
to display: table-cell;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With