HTMLフォントのセンタリングを設定する方法-フロントエンドQ&A-php.cn

HTMLフォントのセンタリングを設定する方法

WBOY

リリース： 2023-05-05 20:19:07

オリジナル

5459 人が閲覧しました

HTML フォントの中央揃えを設定する方法

HTML では、美しさと読みやすさのために、ページ上のテキストを中央揃えにする必要があることがよくあります。この記事では、CSS を使用して HTML テキストを中央揃えにする方法を説明します。

ステップ 1: 中央に配置する必要がある要素を選択します

まず、中央に配置する必要がある要素を選択する必要があります。HTML テキストの中央配置は 2 つのカテゴリに分類できます。単一のタグとページ全体を中心としたテキスト。

単一ラベル内でテキストを中央揃えにする:

特定のラベル内でテキストを中央揃えにする必要がある場合は、CSS プロパティ text-align:center を使用して設定できます。例:

<p style="text-align:center;">这是中间对齐的文字</p>

ログイン後にコピー

ページ全体のテキストを中央揃えにする:

ページ全体のテキストを中央揃えにする必要がある場合は、body 要素にそれを設定する必要があります。例:

<style>
    body {
        text-align: center;
    }
</style>
<body>
    <h1>这是标题</h1>
    <p>这是一段正文文字</p>
    <ul>
        <li>这是列表项目1</li>
        <li>这是列表项目2</li>
    </ul>
</body>

ログイン後にコピー

ステップ 2: 中央揃え方法の選択

中央揃えが必要な要素を選択した後、適切な中央揃え方法を選択する必要があります。一般的なセンタリング方法には、水平センタリングと垂直センタリングがあります。

水平方向の中央揃え:

CSS では、margin プロパティを使用して水平方向の中央揃えを実行できます。具体的な実装方法は、次のように要素の左右のマージンを auto に設定することです。

<style>
    .content {
        margin: 0 auto;
        text-align: center;
    }
</style>
<div class="content">
    <h1>这是标题</h1>
    <p>这是一段正文文字</p>
</div>

ログイン後にコピー

ここでの .content 要素は div 要素であり、その左右のマージンプロパティを auto に設定することで実現できます。水平方向のセンタリング。

垂直方向のセンタリング:

CSS では、垂直方向のセンタリングはより複雑で、Flexbox や table-cell などの属性を使用する必要があります。ここでは、Flexbox を使用して垂直方向の同時配置を実現する方法を紹介します。そして水平方向のセンタリング。具体的な実装方法は、次のように、親要素をフレックスコンテナとして設定し、その子要素をフレックスアイテムとして設定し、中央揃えに align-items 属性と justify-content 属性を使用することです。ここの .container は親要素で、display: flex 属性を使用し、その子要素 .content を flex 項目として設定し、align-items 属性と justify-content 属性を使用して垂直方向と水平方向の中央揃えを同時に実現します。

概要:

CSS を使用すると、HTML テキストを簡単に中央に配置できます。中央に配置する必要がある要素と、適切な中央配置方法を選択する必要があります。水平方向の中央揃えには通常マージン属性が使用されますが、垂直方向の中央揃えにはフレックスボックスやテーブルセルなどの属性を使用する必要があります。

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