ボックスを水平方向に中央揃えにするCSSコード

下次还敢
リリース: 2024-04-25 14:21:13
オリジナル
398 人が閲覧しました

ボックスを水平方向に中央揃えにするには、親コンテナーに text-align: center 属性を設定します。具体的な手順は次のとおりです。 1. ボックスの display: inline-block 属性を設定します。 2. ボックスの親コンテナに text-align: center 属性を設定します。

ボックスを水平方向に中央揃えにするCSSコード

CSS を使用してボックスを水平方向に中央揃えにする方法

直接的な答え:

ボックスを水平方向に中央揃えにするには、text-align: center 属性を設定できます。親コンテナ上で。 text-align: center 属性。

详细说明:

要让盒子水平居中,需要执行以下步骤:

  1. 为盒子设置 display: inline-block; 属性。 这将使盒子成为块级元素,并允许对其进行水平设置。
  2. 为盒子的父容器设置 text-align: center
  3. 詳細:

ボックスを水平方向の中央に配置するには、次の手順を実行する必要があります:

  1. ボックスの display: inline-block; 属性を設定します。 。

    これにより、ボックスがブロックレベルの要素になり、水平に設定できるようになります。

  2. ボックスの親コンテナの text-align: center 属性を設定します。

    これにより、ボックスを含む親コンテナ内のすべてのブロックレベル要素が水平方向に中央揃えになります。

    サンプルコード:

    <code class="css">#parent {
      text-align: center;
    }
    
    #box {
      display: inline-block;
    }</code>
    ログイン後にコピー
    ログイン後にコピー

    アプリケーション例:

    次のHTMLコードとCSSコードをページに追加します:

    🎜🎜HTML: 🎜🎜
    <code class="html"><div id="parent">
      <div id="box">This box is centered horizontally.</div>
    </div></code>
    ログイン後にコピー
    🎜🎜CSS: 🎜🎜
    <code class="css">#parent {
      text-align: center;
    }
    
    #box {
      display: inline-block;
    }</code>
    ログイン後にコピー
    ログイン後にコピー
    🎜 レベル中央のボックス「このボックスは水平方向の中央に配置されています。」というテキスト。 🎜

以上がボックスを水平方向に中央揃えにするCSSコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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