ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS で `` を水平方向の中央に配置するにはどうすればよいですか?

CSS で `` を水平方向の中央に配置するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-11-30 05:22:17
オリジナル
161 人が閲覧しました

How Do I Horizontally Center a `` in CSS?

を水平方向に中央揃えにする方法CSS で

を中央揃えにする水平方向の処理は CSS の一般的なタスクです。 text-align プロパティを使用して
の内容を中央に配置することはできますが、要素の位置には影響しません。

間違ったアプローチ:

設定'テキスト整列: 中央;'

で要素内のテキストが中央に配置されるだけであり、要素自体をその要素を含む領域の中央に移動することはありません。

正しいアプローチ:

ブロックレベルの要素を中央に配置するには

と同様に、2 つのアプローチが可能です。 used:
  1. 「margin: 0 auto;」を使用しています固定幅または相対幅の場合:

    • このメソッドは、上と下のマージンを 0 に設定し、左と右のマージンを 'auto' に設定します。
    • 'Auto'要素が自動的に中央に配置されるように、余白を対称に設定するようにブラウザに指示します。
    • これは、要素に既知の属性がある場合にのみ機能することに注意してください。 width.
  2. 親要素の中央揃え:

    • 要素がインラインの場合 (例: スパン)、設定します。 'テキスト整列: 中央;'
    • これにより、親内のすべてのインライン要素が水平方向の中央に配置されます。

以上がCSS で `` を水平方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート