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

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

div 内でインラインまたはインラインブロック要素を垂直方向に配置しようとすると、 vertical-align プロパティは親要素ではなく子要素に関係することに注意することが重要です。提供された HTML と CSS では、div 要素に垂直方向の配置が適用されているため、スパンが頑固に下にシフトします。

要素を垂直方向に適切に配置するには、div 内の子要素にvertical-align プロパティを適用します。 :

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

この変更により、div 内のすべての inline および inline-block 要素が意図したとおりに垂直方向に整列します。 [https://jsfiddle.net/dfmx123/TFPx8/1186/](https://jsfiddle.net/dfmx123/TFPx8/1186/)

補足:

垂直方向の配置は、親 div の高さではなく、現在のテキスト行を基準にしています。整列された要素よりも高い div 内で垂直方向の中央揃えを実現するには、高さの代わりに div の line-height プロパティを設定します。デモについては、提供されている更新された JSFiddle サンプルを参照してください。

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