HTML中按钮与输入框对不齐的根本原因是vertical-align仅对inline/inline-block元素生效且依赖基线对齐，需统一display、font-family、line-height并设固定高度或改用flex布局。
HTML标签对齐错误不是样式没加够，而是对齐机制被误用或层级错配。 直接调 margin 或 text-align 往往无效，因为不同元素的对齐逻辑根本不在同一层。
为什么 text-align 对 input 和 button 没反应
text-align 只作用于块级容器内的行内内容，而 input 和 button 默认是 inline 元素，但它们本身不是“文字”，而是替换元素（replaced element）。给父 div 加 text-align: right，只会影响它内部的纯文本或 span，不会推动 input 的位置。
- 若想让
input整体右移，得控制它自身在父容器中的定位：用margin-left: auto（需父容器是 flex 或有明确 width） - 若父容器是
display: flex，text-align完全失效，必须用justify-content - 常见误写：
<input style="text-align: right">——这是控制输入框内文字右对齐，不是把框本身右移
vertical-align: middle 失效的三个硬性前提
vertical-align 不是万能垂直居中工具，它只对 inline 或 inline-block 元素生效，且依赖基线（baseline）参考系。单独加这句常白忙活。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 父容器必须有明确的行高（
line-height）或高度（height），否则 middle 无参照 -
input、button、label必须统一设为display: inline-block，不能混用 inline 和 block - 字体不一致会拉偏 baseline：比如
label用了"Microsoft YaHei"，input没强制继承，就会差 1–2px
表格里 td 内容对不齐，别碰 align 属性
align="center" 这类 HTML4 属性已被废弃，W3C 验证器报错，且在 Chrome/Firefox 中行为不一致。更麻烦的是，它和 CSS 的 text-align 优先级冲突，调试时难以复现。
- 单元格内文字水平对齐，只用
text-align，写在td或th上 - 整列对齐，优先用
<col>标签：<col style="text-align: right;"> - 垂直对齐必须配高度：
td { vertical-align: middle; height: 40px; }，否则 middle 看不出效果
flex 布局下对齐失效，是因为搞混了轴向
一旦父容器设了 display: flex，text-align 就彻底失效。此时主轴（默认水平）对齐靠 justify-content，交叉轴（默认垂直）靠 align-items。
- 想让子项左对齐：用
justify-content: flex-start，不是text-align: left - 子项内部文字仍需单独设
text-align，因为子项可能是div，它内部的文字对齐不受 flex 容器控制 - 常见坑：
<div style="display: flex; text-align: right"><span>文字</span></div>——文字不会右对，因为text-align在 flex 容器上无效
真正卡住人的地方，从来不是“该用哪个属性”，而是没意识到：同一个视觉问题，在不同 display 类型、不同父级上下文、不同元素类型下，对齐的控制权根本不在一个地方。改之前，先用 DevTools 看清目标元素的 computed display 和 vertical-align 是否生效，比盲目加样式快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
