Div 内でスパンを垂直方向に中央揃えにする方法

CSS では垂直方向の配置が複雑になる場合があり、div 内でスパンを配置するのは困難です。例外。

CSS の配置について

始める前にソリューションを導入するには、CSS の垂直方向の配置を理解することが重要です:

• 自然な配置: インライン要素 (スパンなど) は、ベースラインに自然に配置されます。
• Line Height: line-height プロパティは、行ボックスの高さを設定します。文字と先頭のスペースの両方を囲みます。
• 固有の高さ: 要素の固有の高さは、スタイルやパディングなしで要素が占めるスペースです。

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

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

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

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

2.絶対位置:

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

3.変換:translateY

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

4. Flexbox

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

コード サンプル

これは line-height メソッドを使用した例です:

  as