table整体居中必须设width才生效，直接写不会居中；需同时指定width（如width: 800px或width: 90%），否则浏览器按内容撑开、无剩余空间分配margin。

table 整体居中必须设 width 才生效

直接写 <table style="margin: 0 auto;"> 不会居中，除非你同时明确指定 <code>width（比如 width: 800px 或 width: 90%）。因为 margin: 0 auto 对块级元素生效的前提是它有确定的宽度——否则浏览器按内容自动撑开，左右 margin 都是 0。

常见错误：

• 只写 margin: 0 auto，没设 width，表格紧贴左边界
• 用废弃的 <table align="center">，W3C 验证失败，Chrome 和 Firefox 渲染不一致<li>在 <code>display: flex 容器里嵌套 <table> 后再加 <code>align="center"，完全失效

  推荐做法：

  • <div style="display: flex; justify-content: center;"><table>...</table></div> —— 无需 width，IE11+ 兼容
  • <div style="text-align: center;"><table style="display: inline-table;">...</table></div> —— 适合窄屏，但需注意 inline-table 的换行行为

  td/th 内容对齐只认 text-align，不是 align 属性

  align="right" 写在 <td> 或 <code><th> 标签上，虽然部分浏览器还能显示右对齐，但它已是 HTML5 废弃属性。真正起效且可维护的是 CSS 的 <code>text-align。

  为什么不能混用：

  • align="center" 和 style="text-align: right" 同时存在时，Firefox 可能忽略后者，Chrome 可能覆盖前者，调试时难以复现
  • align 属性不支持响应式控制（比如“小屏左对齐、大屏右对齐”）
  • colgroup 中的 <col> 只支持有限样式，align 在这里根本无效

  实用写法：

  • 整表统一： td, th { text-align: left; }
  • 按列设置： td:nth-child(3), th:nth-child(3) { text-align: right; }（适合金额列）
  • 按语义加类：<td class="price">¥299.00</td> + .price { text-align: right; font-family: monospace; }

  vertical-align 不作用于 table，只对 td/th 内部内容有效

  vertical-align: middle 加在 <table> 标签上毫无效果。它只影响 <code><td> 或 <code><th> 内部内容的垂直对齐，而且前提是单元格本身有高度支撑（比如设置了 <code>height、line-height，或内容足够多）。

  典型误区：

  

  Wechat HTML Publisher

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

  下载
  • 写 <table valign="middle"> —— <code>valign 是废弃属性，且 table 标签根本不认这个属性
  • 写 valign="center" —— 值必须是 top、middle、bottom 或 baseline，center 会被忽略
  • 给 td 设了 vertical-align: middle，但单元格高度由内容撑开、无固定高，结果还是顶部对齐

  可靠做法：

  • 确保 td 有明确高度： td { height: 40px; line-height: 40px; vertical-align: middle; }
  • 或用 flex 模拟： td { display: flex; align-items: center; }（更可控，但 IE10- 不支持）
  • 避免依赖 valign 属性，全量迁移到 CSS

  form 表单项对齐本质是基线问题，不是 margin 调整

  <label></label> 和 <input type="text"> 看起来不对齐，不是因为它们“位置错了”，而是默认 vertical-align: baseline 下，文字基线和输入框基线不重合。强行加 margin-top 或 padding 只会让响应式和跨浏览器更糟。

  关键动作：

  • 给所有表单控件统一设 vertical-align: middle：包括 input、select、textarea、button
  • 包裹每组 label + input 用 display: flex：父容器设 align-items: center，比全局调 line-height 更稳定
  • iOS Safari 上 label 点击区域可能偏小，建议加 display: block 或显式设 min-height

  特别注意：button 和 input[type="search"] 并排时底部不齐，往往是因为 button 默认有 border 和额外 line-height，应重置： button { border: none; line-height: normal; }

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！