4

次のような状況があります。

ここに画像の説明を入力

内部に画像 (別の div 内に配置された画像) を含む高さ可変の div (#container) で、float:rightと中央に垂直に配置する必要があります。これを行う方法？

ありがとう。

編集：

たぶん、数行からテキストの壁まで、コンテナにどれだけのコンテンツがあるかを事前に知らないほど明確にしなかったので、その高さに依存するソリューションは機能しません（それが私の問題です:P )

これは、画像を配置する可能性のあるコンテンツの例を示すフィドルです: http://jsfiddle.net/9DbmN/

4

2 に答える 2

2

Chris Coyier による Centering in the Unknownをご覧ください。Imo は、垂直センタリングの聖杯に対するかなり堅実なソリューションです。

于 2012-07-02T08:57:30.923 に答える
0

ここでテーブルを使用することをお勧めしません)))要素をvertical-align: middle設定した 2 セルのテーブルを使用するtdと、問題が完全に (そして簡単に!!!) 解決されます。

2 つのコンテナが必要な場合、そのうちの 1 つ (画像のあるコンテナ) が右にフロートし、センタリングが必要になりますfloat。これにはプロパティを使用しないようにする必要があります。a) 私が理解している限り、左側のコンテンツが画像の下にある必要はありませんよね? b) フロートはブロックレベルの要素であり、設定しても変更できませんdisplay: table-cell。ブラウザーは引き続きそれをレンダリングしますdisplay: block。これにより、css によって (少なくとも知っているという意味です）。

ie7 のサポートが必要ない場合、考えられる回避策は次のとおりです。

html:

<div id="container">
    <div class="content">Content goes here, vertically aligned with the image</div>
    <div class="i_used_to_be_floated_right">Image goes here</div>
</div>

CSS:

#container {
    display: table;
    width: 100%;
}
.content, .i_used_to_be_floated_right {
    display: table-cell;
    vertical-align: middle;
}
.content {
    background: green;
    width: 80%;
}
.i_used_to_be_floated_right{
    background: red;
    width: 20%;
}

実際の動作例は、ここで見ることができます: http://jsfiddle.net/skip405/sDXMj/1/

しかし、ie7 が必要な場合は、最初に述べたテーブル ソリューションに投票します。

于 2012-07-02T11:17:35.870 に答える