CSS 单元格中表格上的文本对齐（<td> 内的<table>）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8079822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text-align on a table in a cell (<table> inside a <td>)
提问by user1039769
Here's something I never thought I'd say: I have a problem in Firefox and Chrome, but it's working fine in IE!
这是我从未想过会说的话：我在 Firefox 和 Chrome 中遇到问题，但在 IE 中运行良好！
It's very simple, but I don't understand why it doesn't work:
这很简单，但我不明白为什么它不起作用：
I have a table inside a cell, and I have style="text-align:right"on the cell, but the table is staying left in Firefox and Chrome (in IE it's obediently going to the right...). If I put align=right in the cell tag then it works, but I don't want to do that.
我在一个单元格中有一个表格，我style="text-align:right"在单元格上有一个表格，但表格在 Firefox 和 Chrome 中保持左侧（在 IE 中它乖乖地向右移动......）。如果我将 align=right 放在单元格标签中，那么它可以工作，但我不想这样做。
Code is basically:
代码基本上是：
<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>
I don't want the nested table to be width=100% or anything like that...
我不希望嵌套表为 width=100% 或类似的东西...
Could anyone please explain to me why it doesn't work, and how to fix it, and maybe why it works in IE but not Firefox or Chrome?
任何人都可以向我解释为什么它不起作用，以及如何修复它，也许为什么它在 IE 中有效但在 Firefox 或 Chrome 中无效？
采纳答案by maxedison
My guess is that Chrome and FF are actually the ones rendering it correctly. text-alignprobably isn't supposed to affect tableelements. However, applying float:rightto the table will do what you want.
我的猜测是 Chrome 和 FF 实际上是正确渲染它的。text-align可能不应该影响table元素。但是，应用float:right到桌子上会做你想做的。
回答by alonso.torres
I would like to add that the CSS way to align tables relative to its container is with the margin property.
我想补充一点，相对于其容器对齐表格的 CSS 方式是使用 margin 属性。
You must add margin: 0 auto;if you'd like to align it to the center, or margin-left: auto;if you'd like to align it to the right.
margin: 0 auto;如果您想将其与中心对齐，或者margin-left: auto;您想将其向右对齐，则必须添加。
As @maxedison says, text-alignwill work only with inlineand inline-blockelements, so the other solution is change your inner table to take some of those display values.
正如@maxedison 所说，text-align仅适用于inline和inline-block元素，因此另一个解决方案是更改您的内部表格以获取其中一些显示值。
You also need to remember that text-alignworks from 'container-to-content', this means it is normally applied to a container to affect its content (applied to a pto affect its inline content such as the text within), and margin: 0 autoworks from 'content-to-container', meaning that it's normally applied to a block element and affects its position related to its container (applied to a divto center it to its parent).
您还需要记住，text-align从“容器到内容”开始工作，这意味着它通常应用于容器以影响其内容（应用于 ap以影响其内联内容，例如其中的文本），并margin: 0 auto从“内容”开始工作-to-container'，意味着它通常应用于块元素并影响其与其容器相关的位置（应用于 adiv以使其居中于其父元素）。
回答by Lucas
If you want to fix it (not with full functionality), you can write this:
如果你想修复它（不是完整的功能），你可以这样写：
table {
display: inline-block;
}
This makes your table able to be centered with text-align: center;, if applied to the parent element(s).
text-align: center;如果应用于父元素，这使您的表格能够以 居中。
回答by Chboing
when you don't want the div to be floating, you may try this : http://jsfiddle.net/NvEZ8/
当你不希望 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>
It looks like text-align (with a DOCTYPE html) only affects inline-block in Chrome and not inline only element. Replacing inline-block by inline here and it doesn't work anymore on my Chrome
看起来 text-align (with a DOCTYPE html) 只影响 Chrome 中的 inline-block 而不是 inline only element。在这里用内联替换内联块，它在我的 Chrome 上不再起作用
