Wechat HTML Publisher

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

下载

应弃用align和valign属性，改用css：表格居中用margin: 0 auto（需非inline-block/float），单元格内文本对齐用text-align，垂直居中优先用display: flex + align-items: center，兼容ie11时回退至display: table-cell + vertical-align。

table元素的align="center"怎么替代

直接失效，浏览器不再解析。align="center"写在<table>上等于没写，W3C验证器会报错“Attribute align is obsolete”。 <p>正确做法是给<code><table>加<code>margin: 0 auto，前提是它没被设成display: inline-block或float——否则margin: 0 auto不生效。

• 如果<table>外层有<code>div且该div用了text-align: center，表格会居中，但这是靠父容器“撑”出来的，不是表格自身居中
• 响应式场景下，margin: 0 auto在max-width受限时依然有效；但若表格宽度超过容器，就会溢出，此时得配合overflow-x: auto
• 别用text-align: center直接作用于<table>——它对<code><table>无效 <h3>td/th里的align="right"必须换vertical-align吗</h3> <p>不是。水平对齐不用<code>vertical-align，要用text-align。

  align="right"写在<td>里，对应的是文字右对齐，等效 CSS 是<code>text-align: right。而vertical-align只管上下，和左右无关。

  • text-align: right对<td>、<code><th>、<code><p></p>、<div>都有效，但对<code><table>或<code><tr>无效 <li>如果单元格里塞了<code><button></button>或<img>，text-align仍能控制它们的水平位置（前提是它们没设display: block）
  • 多行文本+图标混排时，text-align只影响块级子元素的**水平起始位置**，不控制垂直线

  valign="middle"为什么写了没效果

  因为valign已彻底废弃，而且vertical-align: middle本身就有生效前提：它只对display: table-cell（默认<td>）、<code>inline、inline-block元素起作用，且依赖“行框”高度。

  • 如果<td>没设固定<code>height或min-height，又没内容撑高，vertical-align: middle就找不到参考基准，看起来像没动
  • 给<td>加<code>display: flex; align-items: center更可靠，但要注意：flex会忽略vertical-align，两者不能共存
  • 若单元格内有<div>且设了<code>display: block，vertical-align对它完全无效——那是父容器布局的事
  • 调试时打开开发者工具，看 computed styles 里vertical-align是否被覆盖成baseline，常见于重置 CSS 或继承了line-height

  旧项目批量替换align和valign的坑

  删掉所有align和valign只是第一步。真正容易漏的是：valign="bottom"不能简单替换成vertical-align: bottom，尤其当单元格高度由内容撑开时，bottom会贴底，但视觉上可能离边太近——因为padding没同步调整。

  • 必须同步检查cellpadding是否还在用，它已被废弃，要统一换成td, th { padding: Xpx }
  • border-collapse: collapse开启后，padding是唯一控制内容离边距离的方式，border-spacing失效，别忘了删掉cellspacing
  • 有些老模板把align写在<img>上（如<img align="left">），这得改用float: left或display: block; margin-right: Xpx，不然图文会错位
  • IE11 及以下不支持display: flex在<td>上，若需兼容，得回退到<code>display: table-cell; vertical-align: middle，但此时子元素不能再设flex 实际改起来最麻烦的不是语法替换，而是每个<td>的<code>padding、height、line-height、display类型全得重新校验——同一套 CSS 在不同内容密度的单元格里，表现可能完全不同。