CSSテキストを中央揃えにする方法

ページをデザインするとき、テキストのレイアウトは特に重要です。 CSSにおける文字の中央揃えの方法としては、以下の3通りの方法があります。

1. text-alignAttribute

text-alignAttribute は、左揃えや右揃えなど、テキストの水平方向の配置を制御するために使用できます。整列、中央揃え、両端揃えなど。

div{
  text-align: center;
}

ここで、center は中央揃えを意味します。この属性を使用し、値を center に設定すると、テキストは自動的に中央に揃えられます。

2. line-height属性

line-height属性は行の高さを表し、これを使用して垂直方向のセンタリングを設定できます。インライン要素。行の高さをボックスの高さと同じに設定すると、テキストは垂直方向の中央に配置されます。

div{
  height: 200px;
  line-height: 200px;
  text-align: center;
}

この方法で、テキストを中央揃えにすることができます。

3. display 属性と text-align 属性

は、display 属性を通じてテキスト要素を柔軟なボックス レイアウトに変換できます。次に、justify-content 属性を使用して水平方向のセンタリングを制御します。 justify-content 属性は、center、flex-start、flex-end などのさまざまな値に設定でき、それぞれが表す中央揃え、左揃え、右揃えなど。

div{
  display: flex;
  justify-content: center;
}

上記は CSS で中国語テキストを横方向に中央揃えにする 3 つの方法であり、ページをより美しくするために柔軟に使用できます。テキストを垂直方向と水平方向の中央に配置する必要がある場合は、上記の 2 つの方法を組み合わせて使用​​できます。同時に、要素スタイルごとに使用されるセンタリング方法が異なる場合があり、特定の状況に応じて適切な方法を選択する必要があることにも注意する必要があります。

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