Vertically center multi-line text; use display:table-cell

by emgee

HTML

<div class = "box">  <h2>multiline text goes here</h2> 
</div>
<div class = "box">  <h2>multiline text goes here</h2> 
</div>
<div class = "box">  <h2>multiline text goes here</h2> 
</div>

CSS

.box
    {
display:table-cell;
    vertical-align:middle;
width:100px;  
	height:40px;
    border:1px solid;
    background:blue;
    color:yellow;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding:0;margin:0;    
    text-align:center;
    font : 50% "Trebuchet MS", verdana, arial, tahoma, sans-serif;
    }        
.box h2{border:1px solid red;padding:0;margin:0;}