单元格中表格的文本对齐（<td>内使用<table>）

Question

有件事我从没想过会说出口：在Firefox和Chrome中我遇到了问题，但在IE中一切正常！

很简单的问题，但我不明白为什么不起作用：

我在一个单元格里放了一个表格，并在单元格上使用了style="text-align:right"，但是在Firefox和Chrome中表格仍保持左对齐（在IE中它乖乖地移到了右边...）。如果我在单元格标签中加入align=right，那么它就能工作，但我不想这样做。

代码基本如下：

<table width="1000" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td style="text-align:right">

      <table border="1">
        <tr><td>Hello</td><td>Hello 2</td></tr>
      </table>

    </td>

    <td>Hello 2</td>
  </tr>
</table>

我不希望嵌套表格的宽度为100%或其他任何值......

有人能解释一下为什么它不起作用，如何修复，以及为什么它在IE中有效而在Firefox或Chrome中无效吗？

- user1039769

---

我认为在火狐和谷歌浏览器中都是正确的。该表格不是文本，因此text-align不应影响它。align应该适用于任何内容。 - Randy

谢谢 - 那么我该如何使用CSS来对齐单元格中的表格？这是新功能吗？我在停止几年后重新开始制作网站，以前从未遇到过这个问题？ - user1039769

文本对齐方式会影响行内和行内块级元素，而不仅仅是文本。 - maxedison

将display属性添加到嵌套表中，并将其设置为inline-block <table border="1" style="display:inline-block"> - Irishka

Answer 1

我的猜测是Chrome和FF实际上是正确地呈现了它。text-align可能不应该影响table元素。然而，将float:right应用于表格将做到你想要的效果。

- maxedison

---

非常感谢大家！正是我想要的。 - user1039769

Answer 2

我想补充一下，CSS 中让表格相对于其容器对齐的方法是使用 margin 属性。

如果要将其居中对齐，则必须添加 margin: 0 auto;；如果要将其右对齐，则必须添加 margin-left: auto;。

正如 @maxedison 所说，text-align 只适用于 inline 和 inline-block 元素，因此另一种解决方案是将内部表格更改为采用这些显示值之一。

您还需要记住，text-align 是从“容器到内容”工作的，这意味着它通常应用于容器以影响其内容（应用于 p 以影响其内联内容，例如文本），而 margin: 0 auto 则从“内容到容器”工作，这意味着它通常应用于块级元素并影响其与其容器相关的位置（应用于 div 以将其居中对齐其父元素）。

- alonso.torres

Answer 3

如果你想修复它（不具备全部功能），你可以写下这个代码：

table {
  display: inline-block;
}

这样做可以让你的表格使用text-align: center;居中，如果应用于父元素。

- Lucas

Answer 4

当您不想该 div 元素浮动时，您可以尝试以下方法： http://jsfiddle.net/NvEZ8/

<div style="text-align:right;">
   <table  style="display:inline-block">
       <tbody>
       <tr>
           <td></td>
           <td>one</td>
           <td>two</td>
       </tr>
       </tbody>
    </table>
</div>

看起来 text-align（使用 DOCTYPE html）只影响 Chrome 中的 inline-block，而不是仅限于 inline 元素。在此处将 inline-block 替换为 inline，它在我的 Chrome 上不再起作用。

- Chboing