垂直对齐div中的文本单行和多行

Question

当文本适合一行时和文本适合两行时，我想垂直对齐文本。这里有一个 jsFiddle 。

假设我的HTML看起来像这样：

<div class="Container">
   <div class="SomeClass">test text</div>
   <div class="SomeClass">some very very long text</div>  // this text is cut
</div>​

我的CSS看起来像这样：

.Container{
    padding:3px 0px 6px 0px;
    height:30px;
    margin:30px 30px;}

.SomeClass{
    height:30px;
    float:left;
    width:100px;
    overflow:hidden;
    border:1px solid black;
    text-align:center;
    font-family:"Trebuchet MS";
    font-weight:bold;
    font-size:13px;
    line-height:28px;}​

目前，我正在使用line-height属性：我将其设置为容器的高度，并垂直对齐文本。问题是，当文本符合2行时，这不再起作用。请注意，.Container项必须具有一定的高度/宽度，并留有overflow:hidden;

如果您有任何建议，请告诉我。

感谢。

Answer 1

首先，我没有理解这个

  

请注意.Container项目必须具有一定高度并保留   溢出：隐藏;

如果你给出一个固定的高度，我确定它将不适合2行 ......

关于答案，您可以使用display: table-cell，使用vertical-align: middle;并从float: left;移除.SomeClass

Demo

CSS（当然你可以高高在上）

.Container{
    padding: 3px 0px 6px 0px;
    margin:30px 30px;
    height: 200px;
}

.SomeClass{
    width:100px;
    height: 200px;
    border:1px solid black;
    text-align:center;
    font-family: "Trebuchet MS";
    font-weight: bold;
    font-size: 13px;
    display: table-cell;
    vertical-align: middle;
}

Answer 2

如果不使用CSS3或表格，则无法垂直对齐多行文字。

行高定义文本的高度，是垂直对齐单行文本的好方法。也可以使用行高来对齐多行文本，但这次，您必须小心谨慎地进行适当的边距计算，因为行高为2行的两倍，3行的三倍等等。

我建议使用CSS3或使用php或其他服务器端语言来强制换行'
'然后使用适当的css来垂直偏移文本。