HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【初心者向け】HTMLでdiv要素を中央揃えにする方法

div要素を中央揃えにする基本的なCSS

HTMLでdiv要素を中央に配置したい場合、目的に応じて次の2つのCSSプロパティを使い分けるのがポイントです。

  • divの中身（テキストや画像など）を中央揃えにする → text-align: center;
  • div要素そのものを画面中央に配置する → margin: 0 auto;

margin: 0 auto; を使う際は、divに横幅（width）を指定しておく必要があります。幅が指定されていないとブロック要素は親要素いっぱいに広がるため、autoによる左右マージンの自動計算が機能しません。

実際のコード例

上記のCSSを組み合わせると、コードは以下のようになります。

<div style="text-align:center; width:300px; margin:0 auto; border-style:dotted;">
  <p>hi</p>
</div>

この例では、幅300pxの点線枠を持つdiv要素が画面中央に配置され、さらに内部のテキストも中央揃えになっています。

表示結果

【初心者向け】HTMLでdiv要素を中央揃えにする方法

  1. HTML DOMのflexGrowプロパティとは？構文と使い方をサンプルコード付きで解説

    flexGrowプロパティとは？HTML DOMのflexGrowプロパティは、フレックスコンテナの中で各要素（フレックスアイテム）が余ったスペースをどの割合で受け取って伸びるかを設定するためのプロパティです。値には単位を付けない数値を指定します。構文flexGrowプロパティをJavaScriptから設定する場合は、次のような構文を使用します。object.style.flexGrow = number|initial|inheritそれぞれの値の意味は以下のとおりです。number … 他の要素と比べて、その要素がどれだけ伸びるかを示す数値。デフォルト値は0です。initial … プロパ

  2. HTML DOMスタイルのflexFlowプロパティの使い方を徹底解説

    HTML DOMのスタイルにおけるflexFlowプロパティは、要素のflexDirection（フレックスアイテムの方向）とflexWrap（折り返しの可否）をまとめて指定するためのプロパティです。これら2つのプロパティに対するショートハンド（一括指定）として機能し、記述した順序に従って値が適用されます。flexFlowプロパティの構文flexFlowプロパティを設定する際の基本的な構文は以下の通りです。object.style.flexFlow = flex-direction flex-wrap|initial|inherit;指定できる値の一覧flexFlowプロパティに設定できる各値