将div中的文本与固定宽度垂直对齐并浮动(Vertically align text in div with fixed width and float)

我有一种情况，我需要垂直对齐div内的文本：

固定宽度多行文字应用浮动

这是一个使用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/

I have a situation where I need to vertically align text inside a div that has:

A fixed width Multiple lines of text A float applied

Here is an example of using display:table-cell; which won't work because there is no float, which I need:

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>

Here is an example of using line-height:; which won't work because there are multiple lines of text which ends up being a mess:

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>

Here is an example of using display:table-cell; with a float which won't work because of the float, which aligns everything at the top:

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>

Here are all 3 examples: http://jsfiddle.net/BJGh5/3/