Flexbox を使用せずにテキストを画像の中央に配置するにはどうすればよいですか?

Flexbox で画像の上にテキストを中央揃えする

多用途のレイアウト システムである Flexbox は、コンテンツの位置を揃えるために広く使用されています。ただし、画像の中央にテキストを配置するというこの特定のタスクについては、CSS 配置プロパティがよりシンプルで効果的なソリューションを提供します。

画像の中央にテキストを配置するために、フレックスボックスは必要ありません。次の手順に従ってください:

1. 最も近い位置の祖先を確立します: 外側のコンテナー (この例では .height-100vh) に location:relative プロパティを割り当てて、最も近い位置の祖先を確立します。絶対配置の場合。
2. テキストに絶対配置を使用します: Giveテキストコンテナー (div.text) 位置: 絶対プロパティ。これにより、親要素を基準にしてテキストを正確に配置できます。
3. 水平方向と垂直方向に配置: 左: 50% と上: 50% を設定して、テキストをテキスト内で水平方向と垂直方向に配置します。親コンテナ。
4. 正確に中央揃え: 変換変換を適用します (変換: translation(-50%, -50%);) を使用して位置を微調整し、正確なセンタリングのために要素の幅と高さの半分を占めます。

これらの概念を利用した更新された CSS スニペットは次のとおりです。

.height-100vh {
    height: 100vh;
    position: relative;
}

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

このメソッドは、フレックスボックスを必要とせずに、テキストを画像の中央に効果的に配置します。正確な位置合わせを保証し、クロスブラウザで動作するため、位置合わせのニーズに対する信頼性の高いソリューションとなります。

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