垂直對齊浮動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; 
    }  

我需要的文本框內垂直排列的，但我沒能拿出一個解決方案。有任何想法嗎？

在此先感謝 克里斯

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;}