如何使用HTML标签完成页面内容对齐设置-html教程-PHP中文网

html5中align属性已废弃，必须用css实现对齐：text-align控制块内行内内容水平对齐；margin:0 auto使定宽块级元素自身水平居中；flexbox支持水平垂直居中；vertical-align和writing-mode适用于特殊场景。

如何使用html标签完成页面内容对齐设置

align 属性在 HTML5 中已废弃，**不能用它实现可靠对齐**。所有现代项目必须改用 CSS，否则会出现兼容性断裂、无障碍失效、W3C 验证失败等问题。

text-align 控制文本和行内元素水平对齐

这是最常用也最容易误用的对齐方式。它只作用于块级容器（如 <p></p>、<div>、<code><th>）内部的行内内容，不移动块本身。 <ul> <li>给父容器加 <code>text-align: center，能让里面的文字、<span></span>、<img>（默认行内）水平居中

常见错误：给要居中的 <div> 自己加 <code>text-align: center —— 这只会让它内部的文字居中，盒子位置不变

表格单元格统一居中：td, th { text-align: center; }；整列控制可用 <col> + 类选择器

注意父容器宽度：如果父 <div> 没撑开（比如浮动塌陷或未设宽），<code>text-align 看不出效果

margin: 0 auto 实现块级元素自身水平居中

这是让一个 <div>、<code><section></section> 或 <table> 在页面里水平居中的经典方法，但有硬性前提。 <ul> <li>必须显式设置宽度：<code>width: 600px、width: 80% 或 max-width: 768px

写法是 margin: 0 auto（上下边距为 0，左右自动），不是 margin: auto

不能和 float、position: absolute 共存；若父容器用了 float，需先清除浮动或触发 BFC

表格居中也适用：

<table style="width: 100%; max-width: 800px; margin: 0 auto;">
<h3>flexbox 实现真正可控的水平+垂直居中</h3>
<p>当需要同时控制水平和垂直方向，或者子元素尺寸不确定时，<code>display: flex

是目前最稳妥的方案。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

父容器设 display: flex; justify-content: center; align-items: center;
父容器必须有高度才能让 align-items: center 生效，例如 min-height: 100vh 或固定 height: 400px
子元素无需定宽高，无论它是 <div> 还是 <code><span></span> 都能居中
IE10/11 存在部分 bug（如 flex: 1 行为异常），如需支持，建议加 align-items: flex-start 显式重置交叉轴
避免用 flex 父容器包裹 <table> —— 会破坏 <code>colspan/rowspan 渲染，打印和屏幕阅读器可能出错
vertical-align 和 writing-mode 处理特殊对齐场景

vertical-align 不是给父容器用的，writing-mode 也不只是“竖排文字”玩具。
- vertical-align: middle 只对 display: inline、inline-block、table-cell 元素生效，常用于图文混排：img { vertical-align: middle; }
- 表格单元格内垂直居中必须写在 <td> 或 <code><th> 上，不能写在 <code><tr> 或 <code><table> <li> <code>writing-mode: vertical-lr 改变文本流后，text-align: center 就变成控制“垂直方向”的居中，适合东亚竖排设计
- 不要把 writing-mode 当成通用垂直居中方案——它改变的是整个块的布局流向，副作用明显