HTMLでボックスを中央揃えに設定する方法

HTML でボックスを中央揃えに設定するには、次のメソッドを使用できます: 水平方向の中央揃え: text-align: center; margin: 0 auto; 垂直方向の中央揃え:vertical-align: middle; display: flex; align-items: center ;二次元で中央揃え: display: flex; justify-content: center; align-items: center;

方法HTML でボックスを中央揃えにする

HTML でボックスを中央揃えにすることは、一般的で便利なタスクです。これを実現するには、位置揃えする要素のタイプと希望する中央揃えに応じて、いくつかの方法があります。

水平方向の中央揃え

水平方向の中央揃えとは、ボックスを親要素の水平方向の中央に配置することを意味します。一般的なメソッドは 2 つあります:

• text-align: center;: これは、テキスト コンテンツをブロック レベル要素内で水平方向の中央に配置します。
• margin: 0 auto;: これにより、ブロックレベルの要素が親要素内の水平方向の中央に配置されます。

例:

<div style="text-align: center;">
  <p>Hello, world!</p>
</div>

垂直方向のセンタリング

垂直方向のセンタリングとは、ボックスを親要素の垂直方向の中央に配置することを意味します。一般的なメソッドは 2 つあります:

• vertical-align: middle;: これは、インライン要素 (画像やテキストなど) を親の垂直方向の中央に配置します。要素。
• display: flex; align-items: center;: これにより、親要素内のブロックレベル要素が垂直方向の中央に配置されます。

例:

<div style="display: flex; align-items: center;">
  <img  src="/static/imghwm/default1.png"  data-src="image.jpg"  class="lazy"   style="max-width:90%" alt="HTMLでボックスを中央揃えに設定する方法" >
</div>

2 次元での中央揃え

ボックスを水平方向と垂直方向に同時に中央揃えするには、次のようにします。 flexbox、以下に示すように:

<div style="display: flex; justify-content: center; align-items: center;">
  <div>Box</div>
</div>

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