CSS的text-align属性怎么设置文本对齐方式？
在CSS中，text-align 属性是用于设置块级元素内文本的水平对齐方式的最常用属性。它不仅可以控制文字的对齐，还能控制行内元素和行内块元素在父容器中的水平位置。
一、基本语法
其基本语法非常简单，只需要为指定的块级元素设置对应的对齐值即可：
text-align: left | right | center | justify | start | end;
二、常见属性值详解
下面我们来详细介绍 text-align 属性的各个可用值及其表现效果：
left：左对齐。文本和行内内容向左边缘对齐。这是从左到右书写模式（如中文、英文）下的默认值。
right：右对齐。文本和行内内容向右边缘对齐。
center：居中对齐。文本和行内内容在容器内水平居中。常用于标题排版。
justify：两端对齐。文本向左右两侧边缘对齐。浏览器会通过调整单词或字符之间的空白间距来使每一行（除了最后一行）的长度完全相等。这种对齐方式常见于报纸和杂志的正文排版。
start：内容对齐到行首。这是CSS3新增的属性值，对齐方向取决于文本的书写方向。如果是左到右，则等同于left；如果是右到左，则等同于right。
end：内容对齐到行尾。与start相反，如果是左到右书写模式，等同于right；如果是右到左书写模式，等同于left。
三、代码演示
为了更直观地理解不同对齐方式的效果，我们通过以下完整的HTML代码来进行演示。你可以将代码复制到编辑器中查看效果，或者访问在线演示地址：www.ipipp.com。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>text-align 对齐方式演示</title>
<style>
.container {
width: 500px;
border: 1px solid #ccc;
padding: 15px;
margin-bottom: 20px;
background-color: #f9f9f9;
}
h3 {
margin-top: 0;
color: #333;
}
/* 左对齐（默认） */
.align-left {
text-align: left;
}
/* 右对齐 */
.align-right {
text-align: right;
}
/* 居中对齐 */
.align-center {
text-align: center;
}
/* 两端对齐 */
.align-justify {
text-align: justify;
}
</style>
</head>
<body>
<div class="container align-left">
<h3>left - 左对齐</h3>
<p>这是左对齐的文本内容。在大多数情况下，这是浏览器默认的对齐方式，文本会紧贴容器的左侧边缘。</p>
</div>
<div class="container align-right">
<h3>right - 右对齐</h3>
<p>这是右对齐的文本内容。文本会紧贴容器的右侧边缘，常用于日期、署名等排版场景。</p>
</div>
<div class="container align-center">
<h3>center - 居中对齐</h3>
<p>这是居中对齐的文本内容。文本会在容器内水平居中显示，常用于文章标题、弹窗提示等。</p>
</div>
<div class="container align-justify">
<h3>justify - 两端对齐</h3>
<p>这是两端对齐的文本内容。当文本换行时，浏览器会自动调整字间距，使得除最后一行外的所有文本行的左右两端都紧贴容器的边缘。这种效果常见于报纸和杂志的正文排版，能让版面更加整齐美观。</p>
</div>
</body>
</html>四、注意事项与常见问题
作用对象：
text-align属性必须设置在块级元素（如 <div>、<p>、<h1> 等）上才会生效。它控制的是该元素内部的行内内容（文本、行内元素、行内块元素）的对齐方式，而不是块级元素本身的对齐。块级元素居中：如果你想让一个块级元素（如固定宽度的 <div>）水平居中，
text-align: center是无效的。你需要使用margin: 0 auto;或 Flexbox 布局来实现。图片居中：由于 <img> 标签默认是行内元素，因此要让图片在父容器中水平居中，只需给父容器设置
text-align: center即可。继承性：
text-align属性是可继承的。如果在父元素上设置了该属性，子元素会自动继承相同的对齐方式，除非你在子元素上重新覆盖它。
通过熟练掌握 text-align 属性，你可以轻松地控制网页内容的排版布局，让页面结构更加清晰、美观。