Flexbox の代わりに CSS 配置を使用してテキストを画像の中央に配置するにはどうすればよいですか?

Flexbox を使用して画像上でテキストを中央揃えにする

このガイドでは、Flexbox の代わりに純粋な CSS 配置プロパティを使用して画像上でテキストを中央揃えにする別のアプローチを検討します。

位置決めプロパティ:

.height-100vh {
  position: relative;
}

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

1. 相対親の確立: height-100vh クラスのコンテナ要素に location:relative を設定して、絶対位置指定のための位置指定された祖先を確立します。
2. テキストの絶対配置: では、position:Absolute を使用します。 .text クラスを使用して、通常のドキュメント フローの外側に配置します。
3. 水平配置: left: 50% に設定すると、コンテナの左端から測ってテキストを水平方向の中央に配置します。
4. 垂直方向の配置: 同様に、上: テキストの上端から測って、テキストを垂直方向に 50% 中央揃えします。 container.
5. 正確なセンタリング: テキストを正確にセンタリングするために、transform:translate(-50%, -50%) を適用します。これにより、テキストが両方向に -50% 変換され、最終的には中央に移動します。

使用例:

<section class="height-100vh center-aligned">
  <img  class="background-image lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="Flexbox の代わりに CSS 配置を使用してテキストを画像の中央に配置するにはどうすればよいですか?" >
  <div class="text">SOME TEXT</div>
</section>

これらの配置プロパティを実装することで、効果的に中央に配置できます。 Flexbox に依存せずに画像上にテキストを重ねます。このアプローチは、この一般的なレイアウト タスクに対するシンプルで直接的なソリューションを提供します。

以上がFlexbox の代わりに CSS 配置を使用してテキストを画像の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。