垂直对齐div中具有固定宽度和浮动的文本

Question

我有一种情况需要在div中垂直对齐文本：

1. 固定宽度
2. 多行文字
3. 应用浮动

以下是使用display的示例：table-cell;这是行不通的，因为没有浮动，我需要：

CSS:

.noFloat {
    width:200px; 
    height:200px; 
    border:1px solid black; 
    vertical-align:middle; 
    display:table-cell;
}



HTML:

<div class="noFloat">
    Here is some content for my div. Here is some more content for my div.
</div>

以下是使用line-height的示例：;这将无法正常工作，因为有多行文字最终成了一团糟：

CSS:

.lineHeight {
    width:200px; 
    height:200px; 
    line-height: 200px;
    border:1px solid black;
}



HTML:

<div class="lineHeight">
    Here is some content for my div. Here is some more content for my div.
</div>

以下是使用display的示例：table-cell;浮动因浮动而无法工作，它会对齐顶部的所有内容：

CSS:

.withFloat {
    width:200px; 
    height:200px; 
    border:1px solid black; 
    vertical-align:middle; 
    display:table-cell;
    float: left;
}


HTML:

<div class="withFloat">
    Here is some content for my div. Here is some more content for my div.
</div>

以下是所有3个示例：http://jsfiddle.net/BJGh5/3/

Answer 1

如果我理解正确，您需要设置一个容器div。一个垂直对齐，一个浮动。