CSS の Div 内のスパンを垂直方向の中央に配置する方法は?

Div 内でスパンを垂直方向の中央に配置する方法

CSS では垂直方向の配置が複雑になる可能性があり、div 内でスパンを配置することはできません例外。

CSS の配置について

解決策に入る前に、CSS の垂直方向の配置を理解することが重要です。

• Natural配置: インライン要素 (スパンなど) は、最も下の文字の下部である ベースライン に自然に配置されます。
• 行の高さ: 行-height プロパティは、文字と先頭のスペースの両方を囲む行ボックスの高さを設定します。
• 本質的な高さ: 要素の本質的な高さは、要素が何も含まれていない場合に占めるスペースです。

垂直方向の配置テクニック

div 内でスパンを垂直方向の中央に配置するには、次のテクニックを検討してください。

1.ラインの高さをコンテナの高さに合わせる:

div の高さと一致するようにスパンのラインの高さを設定します。たとえば、div の高さが 15 ピクセルの場合、line-height: 15px を設定します。スパン上。

2.絶対位置:

設定位置: 絶対。 div と位置に関して: 絶対的;トップ: 50%;スパン上で。次に、スパンのマージントップの値を本来の高さの半分に調整します。

3.変換:translateY

変換を使用します:translateY(-50%);スパン上のプロパティ。これにより、スパンが本来の高さの半分だけ垂直にシフトされます。

4. Flexbox

Flexbox を使用してスパンを垂直方向の中央に配置します。ディスプレイを設定: フレックス;整列項目: 中央; div と margin: auto;

コードサンプル

行の高さメソッドを使用した例を次に示します。

<div id="theMainDiv" style="height: 15px; line-height: 15px;">
  <span id="tag1_outer">as</span>
</div>

以上がCSS の Div 内のスパンを垂直方向の中央に配置する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。