Detailed explanation of CSS text alignment properties: text-align and justify-content

Detailed explanation of CSS text alignment properties: text-align and justify-content

In web design, text alignment is a very important part. Good text alignment can improve the overall beauty and readability of the page. In CSS, there are two commonly used text alignment properties, namely text-align and justify-content.

1. text-align

The text-align attribute is used to set the horizontal alignment of text. It can be applied to both block-level elements and inline elements.

The values ​​that can be used are:

1. left: Left aligned, default value.
2. right: Right aligned.
3. center: Center alignment.
4. justify: Justify, the text in the row will be stretched to fill the entire width of the row.

Example:

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

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

In the above code, the text of the h1 and h2 title elements will be right-aligned, while the text in the p element will be center-aligned.

2. justify-content

justify-content attribute is used to set the alignment of multi-line text. It can only be applied to block-level elements, and is only effective for elements with multiple lines of text.

The values ​​that can be used are:

1. flex-start: Default value, starting alignment.
2. flex-end: aligned at the end.
3. center: Center alignment.
4. space-between: Align both ends, the text in the line will be evenly distributed in the line, the first line will be aligned at the top, and the last line will be aligned at the bottom.
5. space-around: Evenly aligned, the text in the line will be evenly distributed in the line, and the top and bottom space of each line will be equal.

Example:

<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>

In the above code, the container .container uses flex layout and sets the justify-content attribute to space-between, so that each .item element will be Distributed evenly within the container, the last row will have the same upper and lower space as the other rows.

In summary, the text-align attribute is used to set the horizontal alignment of a single line of text, while the justify-content attribute is used to set the alignment of multiple lines of text. They can make the text on the page more neatly arranged and improve the readability and aesthetics of the page. In actual use, you can choose the appropriate alignment as needed and adjust the style to achieve the best effect.

The above is the detailed content of Detailed explanation of CSS text alignment properties: text-align and justify-content. For more information, please follow other related articles on the PHP Chinese website!