html - 以固定宽度和浮动垂直对齐 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。一个垂直对齐，一个浮动。