HTML/CSS中如何使用text-align实现文本居中与对齐
在网页排版中，文本的对齐方式是基础且常用的样式设置，text-align 是CSS中专门用于设置文本水平对齐方式的属性，合理使用它可以快速实现文本的左对齐、右对齐、居中对齐等效果，适配不同的页面布局需求。
text-align属性基础说明
text-align 属性作用于块级元素，用来控制其内部行内内容（包括文本、行内元素、行内块元素等）的水平对齐方式，它的常用取值如下：
- left：默认值，文本左对齐
- right：文本右对齐
- center：文本居中对齐
- justify：文本两端对齐，最后一行不参与两端对齐
需要注意的是，text-align 只对块级元素内部的行内内容生效，如果要对齐的元素本身是行内元素，需要先将其转为块级元素或者给它的父块级元素设置该属性。
不同对齐效果的实现示例
下面通过具体的代码示例来展示不同对齐效果的实现方式，所有示例都包含完整的HTML和CSS代码。
1. 文本居中对齐
居中对齐是最常用的场景之一，比如页面标题、提示信息等居中显示，只需要给目标块级元素设置 text-align: center 即可：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-align居中对齐示例</title>
<style>
/* 给容器块级元素设置居中对齐 */
.center-text {
text-align: center;
width: 500px;
margin: 20px auto;
padding: 15px;
border: 1px solid #e0e0e0;
}
</style>
</head>
<body>
<div class="center-text">
<h3>这是居中显示的标题</h3>
<p>这是居中显示的段落文本，当文本长度超过容器宽度时会自动换行，换行后的每行内容依然保持居中对齐的效果。</p>
</div>
</body>
</html>上述代码中，center-text 类的 div 是块级容器，设置 text-align: center 后，内部的 <h3> 标题和 <p> 段落都会水平居中对齐，即使段落文本换行，每一行的内容也会保持居中。
2. 文本左对齐和右对齐
左对齐是默认效果，不需要额外设置，但如果需要显式声明或者重置对齐方式，可以设置 text-align: left；右对齐则用于比如署名、日期等需要靠右显示的内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-align左右对齐示例</title>
<style>
.left-text {
text-align: left;
width: 500px;
margin: 20px auto;
padding: 15px;
border: 1px solid #e0e0e0;
}
.right-text {
text-align: right;
width: 500px;
margin: 20px auto;
padding: 15px;
border: 1px solid #e0e0e0;
}
</style>
</head>
<body>
<div class="left-text">
<p>这是左对齐的文本内容，也是大多数网页文本的默认对齐方式，阅读起来符合从左到右的阅读习惯。</p>
</div>
<div class="right-text">
<p>这是右对齐的文本内容，适合放置文章发布时间、作者署名等内容。</p>
<p>2024年5月20日</p>
</div>
</body>
</html>3. 文本两端对齐
两端对齐可以让段落的左右边缘都对齐，视觉上更规整，通常用于大段正文排版，设置 text-align: justify 即可实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-align两端对齐示例</title>
<style>
.justify-text {
text-align: justify;
width: 500px;
margin: 20px auto;
padding: 15px;
border: 1px solid #e0e0e0;
line-height: 1.8;
}
</style>
</head>
<body>
<div class="justify-text">
<p>这是两端对齐的段落文本，设置text-align为justify后，除了最后一行之外，每一行的左右两端都会对齐容器的边缘，文本之间的间距会自动调整，让排版看起来更加整齐统一，适合长文阅读场景。</p>
</div>
</body>
</html>需要注意，两端对齐只对多行文本的非最后一行生效，如果容器内只有一行文本，两端对齐的效果和左对齐是一致的。
常见使用注意事项
text-align是继承属性，给父块级元素设置后，内部的子块级元素如果没有单独设置，也会继承该对齐方式，如果需要重置子元素的对齐方式，单独给子元素设置对应的text-align值即可。- 该属性无法控制垂直方向的对齐，如果需要垂直居中，需要搭配
line-height（单行文本）或者 flex 布局等方案实现。 - 对于行内块元素（比如 <img>、<button> 等），也可以被父元素的
text-align控制水平对齐，比如给图片的父容器设置text-align: center，图片就会水平居中。
合理使用 text-align 属性可以快速完成大部分文本水平对齐的需求，是CSS排版中非常基础也非常重要的属性，掌握它的用法能让页面文本的排版更加灵活可控。
text-align文本居中水平对齐CSS排版块级元素 本作品最后修改时间：2026-05-22 13:58:29