1 
<div id="content">ABC<div>UUU</div></div>

の真ん中に垂直に整列する方法を見つけたいだけですdiv#content。実際、私はいくつかの解決策を持っています。最初のものは を使用していますが、line-heightに別のものがあると機能しません。そして、テーブルでうまくいくと思いますか？他に使用可能なソリューションはありますか？divdiv#contentvertical-align:middle

私は vertical-align:middle と display:table-cell を試してみましたが、他の問題が発生しました。幅が機能しません。その div に大きな幅を与えて、画面 (1438px) を埋めることができますが、現在は幅もそれです画面の 1/3 幅に入力します。テーブルセルは画面内のすべてのセルを作成するように見えますが、テーブルセルに指定された長さを与えたいだけです。

4

4 に答える 4

4

要件にこれを使用してください

#content {display:table-cell; vertical-align:middle}
于 2012-09-05T07:22:54.353 に答える
1

要素でdisplay:table-cell宣言すると、垂直方向の整列が機能します。

#content {
    display:table-cell;
    vertical-align:middle
}
于 2012-09-05T07:22:38.877 に答える
0

http://phrogz.net/css/vertical-align/index.htmlで、通常の DIV とインライン DIV の両方の垂直方向の配置に関する詳細な説明を参照してください。

于 2012-09-05T07:24:09.307 に答える
0

...を使用して他の回答を説明するdisplay:table-cell;vertical-align:middle... 表のセルの幅を 100% にすることはできませんが、コンテナーは可能です!

CSS テーブルの使用

テーブル表示のアイテムは、動的な幅を受け入れます。

#existingContainer {
    display: table;
    width: 100%;
}
#content {
    display: table-cell;
    vertical-align: middle;
    height: 100px; /* example */
}

サンプル HTML を使用して、次のように言います。

<div id="existingContainer">
    ...
    <div id="content">ABC<div>UUU</div></div>
    ...
</div>

Clearing Div の使用

または、 table-cell をブロック要素に直接配置すると、インライン要素がその横に配置されなくなります。

<div id="newContainer">    
    <div id="content">ABC<div>UUU</div></div>
</div>

サンプル CSS を使用:

#newContainer {
    display: block;
}
#content {
    display: table-cell;
    vertical-align: middle;
    height: 100px; /* example */
}
于 2012-09-05T08:08:30.683 に答える