HTMLでボックス内のテキストを中央揃えにする方法

HTML ボックス内のテキストを中央揃えにする方法は 4 つあります。 CSS の text-align: center プロパティを使用して、水平方向の中央揃えにします。垂直方向の中央揃えには、padding-block-start プロパティと padding-block-end プロパティを使用します。柔軟な配置には、Flexbox display: flex; justify-content: center; align-items: center を使用します。グリッドの使用 Grid-template-columns:repeat(auto-fit, minmax(0, 1fr)

HTML でボックス内のテキストを中央揃えにする方法

HTML では、ボックス内のテキストを中央揃えにする方法がたくさんあります。

CSS プロパティを使用する

#text-align: center: 最も一般的に使用される方法コンテナ内でテキストを水平方向に中央揃えにするメソッド。

.container {
  text-align: center;
}

padding-block-start および padding-block-end: は、垂直方向に中央揃えのテキストに適用されます。これらのプロパティを同じピクセル値に設定します。ブロック コンテナ内のテキストを垂直方向の中央に配置します。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
}

Flexbox の使用

display: flex; justify-content: center; align-items: center: Flexbox メソッドを使用して柔軟に要素を整列します。このスニペットは、テキストを水平方向と垂直方向の中央に配置します。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

グリッドの使用

grid-template-columns:repeat(auto-fit, minmax (0, 1fr)); justify -content: center; align-items: center: Grid メソッドを使用して、グリッド レイアウトを作成します。このコード スニペットは、テキストを水平方向と垂直方向の中央に配置する 1 列のグリッドを作成します。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  justify-content: center;
  align-items: center;
}

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