html - 垂直对齐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

首先我不明白这一点

Note that the .Container items must be of a certain height AND be left with overflow:hidden;

如果你给出的是固定高度，我敢肯定它放不下 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;
}