CSSフォントを中央揃えにする方法

Web デザインでは、フォントの中央揃えがページ全体の美しさに重要な役割を果たします。 CSS には、フォントの中央揃え効果を実現するさまざまな方法が用意されています。ここでは、一般的に使用される実装方法をいくつか紹介します。

1. text-align 属性を使用する

Text-align は CSS で最も一般的に使用される属性の 1 つで、要素のテキスト コンテンツを水平方向に中央揃えにすることができます。デフォルトでは、text-align 属性の値は left です。これは、要素内のテキスト コンテンツが左揃えになることを意味します。テキスト コンテンツを中央揃えにする必要がある場合は、text-align 属性の値を center に設定する必要があります。例:

<div style="text-align:center;">这是居中对齐的文本</div>

注: text-align 属性はテキスト コンテンツに対してのみ機能し、他の要素 (画像など) には影響しません。

2. line-height 属性を使用する

Line-height は行の高さを定義する属性で、要素内のテキストの行間隔を制御できます。 line-height の値をコンテナの高さと等しくなるように設定すると、テキストがコンテナ内で垂直方向の中央に配置されます。次のコードに示すように:

<div style="height:200px;line-height:200px;text-align:center;">这是居中对齐的文本</div>

注: line-height を使用して中央揃えを実現するには、テキストに 1 行しかない必要があり、line-height の値を設定するにはコンテナの高さを知っている必要があります。身長。

3. display 属性と text-align 属性を使用する

この方法では、まず中央揃えにする要素をブロック要素 (デフォルトではテキストはすべてインライン要素) に変換する必要があります。次に、text-align:center を使用して中央揃え効果を実現します。次のコードに示すように:

<style>
.center{
    display:block;
    text-align:center;
}
</style>
<div class="center">这是居中对齐的文本</div>

注: display 属性と text-align 属性を使用して中央揃えを実現するには、ターゲット要素がブロック要素である必要があります。

4.transform 属性を使用する

この方法では、transform 属性をターゲット要素のスタイルに追加し、translateY 属性の値を -50% に設定する必要があります。次のコードに示すように:

<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">这是居中对齐的文本</div>

注: 中央揃えを実現するには、transform 属性を使用します。ターゲット要素は絶対位置 (position:absolute) に設定する必要があります。

概要:

上記は、フォントの中央揃えを実現するために CSS で一般的に使用されるいくつかの方法です。中心揃えの効果を得るには、実際の状況に応じて適切な方法を選択する必要があります。同時に、さまざまな要素やテキストの状況に応じてさまざまな方法を選択することで、ページの美しさをさらに向上させることもできます。

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