css - 垂直对齐浮动 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;}