CSS 如何设置两端对齐

在网页设计中，文本的排版效果至关重要，两端对齐是一种常见且美观的排版方式。那么，CSS 如何设置两端对齐呢？下面就为大家详细介绍。

对于行内元素的文本两端对齐，可以使用 text-align: justify; 属性。例如，在一段普通的段落文本中，给段落元素（<p>）添加样式：

p {
    text-align: justify;
}

这样，段落中的文本就会在一行内尽量均匀分布，两端对齐。不过，单纯使用 text-align: justify; 时，如果一行文本内容较短，可能无法完美呈现两端对齐效果，此时可以配合 text-align-last: justify; 属性来确保最后一行也能实现两端对齐：

p {
    text-align: justify;
    text-align-last: justify;
}

对于块级元素的两端对齐，display: flex 和 display: grid 是非常强大的工具。

当使用 display: flex 时，可以利用 justify-content: space-between; 实现元素在主轴方向上两端对齐。比如有几个列表项（<li>），将它们的父元素（<ul>）设置为 display: flex，然后添加 justify-content: space-between; 样式：

ul {
    display: flex;
    justify-content: space-between;
}

这样，列表项就会在父元素宽度范围内，均匀分布在两端。

display: grid 同样能实现类似效果。例如，创建一个简单的网格布局，让子元素在网格容器内两端对齐：

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    justify-items: space-between;
}

这里 grid-template-columns 定义了网格列布局，justify-items 使子元素在主轴方向上两端对齐。

在表格布局中，也可以实现两端对齐。通过设置表格单元格的样式，让单元格内的内容两端对齐：

td {
    text-align: justify;
}

掌握 CSS 中设置两端对齐的方法，能让网页的文本和元素布局更加整齐、美观，提升用户体验。无论是文本内容排版，还是元素分布，这些技巧都能在网页设计中发挥重要作用，帮助开发者打造出专业且吸引人的页面。