вертикально выровнять многострочный текст внутри плавающего div

Question

Я играл с различными методами, чтобы вертикально выровнять многострочный текст. В принципе у меня есть что-то вроде того, что в этой скрипкой - http://jsfiddle.net/xPxwn/

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

CSS:

.box 
    { 

width:100px; 
height:40px; 
    border:1px solid; 
    background:blue; 
    color:yellow; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    margin:5px; 
    text-align:center; 
    font : 50% "Trebuchet MS", verdana, arial, tahoma, sans-serif; 
    float:left; 
    }  

Мне нужно текст, который будет вертикально внутри коробки, но я не в состоянии придумать решение. Есть идеи?

Заранее спасибо Chris

Answer 1

Если вам не нужно, чтобы плавать коробку и может переделать макет немного, вы можете попробовать это. display:table-cell и vertical-align:middle добавлен в .box и float:left удален.

.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{padding:0;margin:0;}