零基础学会HTML文本居中对齐代码-html教程-PHP中文网

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

text-align: center 只对块级容器内的行内内容有效，需写在等块级标签上；若父容器为flex则被justify-content覆盖；居中按钮需用inline-block+text-align、margin:0 auto（需设width）或flex方案。

零基础学会html文本居中对齐代码

text-align: center 写在哪才有效

它只对块级容器起作用，不是写在文字上，也不是写在 <span></span> 或 <u></u> 这类行内元素上。写错位置，代码就白写了。

正确做法：加在 <p></p>、<div>、<code><h1></h1> 这些块级标签的样式里，比如 <p style="text-align: center">文字</p>
错误写法：<span style="text-align: center">文字</span> —— <span></span> 是行内元素，加了也无效
如果父容器用了 display: flex，text-align 就被 justify-content 覆盖，此时它完全不生效

为什么文字没居中？先查这三件事

90% 的失败不是代码写错了，而是环境没配对。常见卡点就三个：

<p></p> 外面包了一层没设 text-align 的 <div>，而你只给 <code><p></p> 加了——它继承不到，得往上追一层
<p></p> 里塞了 float: left 的图片或用了 position: absolute 的元素——这些内容已脱离文本流，text-align 管不到
用 <div style="text-align: center"><div>文字</div></div>——里面那个 <div> 是块级，独占一行，<code>text-align 只影响行内内容，对它不起作用
要居中一个按钮或图标，不能只靠 text-align

text-align: center 居中的是“内容”，不是“元素自己”。想让一个 <button></button> 或 <img> 在页面里水平居中，得让它变成可被居中的对象。
- 方案一：给它加 display: inline-block，再确保父容器有 text-align: center
- 方案二：直接用 margin: 0 auto，但必须同时设 width（比如 width: 200px），否则无效
- 方案三：父容器设 display: flex + justify-content: center，最稳，不依赖宽高，也不怕嵌套干扰
垂直居中别硬套 line-height

line-height: 200px 配合固定高度容器，只适用于单行纯文本。一旦换行、加 padding、或者里面混了图标，就会错位甚至溢出。
- 多行文本垂直居中，推荐父容器用 display: flex + align-items: center
- 老项目兼容 IE9 及更早版本，可用 display: table-cell + vertical-align: middle，但需额外包裹一层
- 绝对定位 + transform: translate(-50%, -50%) 也能用，但要确保父容器有 position: relative，且容易和其它定位冲突
真正难的不是写哪一行代码，而是判断当前结构里谁是“容器”、谁是“内容”、谁已经脱离了默认流。text-align 不是万能胶，它只在块级容器+行内内容这个组合里才可靠工作。