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

Question

我有这样的旧经典代码，

<td align="right">

这段代码的作用是：将单元格中的内容右对齐。 因此，如果我在该单元格中放置两个按钮，则它们将出现在单元格的右侧。

我正在将其重构为CSS，但似乎没有类似于右对齐的东西。我看到了text-align，但它是否相同呢？

- Michel

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>

- rahul

---

<input type="button">是块级元素吗，因为它不能靠右对齐？ - Michel

这取决于情况。我有一个段落，位于表单元格内（CSS 显示：table-cell），如果我给它一个 100% 的宽度，它就开始遵循文本对齐右侧的设置。我认为定义宽度并不总是最好的选择。 - Costa Michailidis

那么，我认为如果text-align属性适用于按钮和控件以及文本，那么这个属性名称并不是很恰当。也许应该被称为content-align？ - Ben

将块级元素设置为内联块级元素，例如：td input { display:inline-block; }。 - shalamos

对我来说，只有float:right或者老旧的align="right"才有效。这是怎么回事？ - Tone Škoda

哦，另外需要注意的是，为了使其正常工作，表格必须设置宽度为100%。 - Jan

Answer 2

不要忘记 CSS3 的“nth-child”选择器。如果您知道要将文本右对齐的列的索引，只需指定即可。

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

在处理大型表格时，这可以为您节省很多额外的标记！这里有一个小例子... https://jsfiddle.net/w16c2nad/

- Suite 404 not found

---

太棒了：我看到的最简单和最干净的解决方案。 - ncrypticus

Answer 3

现在对我有用的是：

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/

- Joysn

Answer 4

如何在单元格中定位块元素

提供的答案很好地右对齐了单元格中的文本。

当您想要对齐块元素时，这可能不是解决方案，如接受的答案所述。要使用块元素实现这样的效果，我发现利用边距很有用；

一般语法

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;
}

JSFiddle示例

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

- John Mutuma