使用 CSS 在表格单元格中右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1906469/
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
align right in a table cell with CSS
提问by Michel
I have the old classic code like this
我有这样的旧经典代码
<td align="right">
which does what it says: it right aligns the content in the cell. So if I put 2 buttons in this cell, they will appear at the right site of the cell.
它做它所说的：它正确对齐单元格中的内容。因此，如果我在此单元格中放置 2 个按钮，它们将出现在单元格的正确位置。
But then I was refactoring this to CSS, but there is no such thing as right align? I see text-align, is that the same?
但是后来我将其重构为 CSS，但没有右对齐之类的东西？我看到了 text-align，是一样的吗？
回答by rahul
Use
用
text-align: right
The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.
text-align CSS 属性描述了内联内容（如文本）如何在其父块元素中对齐。text-align 不控制块元素本身的对齐方式，只控制它们的内联内容。
See
看
<td class='alnright'>text to be aligned to right</td>
<style>
.alnright { text-align: right; }
</style>
回答by Joysn
What worked for me now is:
现在对我有用的是：
CSS:
CSS：
.right {
text-align: right;
margin-right: 1em;
}
.left {
text-align: left;
margin-left: 1em;
}
HTML:
HTML：
<table width="100%">
<tbody>
<tr>
<td class="left">
<input id="abort" type="submit" name="abort" value="Back">
<input id="save" type="submit" name="save" value="Save">
</td>
<td class="right">
<input id="delegate" type="submit" name="delegate" value="Delegate">
<input id="unassign" type="submit" name="unassign" value="Unassign">
<input id="complete" type="submit" name="complete" value="Complete">
</td>
</tr>
</tbody>
</table>
See the following fiddle:
请参阅以下小提琴：
回答by Suite 404 not found
Don't forget about CSS3's 'nth-child' selector. If you know the index of the column you wish to align text to the right on, you can just specify
不要忘记 CSS3 的“nth-child”选择器。如果您知道希望将文本向右对齐的列的索引，则只需指定
table tr td:nth-child(2) {
text-align: right;
}
In cases with large tables this can save you a lot of extra markup!
在有大表的情况下，这可以为您节省大量额外的标记！
here's a fiddle for ya.... https://jsfiddle.net/w16c2nad/
这是给你的小提琴...... https://jsfiddle.net/w16c2nad/
回答by John Mutuma
How to position block elements in a tdcell
如何在td单元格中定位块元素
The answers provided do a great job to right-align text in a tdcell.
提供的答案在td单元格中右对齐文本方面做得很好。
This might not be the solution when you're looking to align a block element as commented in the accepted answer. To achieve such with a block element, I have found it useful to make use of margins;
当您希望按照已接受的答案中的注释对齐块元素时，这可能不是解决方案。为了用块元素实现这一点，我发现利用边距很有用；
justify right
有理有据
td {
margin: 0 0 0 auto;
}
justify center
对齐中心
td {
margin: 0 auto 0 auto;
}
/* or the short-hand */
margin: 0 auto;
align center
居中对齐
td {
margin: auto 0;
}
Alternatively, you could make you tdcontent display inline-blockif that's an option, but that may distort the position of its child elements.
或者，如果这是一个选项，您可以让您的td内容显示inline-block，但这可能会扭曲其子元素的位置。
