【发布时间】：2009-12-15 10:22:55
【问题描述】：
我有这样的旧经典代码
<td align="right">
它按照它所说的那样做：它右对齐单元格中的内容。 因此，如果我在此单元格中放置 2 个按钮，它们将出现在单元格的正确位置。
但是后来我把这个重构为 CSS，但是没有右对齐之类的东西吗？我看到text-align，是一样的吗？
【问题讨论】：
标签： css
【发布时间】：2009-12-15 10:22:55
【问题描述】：
使用
text-align: right
text-align CSS 属性描述 像文本这样的内联内容如何 在其父块元素中对齐。 text-align 不控制 块元素本身的对齐， 只有他们的内联内容。
见
<td class='alnright'>text to be aligned to right</td>
<style>
.alnright { text-align: right; }
</style>
【讨论】：
-
是一个 块元素，因为它没有对齐吗？
-
视情况而定。我在表格单元格（css 显示：表格单元格）内有一个段落，它是块，如果我给该段落的宽度为 100%，它开始尊重文本右对齐。我认为定义宽度并不总是最好的。
-
我认为，如果属性
text-align适用于按钮和控件以及文本，则其命名不是很好。也许这应该被称为content-align？ -
Michel：将块元素设置为inline-block，例如：td input { display:inline-block; }
-
或者我只能使用 float:right 或旧的 align="right"。 w t f ?
不要忘记 CSS3 的“nth-child”选择器。如果您知道要将文本右对齐的列的索引，则可以指定
table tr td:nth-child(2) {
text-align: right;
}
在大型表格的情况下，这可以为您节省大量额外的标记！
这是给你的小提琴....https://jsfiddle.net/w16c2nad/
【讨论】：
-
太棒了：我看到的最简单、最干净的解决方案。
如何在td 单元格中定位块元素
提供的答案可以很好地右对齐 td 单元格中的文本。
当您希望按照已接受答案中的注释对齐块元素时，这可能不是解决方案。为了使用块元素实现这一点，我发现利用边距很有用；
一般语法
selector {
margin: top right bottom left;
}
右对齐
td > selector {
/* there is a shorthand, TODO! ? */
margin: auto 0 auto auto;
}
居中对齐
td > selector {
margin: auto auto auto auto;
}
/* or the short-hand */
margin: auto;
居中对齐
td > selector {
margin: auto;
}
或者，如果可以选择，您可以让 td 内容显示 inline-block，但这可能会扭曲其子元素的位置。
【讨论】：
现在对我有用的是：
CSS：
.right {
text-align: right;
margin-right: 1em;
}
.left {
text-align: left;
margin-left: 1em;
}
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>
请看下面的小提琴：
【讨论】：