HTMLでフォントの中央揃えスタイルを設定する方法-フロントエンドQ&A-php.cn

HTMLでフォントの中央揃えスタイルを設定する方法

PHPz

リリース： 2023-04-23 18:07:30

オリジナル

6284 人が閲覧しました

HTML では、さまざまな方法を使用してフォントを中央揃えに設定できます。この記事では、CSS や HTML タグの使用など、テキストの中央揃えを実現するいくつかの方法を紹介します。

1. CSS スタイルを使用してテキストを中央揃えにする

CSS では、text-align 属性を設定することで、テキストを水平方向に簡単に中央揃えにできます。例:

p {
    text-align: center;
}

ログイン後にコピー

これにより、すべての段落が中央揃えになります。特定の要素のみを中央に配置したい場合は、セレクターを使用してその要素を指定できます。例:

h1 {
    text-align: center;
}

ログイン後にコピー

これにより、すべての H1 タグが中央に配置されます。

もちろん、テキストブロックの一部だけを中央揃えにしたい場合は、inline 要素を使用し、中央に配置するテキストを inline 要素で囲んでから、text-align 属性を次のように設定します。要素。

<p>这是一段普通的文本，<span style="text-align: center;">这是一段居中的文本。</span> 这还是一段普通的文本。</p>

ログイン後にコピー

これにより、タグ内に含まれるテキストが中央に配置されます。

2. HTML タグを使用してテキストを中央に配置する

HTML では、いくつかのタグを使用してテキストを中央に配置できます。これらのタグは次のとおりです:

タグ: このタグは古いものですが、一部の古い Web サイトではまだ見られます。使い方は非常に簡単で、中央に配置されるテキストをタグで囲むだけです。

<center>这是一段居中的文本。</center>

ログイン後にコピー

タグ:
タグを使用し、text-align:center スタイルをそれに設定して、HTML 要素を中央揃えにします。例:

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

ログイン後にコピー

さらに、他の HTML 要素を

タグ内にネストして中央に配置することもできます。

<div style="text-align:center;">
    <h1>这是一个居中的标题</h1>
    <p>这是一段居中的文本。</p>
</div>

ログイン後にコピー

タグ: タグと text-align:center スタイルを使用して、インライン要素を中央揃えにします。

<p>这是一段普通的文本，<span style="text-align:center;">这是一段居中的文本。</span> 这还是一段普通的文本。</p>

ログイン後にコピー

HTML タグを使用してテキストを中央揃えにすることはできますが、これらのタグは廃止されたため、代わりに CSS スタイルを使用する必要があることに注意してください。

概要

HTML でテキストの中央揃えを設定するには、CSS スタイルと HTML タグを使用できます。テキストの中央揃えと整列は CSS スタイルを使用して実現できますが、多少時代遅れの HTML マークアップを使用しても同じ効果を実現できます。どのソリューションを使用する場合でも、テキストをページの中央に配置するのは簡単です。

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