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

I have the old classic code like this

我有这样的经典代码

<td align="right">

which does what it says: it right aligns the content in the cell. So if I put 2 buttons in this cell, they will appear at the right site of the cell.

它做了它说的:它正确地对齐单元格中的内容。如果我在这个单元格里放两个按钮，它们会出现在单元格的正确位置。

But then I was refactoring this to CSS, but there is no such thing as right align? I see text-align, is that the same?

但是我把它重构为CSS，但是没有正确的对齐方式?我看到文字对齐，是一样的吗?

3 个解决方案

#1

121

Use

使用

text-align: right

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.

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

See

看到

text-align

text-align

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

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

#2

What worked for me now is:

现在对我起作用的是:

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>

See the following fiddle:

看到下面的小提琴:

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

#3

Don't forget about CSS3's 'nth-child' selector. If you know the index of the column you wish to align text to the right on, you can just specify

不要忘记CSS3的“n -child”选择器。如果您知道希望将文本对齐到右边的列的索引，那么只需指定

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

In cases with large tables this can save you a lot of extra markup!

在大型表的情况下，这可以节省很多额外的标记!

here's a fiddle for ya.... https://jsfiddle.net/w16c2nad/

这是一个为丫....小提琴https://jsfiddle.net/w16c2nad/

#1

121

Use

使用

text-align: right