垂直方向の位置合わせはインラインブロック要素でも機能しますか?

垂直配置: インラインブロックの欠陥のある概念

垂直配置はインライン要素とインラインブロック要素に簡単に適用できると一般に主張されていますが、 、この信念はしばしば失望に見舞われます。実際には、垂直方向の配置には、インライン ブロック要素に対して無効にする特定の目的があります。

囲んでいる要素内のテキストの水平方向の配置を設定する text-align とは異なり、垂直方向の配置は要素の垂直方向の配置を対象としています。親要素ではなく、それを囲んでいる行ボックスに関して。行ボックスは、テキスト行が占める長方形のスペースを指します。

次の例を考えてみましょう:

#wrapper {
border: 1px solid black;
width: 500px;
height: 500px;
}
#content {
border: 1px solid black;
display: inline-block;
vertical-align: middle;
}

HTML:

<div>

この場合、垂直方向の位置合わせは、それを含むブロック内の垂直方向の間隔を考慮しないため、inline-block 要素 #content にvertical-align: middle を適用しても効果はありません。要素を独自の行ボックス内で整列させるだけです。

垂直方向の整列のこの基本的な特性を把握すると、将来の問題を回避し、HTML および CSS コードで正確な垂直方向の位置を確保できます。

以上が垂直方向の位置合わせはインラインブロック要素でも機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。