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