3

ここに示すように、文字列「1」、「2」、および「3」を垂直方向に中央揃えしようとしています。

しかし、display: table-cell; vertical-align: middle;3つのdivすべてに使用すると、望ましくない結果が得られます:

HTMLは

<div id='alldivs'>
    <div id='red' class='each_div'>1</div>
    <div id='blue' class='each_div'>2</div>
    <div id='green' class='each_div'>3</div>

</div>

CSSは

.each_div { 
     width: 80px;
     height: 50px; 
     text-align: center;
     display: table-cell; vertical-align: middle;
}

デモ

各 div 内で垂直方向の配置を維持しながら、3 つの div を垂直方向に配置するにはどうすればよいですか?

4

4 に答える 4

4

これは概念的な誤解です。テーブル セルを持つ親要素がないとdisplay:table-row、 と の匿名テーブル オブジェクトが作成されるため、セルは常に全幅にまたがりtable-rowますtable。

W3C 仕様の記事によると:テーブル

HTML 以外のドキュメント言語には、CSS 2.1 テーブル モデルのすべての要素が含まれていない場合があります。このような場合、テーブル モデルが機能するためには、"欠けている" 要素を想定する必要があります。テーブル要素は、それ自体の周りに必要な匿名のテーブル オブジェクトを自動的に生成します。これは、'table'/'inline-table' 要素、'table-row' 要素、および 'table-cell' 要素に対応する少なくとも 3 つのネストされたオブジェクトで構成されます。 . .....

これは、の使用法などを示す quirksmode のページですdisplay: table。この質問と同じ効果を示す画像。

この問題を意味的に解決するには、行として表示する要素を追加する必要があります。

<div id='alldivs'>
    <div id='red' class='each_div'>
        <div class="cell">1</div>
    </div>
    <div id='blue' class='each_div'>
        <div class="cell">2</div>
    </div>
    <div id='green' class='each_div'>
        <div class="cell">3</div>
    </div>
</div>

次に、相対 CSS をそれらに割り当てます

#alldivs { display: table; }

.each_div {
     display: table-row;
}

.cell {     
    width: 80px;
    height: 50px;
    display: table-cell;
    vertical-align: middle;
    border: 1px #000 solid;
}

デモ

于 2012-11-06T04:49:44.183 に答える
2

を使用して、もっと簡単な方法があると思いますline-height：

<div id='alldivs'>
    <div id='red' class='each_div'>1</div>
    <div id='blue' class='each_div'>2</div>
    <div id='green' class='each_div'>3</div>
</div>

.each_div { 
     width: 80px;
     height: 50px; 
     line-height:50px;     // set to the same height as the div
     text-align: center;
     clear:both;}          // add clear both to skip line

ここでjsfiddleを見て、他の回答と比較してください。

ここに画像の説明を入力

于 2012-11-06T05:03:47.937 に答える
1

それぞれを次のようにラップする<div>とdisplay: table-row;、希望どおりに表示されます。

HTML:

<div id='alldivs'>
        <div class="row">
            <div id='red' class='each_div'>1</div>
        </div>
        <div class="row">
            <div id='blue' class='each_div'>2</div>
        </div>
        <div class="row">
            <div id='green' class='each_div'>3</div>
        </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

.each_div { 
     width: 80px;
     height: 50px; 
     display: table-cell; 
     vertical-align: middle;
     border: 1px #000 solid;
}
.row {
    display: table-row;
}​

これは、table-*がテーブルをエミュレートするように設計されているためです。したがって、テーブルの外観を取得するには、テーブル構造に従う必要があります。この場合、テーブルを使用したいだけかもしれません。

于 2012-11-06T04:55:23.920 に答える
0

ご希望の方法で機能する回避策を見つけました。必要に応じて、次のように使用できます。

CSS を次のように変更します。

.each_div { 
     width: 100%;
     height: 50px; 
     vertical-align: middle;
     text-align:center;
     background:red;

}
#alldivs{
    width:80px;
    display:block;
}

width:80px親divについて言及したことに注意してくださいalldivs

出力は次のようになります。

上記CSSの出力

</p>

于 2012-11-06T04:32:57.280 に答える