フレックスボックスと CSS の配置を使用してテキストを画像の中央に配置するにはどうすればよいですか?

フレックスボックスおよび CSS の配置でテキストを画像上に中央揃えにする

画像上でテキストを中央揃えにすることは、一般的なレイアウト要件です。 Flexbox には強力な配置オプションが用意されていますが、CSS 配置プロパティを使用してこの効果を実現することもできます。

絶対配置の使用

絶対配置を使用してテキストを画像の中央に配置するには:

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

• ボディの静的位置値を設定して、位置決めされた祖先を確立します。絶対配置の場合。
• テキスト要素を絶対配置します。
• テキストを水平方向の中央に左に配置します: 50%。
• トランスフォームを使用して、幅と高さの半分を移動してセンタリングを微調整します。

フレックスボックスを使用する

または、Flexbox を画像とテキストの両方に使用できますPositioning:

body {
  margin: 0px;
}
...
.height-100vh {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
...
.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}
.center-aligned {
  display: flex;
  align-items: center;
  justify-content: center;
}

• 高さプロパティを使用して、イメージ要素とテキスト要素の両方を Flexbox コンテナーでラップします。
• set align-items: center;そして justify-content: center;コンテナ内で項目を垂直方向と水平方向に整列させます。
• テキスト要素をコンテナ内に絶対配置し、必要に応じてスタイルを設定します。

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