使用CSS在表格单元格中对齐

Question

我有像这样的旧经典代码

<td align="right">

它说的是：它正确地对齐单元格中的内容。 因此，如果我在此单元格中放置2个按钮，它们将出现在单元格的正确位置。

但后来我把它重构为CSS，但没有正确对齐的东西？我看到text-align，是一样的吗？

Answer 1

使用

text-align: right

  

text-align CSS属性描述   如何像文本一样内联内容   在其父块元素中对齐。   text-align不控制   块元素本身的对齐，   只有他们的内联内容。

见

<强> text-align

<td class='alnright'>text to be aligned to right</td>

<style>
    .alnright { text-align: right; }
</style>

Answer 2

现在对我有用的是：

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>

请参阅以下小提琴：

http://jsfiddle.net/Joysn/3u3SD/

Answer 3

不要忘记CSS3＆＃n; nth-child＆＃39;选择。如果您知道要将文本右对齐的列的索引，则只需指定

即可

table tr td:nth-child(2) {
    text-align: right;
}

如果使用大型表格，这可以为您节省大量额外标记！

这里是你的小提琴....... https://jsfiddle.net/w16c2nad/

Answer 4

如何在td单元格中放置块元素

提供的答案非常适合在td单元格中使文本右对齐。

当您要按照接受的答案中的注释对齐块元素时，这可能不是解决方案。为了实现这种效果，我发现利用边距很有用；

证明权利

td {
  margin: 0 0 0 auto;
}

调整中心

td {
  margin: 0 auto 0 auto;
}

/* or the short-hand */
margin: 0 auto;

对齐中心

td {
  margin: auto 0;
}

JS Fiddle example

或者，如果可以的话，可以让td内容显示inline-block，但这可能会扭曲其子元素的位置。