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

垂直对齐浮动div中的多行文本

1 个答案: