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

Question

我有这样的旧经典代码

<td align="right">

它做了它所说的:它正确地对齐单元格中的内容.因此,如果我在此单元格中放置2个按钮,它们将出现在单元格的正确位置.

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

Answer 1

使用

text-align: right

text-align CSS属性描述了如何在其父块元素中对齐像文本这样的内联内容.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-child'选择器.如果您知道要将文本右对齐的列的索引,则可以指定

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

在有大表的情况下,这可以为您节省大量额外的标记!

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

Answer 4

如何在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;
}

JS小提琴示例

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