css - 垂直对齐 float div 中的多行文本

Question

我一直在尝试不同的方法来垂直对齐多行文本。基本上我有类似这个 fiddle 中的东西 - 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

如果您不需要 float 框并且可以稍微修改您的布局，您可以试试这个。 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;}