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

128

我有这样的旧经典代码

<td align="right">

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

但是后来我将其重构为CSS，但是没有正确对齐的东西吗？我看到文字对齐，是一样的吗？

css

— 米歇尔
source

154

用

text-align: right

text-align CSS属性描述了如何在其父块元素中对齐内联内容（如文本）。text-align不控制块元素本身的对齐，仅控制其内联内容。

看到

文字对齐

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

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

— 拉胡尔
source

5

是<input type =“ button”>的一个块元素，因为没有正确对齐？

— 米歇尔

1

这取决于。我在表格单元格（css显示：table-cell）内有一个段落，即块，如果我给该段落设置100％的宽度，它将开始尊重文本对齐的权利。我认为定义宽度并不总是最好的。

— 2013年

3

我认为，如果该属性text-align适用于按钮，控件以及文本，则其名称不是很好。也许应该这样称呼它content-align？

— 2014年

3

Michel：将block元素设置为inline-block，例如：td input {display：inline-block; }

— shalamos

1

或者我只工作float：right或好旧的align =“ right”。wtf？

— ToneŠkoda'15

7

现在对我有用的是：

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/

— 乔森
source

6

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

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

如果桌子很大，可以为您节省很多额外的标记！

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

— 找不到套件404
source

好极了：我看到的最简单，最干净的解决方案。

— ncrypticus

2

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

提供的答案在将td单元格中的文本右对齐方面做得很好。

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

一般语法

selector {
  margin: top right bottom left;
}

证明权利

td {
  /* there is a shorthand, TODO! 🙂 */
  margin: auto 0 auto auto;
}

证明中心

td {
  margin: auto auto auto auto;
}

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

居中对齐

td {
  margin: auto;
}

JS小提琴示例

另外，如果可以的话，也可以使td内容显示inline-block，但是这可能会扭曲其子元素的位置。

— 约翰·穆图玛
source