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

CSS のインライン要素とインラインブロック要素の垂直方向の配置: 不整合の問題に対処する

テキスト内でのインライン要素とインラインブロック要素の垂直方向の配置コンテナ div は課題を引き起こす可能性があります。提供された例で強調表示されているように、span 要素が押し下げられているように見える場合、親 div (div) のみで垂直方向の位置合わせプロパティを操作しても、望ましい結果は得られません。

位置ずれの原因:

vertical-align プロパティは、親要素ではなく、垂直方向に配置される要素の配置に影響します。したがって、vertical-align:middle; を設定します。または垂直配置:上; div 上の は、それ自体の配置にのみ影響し、その中の要素には影響しません。

解決策:

div の子要素を垂直方向に配置するには、vertical-align を適用します。プロパティを直接それらに追加します:

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

この調整により、div 内の各子要素は垂直方向に中央に揃えられるようになります。

補足:

vertical-align は親 div の高さ全体ではなく、現在のテキスト行に関係することに注意してください。親 div の高さ全体にわたって垂直方向の中央揃えが必要な場合は、高さではなく div の line-height プロパティを設定します。例示的な例については、提供されている JsFiddle リンクを参照してください。

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