CSS でインライン/インラインブロック要素を垂直方向に整列するにはどうすればよいですか?

CSS でのインライン/インライン ブロック要素の垂直方向の配置

垂直方向に配置されたレイアウトを作成する場合、CSS での垂直方向の配置を理解することが重要です。適切なvertical-alignプロパティを適用しているにもかかわらず、要素は予期せぬシフトを続ける可能性があります。

次の例を見てください。

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>

ここでは、両方の「vertical-align」を適用しているにもかかわらず、span要素は押し下げられたままです。 ：真ん中;"

この問題を解決する鍵は、「vertical-align」が親コンテナではなく、整列される要素に適用されることを理解することにあります。 「div」要素の子を垂直方向に整列するには、次の CSS ルールを使用します。

div > * {
    vertical-align:middle;  // Align children to middle of line
}

この変更により、「div」要素の子は親 div 内で垂直方向に整列します。

注: 「vertical-align」は、コンテナ div の高さ全体ではなく、現在のテキスト行を基準にして位置合わせします。より高い親 div 内で要素を中央に配置するには、親 div の高さの代わりに「line-height」プロパティを設定します。実際の例については、元の質問で提供されている jsfiddle リンクを参照してください。

以上がCSS でインライン/インラインブロック要素を垂直方向に整列するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。