HTML5已废弃align和valign，现代对齐应使用CSS布局模型：text-align控制块内行内内容水平对齐，vertical-align仅适用于inline/inline-block/table-cell元素，块级元素居中需用margin:0 auto（定宽）或flex/grid布局。
HTML5 中没有合法的、推荐使用的对齐属性——align 和 valign 已被正式废弃，任何依赖它们实现对齐的写法都属于过时实践，现代浏览器虽可能兼容，但行为不可靠、不具可维护性。
text-align 只管块内行内内容的水平对齐
这是最常被误用也最容易“看起来有效”的属性。它只作用于块级容器（如 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>、<div>、<code><th>）内部的行内内容：文字、<code><img alt="HTML元素对齐属性的用法详解" >、<span></span> 等。
-
text-align: center让文字在容器内居中，但不会让<div> 自身居中——那是父容器的事 <li>对 <code>display: flex或display: grid子项无效，它们走各自的对齐体系 - 在表格单元格里仍可用：
td { text-align: right; }控制单元格内文本右对齐 - 值
start/end比left/right更适合多语言场景，会随dir属性自动切换 - 在
<td> 里设 <code>vertical-align: middle，但没效果？检查该单元格是否真有高度——若只有一行文本且没设height或足够padding，视觉上就看不出“居中” - 别往
<tr> 上写 <code>vertical-align，它不参与内容对齐计算；统一控制请用td, th { vertical-align: middle; }想让块级元素自身居中？别碰 align，用 CSS 布局模型
所谓“让一个
<div> 居中”，本质是控制它在父容器中的定位。HTML 层面没有任何属性能做到这点。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>定宽块水平居中：<code>margin: 0 auto，但必须配合显式width，且不能有float或position: absolute - 通用居中（含垂直）：
display: flex+justify-content: center+align-items: center，父容器需有明确尺寸约束或内容撑高 - 表格居中不是
<table align="center">，而是给 <code><table> 加 <code>margin: 0 auto，再配display: block（否则默认为 inline-table，margin不生效）Grid 和 Flex 的对齐参数容易混淆
这两个模型都有
justify-和align-开头的属性，但作用轴不同，且仅在对应 display 模式下有效。-
justify-content总是控制主轴（flex-direction或grid-auto-flow决定方向），align-items控制交叉轴 -
place-items: center是简写，等价于justify-items: center; align-items: center，但它只影响网格项在各自单元格内的对齐，不是让整个<div> 在页面中居中 <li>Flex 下 <code>align-self可覆盖单个子项的垂直对齐，但前提是父容器已设align-items；Grid 下对应的是justify-self/align-self
真正容易被忽略的点是：对齐效果是否可见，往往取决于容器是否有明确的尺寸约束或内容是否撑开空间。比如
align-items: center在高度由内容决定的 flex 容器里，常常“没反应”——不是代码错了，是容器根本没留给它发挥的垂直空间。 -
vertical-align 不是给块元素用的
这个属性根本不会在 <div>、<code><p></p>、<table> 上生效，只对三类元素起作用：<code>display: inline、inline-block、table-cell（即 <td> / <code><th>）。
<ul>
<li>图片底部有空白？大概率是 <code><img alt="HTML元素对齐属性的用法详解" > 默认 vertical-align: baseline 导致的，加 vertical-align: bottom 或 display: block 就能解决
