Wechat HTML Publisher

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

下载

html标签对齐应使用css而非align/valign属性：text-align控制行内内容对齐，块级元素居中需width+margin:0 auto，flex布局优先用于表单和响应式对齐，vertical-align仅适用于单元格或行内元素基线调整。

直接说结论：HTML 标签对齐不是靠 align 或 valign 属性“设置”出来的，而是靠 CSS 的 text-align、margin、display: flex 等组合控制；用 HTML 属性强行对齐，要么失效，要么行为不可控，调试时会浪费大量时间。

text-align 只作用于块级容器内的行内内容

很多人写 <p align="right">文字</p> 能临时生效，是因为浏览器还在兼容旧语法，但实际起效的是隐式 fallback 到 text-align: right。真正可靠的写法是：

• 给父元素（如 <div>、<code><p></p>、<th>）加 <code>text-align: right，它只影响内部文字、<img>、<span></span> 这类行内内容
• text-align 对 <div> 子元素（默认块级）无效——除非子元素设了 <code>display: inline-block 或 display: inline
• 表格单元格里右对齐金额，别在每个 <td> 上写 <code>align="right"，统一写 td:nth-child(3) { text-align: right; }

  让块级元素（如 table、div）水平居中必须设 width

  margin: 0 auto 不是万能的，它只对“有明确宽度”的块级元素生效。常见错误包括：

  • <table style="margin: 0 auto;"> —— 没设 <code>width，浏览器按内容撑开，auto 失效
  • 父容器用了 display: flex，再给子 <table> 加 <code>margin: 0 auto，会被 flex 主轴对齐覆盖
  • 响应式场景下，width: 90% + margin: 0 auto 是安全选择；固定像素宽（如 width: 600px）需配合媒体查询降级

  表单 label 和 input 对齐的关键是每组独立 flex 容器

  不要试图全局统一对齐所有 <label></label>，它们默认是 inline 元素，宽度随文本变，硬设 width + float 易塌陷。正确路径是：

  • 把每对 <label></label> + <input> 包进一个 <div class="form-row"> <li><code>.form-row { display: flex; align-items: center; gap: 0.5em; }
  • .form-row label { flex: 0 0 120px; }（固定标签宽度，防换行挤压）
  • .form-row input { flex: 1; min-width: 0; }（输入框自适应，小屏不溢出）

  vertical-align 不是给父容器用的，只管单元格/行内元素内部基线

  vertical-align: middle 常被误加在 <table> 或 <code><tr> 上，其实它只对以下情况有效： <ul><li><code><td>、<code><th>、<code><tr> 标签本身（控制单元格内容垂直位置） <li> <code><img>、<span></span>、<input> 这类行内或 inline-block 元素（调整其相对于行框的基线）

  • 必须有高度支撑：如果 <td> 内容只有一行文字且没设 <code>height 或 line-height，vertical-align: middle 看不出效果
  • 值只有 top、middle、bottom、baseline 四种，center 是错的，写了也不生效

  最常被忽略的一点：对齐不是孤立属性，它依赖上下文——父容器的 display 类型、子元素的盒模型类型、是否设置了 line-height 或 height，都会改变最终表现。动手前先看 computed styles，比猜更省时间。