「vertical-align: middle」がインラインコンテンツを常に垂直方向の中央に配置しないのはなぜですか?

vertical-align の予期せぬ結果: コンテンツの位置がずれている

Web デザインの領域では、vertical-align は要素を垂直に配置する上で重要な役割を果たします。 。ただし、意図した配置が行われず、コンテンツの不整合が生じる場合があります。

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

p {
  background: yellow
}

span {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  background: pink;
}

<p>Hello <span>What in the</span> World?</p>

このシナリオでは、周囲の段落内で垂直方向に整列するようにspan要素を配置します。ただし、vertical-align: middle をスパンに適用すると、予期しない結果が発生します。スパンのコンテンツを除く段落全体が垂直方向に整列します。

この位置ずれはなぜ発生しますか?これはバグではなく、vertical-align の予期される動作です。 vertical-align は要素の垂直方向の配置を指定します。この場合、スパンは段落内の中央に配置されます。スパンのコンテンツに位置合わせがないことは、ブラウザがスパン自体の高さよりも低い自然な高さに従ってコンテンツをレンダリングしていることを示しています。

位置ずれを取り除くには、垂直方向の位置合わせを調整できます。垂直方向の配置を変更してスパンのコンテンツを編集します:

span {
  position: relative;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);
}

以上が「vertical-align: middle」がインラインコンテンツを常に垂直方向の中央に配置しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。