text-align控制块容器内行内内容水平对齐，vertical-align仅对inline、inline-block或table-cell元素生效；两者作用对象与条件截然不同，不可混用。
text-align 控制内部行内内容水平对齐，vertical-align 控制行内/表格单元格内垂直对齐，两者作用对象和生效条件完全不同，不能混用。
text-align 只对块容器内的行内内容起效
它必须写在父元素上（如 <div>、<code><td>、<code><p></p>），且只影响其直接子级中的行内内容（文本、<span></span>、<img> 默认为行内）。
-
text-align: center让文字或图片“看起来”居中，但不会移动<div> 这类块级子元素本身 <li>如果单元格里有 <code><div style="display: block;">，仅设 <code>text-align: center无效——得给这个<div> 自己加 <code>margin: 0 auto或display: flex; justify-content: center - 整表统一设置：写
td, th { text-align: right; }；按列控制：用td:nth-child(3) { text-align: right; } -
display: inline或inline-block元素（如<img>、<span></span>） -
display: table-cell元素（即<td>、<code><th>） <li>表格相关 display 值（<code>table-row等不支持） - 值必须是
top、middle、bottom、baseline—— 写center会彻底失效 <div style="text-align: center;"><table style="display: inline-table;"></table></div>-
<div style="display: flex; justify-content: center;"><table></table></div>（推荐，无需固定宽） - 最稳解法：把每组
<label>+<input></label>包进一个<div class="form-row">，然后设 <code>.form-row { display: flex; align-items: center; } - 全局补救：给所有表单控件加
vertical-align: middle，并确保父容器没干扰性的line-height - 别用
float布局表单——脱离文档流后对齐更难控，响应式也崩
vertical-align 不是给父容器用的，只作用于特定 display 类型
vertical-align 对 <div>、<code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 等默认 display: block 的元素完全无效。它只对以下三类有效：
表格整体居中不是靠 align 属性
别写 <table align="center">，HTML5 已废弃，W3C 验证器报错，Chrome/Firefox 行为不一致，flex 容器里直接失效。
<ul><li>可靠做法只有三种：<code><table style="margin: 0 auto; width: 80%;">（必须设 <code>width）
表单 label 和 input 对不齐？问题不在 margin
默认错位是因为 <label></label> 和 <input> 基线不同，vertical-align: baseline 是罪魁祸首。
真正容易被忽略的是：对齐效果是否生效，取决于你写的样式作用在哪个元素上、该元素的 display 是什么、以及它的子元素类型。写错一层，就全白搭。
