flex布局中text-align失效，应使用justify-content控制主轴对齐：flex-start左对齐、center居中、flex-end右对齐、space-between两端撑满；表格对齐需区分整体位置（margin:0 auto或margin-left:auto）与单元格内容（text-align）；label与input垂直对齐推荐flex+align-items:center；ul横向排列时li高度不一致是因align-items:stretch默认拉伸，可设min-height或align-items:center解决。
flex容器里text-align失效，该用justify-content
直接给 display: flex 的父容器写 text-align: right，子元素不会右对齐——这个属性在 flex 布局中完全被忽略。真正起作用的是 justify-content，它控制主轴（默认水平）上项目的分布方式。
常见错误：<div style="display: flex; text-align: right">
<span>A</span><span>B</span>
</div>，文字依然左对齐。
- 左对齐：用
justify-content: flex-start（不是left） - 居中：用
justify-content: center - 右对齐：用
justify-content: flex-end - 两端撑满：用
justify-content: space-between（首尾贴边，中间等距）
table里横向排版，别碰align属性
table align="right" 是 HTML4 遗留写法，已废弃，且行为不可控。现代做法是用 CSS 控制表格整体位置或单元格内容对齐，二者必须分清。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
典型误操作：给 <table align="right"> 加样式后发现表格没动，或者在某些浏览器里错位。<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（前提是 table 没被 float 或 position: absolute 干扰）
margin-left: auto，不加 margin-right
<col> 加 text-align: right，比逐个设 <td> 更干净
<li>避免用 <code>text-align: right 直接设在 <td> 上来“推按钮”，否则同单元格里的普通文字也会右偏
<h3>label + input 横向并排时垂直对齐总歪</h3>
<p>这不是 margin 或 padding 没加够，而是 <code><label></label>（inline）和 <input>（replaced element）默认按 baseline 对齐，但它们的基线位置天然不一致。
现象：加了 padding-bottom 在 label 上，input 位置纹丝不动；DevTools 里看到 padding 区域，但视觉上还是“一高一低”。
- 最简解法：把 label 和 input 包进一个
div，设display: flex; align-items: center - 若必须用 inline-block：label 要加
display: inline-block; vertical-align: middle，input 同步加vertical-align: middle - 别依赖
line-height拉齐——不同浏览器对 input 的 line-height 解析不一致，尤其 iOS Safari - 统一设置所有表单控件的
box-sizing: border-box，否则 padding/border 会撑大尺寸，破坏横向布局宽度计算
ul横向排列后列表项高度不一致
用 display: flex 让 <li> 横向排列时，如果有的项文字多、有的少，容易出现高度参差——这不是 bug，是 flex 默认 align-items: stretch 把所有项拉到最高项的高度，而你没意识到。
更隐蔽的问题：去掉 list-style 后，li::before 伪元素若用了 display: inline-block，可能因 vertical-align 缺失导致上下偏移。
- 先重置：
ul { list-style: none; padding-left: 0; } - 控制高度一致性：给
li设min-height或height，配合align-items: center - 自定义标记统一用
li::before { vertical-align: middle; }，别混用display: inline和inline-block - 响应式切换方向时（如移动端转 vertical），别只改
flex-direction，记得同步调整align-items和justify-content的语义角色
