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？

Answer 1

我的猜测是Chrome和FF实际上是正确渲染它的人。 text-align可能不应该影响table元素。但是，将float:right应用于表格可以达到您想要的效果。

Answer 2

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

如果您想将其与中心对齐，则必须添加margin: 0 auto;;如果您想将其与右侧对齐，则必须添加margin-left: auto;。

正如@maxedison所说，text-align仅适用于inline和inline-block元素，因此另一个解决方案是更改内部表格以获取其中一些显示值。

您还需要记住text-align从'容器到内容'工作，这意味着它通常应用于容器以影响其内容（应用于p以影响其内联内容，例如文本中的内容，而margin: 0 auto来自“内容到容器”，这意味着它通常应用于块元素并影响其与容器相关的位置（应用于div把它集中在它的父母身上。）

Answer 3

如果你想修复它（没有完整的功能），你可以这样写：

table {
  display: inline-block;
}

如果应用于父元素，这使得您的表能够以text-align: center;为中心。

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而不影响仅内联元素。在此处通过内联替换内联块，它在我的Chrome上不再起作用

单元格中的表格上的文本对齐（在<table> <tbody> <tr> <td>内）</td> </tr> </tbody> </table>

4 个答案: