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 を設定する必要があります。1 つは垂直方向に整列し、もう 1 つはフロートします。