CSS テキスト配置プロパティの詳細な説明: text-align および justify-content

CSS テキスト配置プロパティの詳細な説明: text-align と justify-content

Web デザインでは、テキストの配置は非常に重要な部分です。テキストの配置を適切に行うと、ページ全体の美しさと読みやすさが向上します。 CSS には、text-align と justify-content という 2 つの一般的に使用されるテキスト配置プロパティがあります。

1. text-align

text-align 属性は、テキストの水平方向の配置を設定するために使用されます。ブロックレベル要素とインライン要素の両方に適用できます。

使用できる値は次のとおりです:

1. left: 左揃え、デフォルト値。
2. right: 右揃え。
3. center: 中央揃え。
4. justify: 行内のテキストが行の幅全体に広がるように調整します。

例:

<style>
    p {
        text-align: center;
    }
    h1, h2 {
        text-align: right;
    }
</style>

<h1 id="这是一个标题">这是一个标题</h1>
<h2 id="这是一个副标题">这是一个副标题</h2>
<p>这是一段居中对齐的文本。</p>

上記のコードでは、h1 および h2 title 要素のテキストは右揃えになり、p 要素のテキストは中央揃えになります。 。

2. justify-content

justify-content 属性は、複数行のテキストの配置を設定するために使用されます。これはブロックレベルの要素にのみ適用でき、複数行のテキストを含む要素にのみ有効です。

使用できる値は次のとおりです:

1. flex-start: デフォルト値、位置合わせの開始。
2. flex-end: 最後に揃えられます。
3. center: 中央揃え。
4. space-between: 両端を揃えると、行内のテキストが行内に均等に配置され、最初の行が上に揃えられ、最後の行が下に揃えられます。
5. space-around: 均等配置: 行内のテキストが行内に均等に配置され、各行の上下のスペースが等しくなります。

例:

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .item {
        width: 100px;
    }
</style>

<div class="container">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
    <div class="item">项目 3</div>
    <div class="item">项目 4</div>
    <div class="item">项目 5</div>
    <div class="item">项目 6</div>
</div>

上記のコードでは、コンテナ .container はフレックス レイアウトを使用し、justify-content 属性を space-between に設定するため、各 .item 要素は次のようになります。コンテナ内に均等に配置され、最後の行の上下のスペースは他の行と同じになります。

要約すると、text-align 属性は 1 行のテキストの水平方向の配置を設定するために使用され、justify-content 属性は複数行のテキストの配置を設定するために使用されます。ページ上のテキストをよりきちんと配置し、ページの読みやすさと美しさを向上させることができます。実際の使用では、必要に応じて適切な配置を選択し、最高の効果が得られるようにスタイルを調整できます。

以上がCSS テキスト配置プロパティの詳細な説明: text-align および justify-contentの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。