如何让一系列href居中且支持自动换行？解决footer布局适配问题

哈哈，这个问题我踩过坑！你用双层table做footer的思路本身没问题，但table的“顽固”特性就是会尽力撑开宽度容纳内容，不会主动换行——这就是为什么手机竖屏时链接挤在一起没法折行的原因。

其实不用纠结table嵌套，换用更灵活的CSS布局就能轻松搞定，既保持链接居中，又能让它们在空间不够时自动换行。给你几个实用方案：

方案1：最简洁的Inline-Block布局（兼容大部分浏览器） #

直接用div替代内层table，利用inline-block的自适应特性来实现：

<footer style="width: 100%; text-align: center; padding: 10px 0; background: #f5f5f5;">
  <div style="display: inline-block; text-align: center;">
    <a href="/home" style="margin: 0 10px;">首页</a>
    <a href="/about" style="margin: 0 10px;">关于我们</a>
    <a href="/contact" style="margin: 0 10px;">联系我们</a>
    <a href="/privacy" style="margin: 0 10px;">隐私政策</a>
  </div>
</footer>

• 外层footer设100%宽，text-align: center让内部的div居中
• 内层div用display: inline-block，它的宽度会自动适配链接总宽度，不会撑满父容器
• 链接是inline元素，空间不足时会自动换行，而且因为div的text-align: center，换行后的每一行都会保持居中

方案2：现代首选的Flexbox布局（响应式更友好） #

如果不需要兼容太老的浏览器（比如IE10及以下），Flexbox是最佳选择，代码更简洁，控制更灵活：

<footer style="width: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; padding: 10px 0; background: #f5f5f5;">
  <a href="/home">首页</a>
  <a href="/about">关于我们</a>
  <a href="/contact">联系我们</a>
  <a href="/privacy">隐私政策</a>
</footer>

• display: flex把footer变成弹性容器
• justify-content: center让链接水平居中
• flex-wrap: wrap允许链接在空间不足时自动换行
• gap: 20px直接控制链接之间的间距，不用再给每个a加margin，更省心

方案3：非要保留table？改这两处就行 #

如果因为某些原因必须用table布局，那只要修改内层table的显示方式和单元格的换行规则：

<table style="width: 100%; border-collapse: collapse; background: #f5f5f5;">
  <tr>
    <td style="text-align: center; padding: 10px 0;">
      <table style="display: inline-table; border-collapse: collapse;">
        <tr>
          <td style="white-space: normal; padding: 0 10px;"><a href="/home">首页</a></td>
          <td style="white-space: normal; padding: 0 10px;"><a href="/about">关于我们</a></td>
          <td style="white-space: normal; padding: 0 10px;"><a href="/contact">联系我们</a></td>
          <td style="white-space: normal; padding: 0 10px;"><a href="/privacy">隐私政策</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

• 给内层table加display: inline-table，让它自适应内容宽度，不要撑满父容器
• 给每个单元格加white-space: normal，允许内容换行（table单元格默认是nowrap，会强制不换行）

总结 #

优先选Flexbox或者Inline-Block方案，不仅解决了换行问题，代码更简洁，后续维护也更方便。原来的双层table布局之所以不行，就是因为table默认会“硬撑”宽度，不会主动折行——换成更灵活的布局方式，问题就迎刃而解啦！

内容的提问来源于stack exchange，提问作者Paul Taylor