在html5页面开发过程中，文本和元素的格式对齐是排版环节的核心需求，不同的对齐场景需要匹配对应的实现方案，既可以通过原生HTML属性快速设置，也可以借助CSS样式实现更灵活的控制。
原生HTML标签的align属性对齐方式
html5中部分块级标签支持原生的align属性，可直接设置内容的对齐方向，不过该属性在html5规范中已被标记为不推荐，仅适合快速简单的对齐场景。
支持align属性的常见标签包括<p>、<div>、<h1>到<h6>的标题标签、<table>等，属性值可选left（左对齐）、center（居中对齐）、right（右对齐）、justify（两端对齐）。
<!-- 段落左对齐 --> <p align="left">这是左对齐的段落文本，内容会靠页面左侧排列</p> <!-- 标题居中对齐 --> <h2 align="center">这是居中对齐的二级标题</h2> <!-- 段落右对齐 --> <p align="right">这是右对齐的段落文本，内容会靠页面右侧排列</p> <!-- 段落两端对齐 --> <p align="justify">这是两端对齐的段落文本，文本会同时靠左右两侧排列，中间间距自动调整，适合长文本排版场景</p>
CSS text-align属性对齐方式
使用CSS的text-align属性是html5中推荐的文本对齐方案，可作用于所有块级元素，控制其内部行内内容的水平对齐方向，优先级高于原生align属性。
text-align的常用属性值和align属性一致，同时新增了start、end等适配不同文本方向的属性值，默认值为left（从左到右文本方向下）。
基础水平对齐示例
/* 定义不同对齐类的样式 */
.left-align {
text-align: left;
}
.center-align {
text-align: center;
}
.right-align {
text-align: right;
}
.justify-align {
text-align: justify;
}
<div class="left-align">左对齐的div内容</div> <div class="center-align">居中对齐的div内容</div> <div class="right-align">右对齐的div内容</div> <div class="justify-align">两端对齐的div内容，当文本行数较多时，会自动调整字间距让内容同时靠左右两侧排列</div>
行内元素的对齐控制
text-align属性对行内元素本身无效，但可以控制父级块级元素内行内元素的对齐方向，比如控制<span>、<a>、<img>等行内内容的排列。
<div style="text-align: center;">
<span>居中的span文本</span>
<a href="https://ipipp.com">居中的链接</a>
<img src="https://picsum.photos/200/100?random=2" alt="居中的图片" />
</div>
垂直对齐技巧
水平对齐之外，垂直对齐也是常见需求，html5中可通过vertical-align属性实现行内元素或表格单元格的垂直对齐，该属性仅对行内元素、行内块元素和表格单元格生效。
常用属性值包括top（顶部对齐）、middle（垂直居中对齐）、bottom（底部对齐）、baseline（基线对齐，默认值）。
<div style="height: 100px; border: 1px solid #ccc;">
<span style="vertical-align: top;">顶部对齐的文本</span>
<span style="vertical-align: middle;">垂直居中的文本</span>
<span style="vertical-align: bottom;">底部对齐的文本</span>
</div>
<table border="1" style="width: 300px; height: 150px;">
<tr>
<td style="vertical-align: top;">单元格顶部对齐</td>
<td style="vertical-align: middle;">单元格垂直居中</td>
<td style="vertical-align: bottom;">单元格底部对齐</td>
</tr>
</table>
多行文本垂直居中技巧
如果是块级元素内的多行文本需要垂直居中，可结合display: flex布局实现，这是html5中更现代的对齐方案，兼容性也较好。
.multi-line-center {
display: flex;
flex-direction: column;
justify-content: center; /* 垂直方向居中 */
align-items: center; /* 水平方向居中 */
height: 200px;
border: 1px solid #eee;
}
<div class="multi-line-center">
<p>第一行多行文本</p>
<p>第二行多行文本</p>
<p>第三行多行文本</p>
</div>
对齐方式注意事项
- 原生
align属性不符合html5语义化规范，正式项目推荐使用CSS的text-align属性实现对齐 text-align仅控制水平方向对齐，垂直方向对齐需要搭配vertical-align或flex布局实现- 两端对齐
justify在文本最后一行不会生效，若需要最后一行也两端对齐，可搭配text-align-last: justify属性使用 - 行内块元素设置
vertical-align时，默认基线对齐可能会导致元素底部出现间隙，可设置vertical-align: top或display: block消除间隙
html5文本对齐CSS_text_align排版技巧HTML标签属性修改时间：2026-07-05 06:18:28