web-dev-qa-db-ja.com

インラインブロックで垂直方向の整列が機能しない

私は言われました：

垂直方向の整列は、インライン、インラインブロック、画像、およびテーブル要素に対してのみ機能します。
text-alignとは異なり、親要素とは反対に、子要素に適用する必要があります。

ただし、インラインブロック要素で垂直方向の中央揃えを設定しようとすると、機能しませんでした。どうして？

#wrapper {
border: 1px solid black;
width: 500px;
height: 500px;
}
#content {
border: 1px solid black;
display: inline-block;
vertical-align: middle;
}
<div id = 'wrapper'>
<div id = 'content'> content </div>
</div>
htmlcssinlinevertical-alignment
12
frosty

vertical-align は、含まれているブロックではなく、ラインボックスに関するインラインレベルのコンテンツの配置を設定するため、機能しません。

このプロパティは、インラインレベル要素によって生成されたボックスのラインボックス内の垂直方向の配置に影響します。

ラインボックス は

線を形成するボックスを含む長方形の領域

複数の行があるテキストが表示される場合、それぞれが行ボックスです。たとえば、あなたが持っている場合

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

enter image description here

あなたの場合のように、1行しかない場合、それはまたラインボックスです

enter image description here

vertical-align: middleを使用すると、.contentをその行ボックス内で垂直方向に中央揃えにします。しかし、問題は、ラインボックスが包含ブロック内の垂直方向の中央にないことです。

包含ブロックの中央で何かを垂直方向に中央揃えする場合は、 CSSでdivのテキストを垂直方向に中央揃えするには？ を参照してください。

22
Oriol

Vertical-align on inline/inline-block要素、画像、テキスト...親ではなく要素を揃えます。

使用例：テキストにスマイリー画像を配置する

幅0px、高さ100％の擬似要素を追加することでチートできます

#wrapper {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    vertical-align: middle;
}
#wrapper:after{
    content: '';
    display: inline-block;
    width: 0px;
    height: 100%;
    vertical-align: middle;
}
#content {
    border: 1px solid black;
    display: inline-block;
    vertical-align: middle;
}
<div id = 'wrapper'>
    <div id = 'content'> content </div>
</div>
3
Yukulélé

それは、vertical-align：text-topを使用することで機能します。

<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div>
<div class="box">
    Lorem ipsum dolor sit amet, diam nonummy nibh 
</div>
<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div>

.box {
   display: inline-block;
   width: 20%;
   margin: 5px;
   padding:10px;
   border-top: 5px solid #000000;
   vertical-align: text-top;
}

jsfiddle

1
fede