CSSで表のセルを右揃えにします

私はこのような古い古典的なコードを持っています

<td align="right">

セルの内容を正しく揃えます。したがって、このセルに2つのボタンを配置すると、ボタンはセルの適切なサイトに表示されます。

しかし、私はこれをCSSにリファクタリングしていましたが、正しい整列などはありませんか？text-alignが表示されますが、同じですか？

使用する

text-align: right

text-align CSSプロパティは、テキストなどのインラインコンテンツが親ブロック要素でどのように配置されるかを示します。text-alignは、ブロック要素自体の配置を制御せず、インラインコンテンツのみを制御します。

見る

テキスト揃え

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

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

今私のために働いたのは：

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/

CSS3の「n番目の子」セレクターを忘れないでください。テキストを右揃えにする列のインデックスがわかっている場合は、次のように指定できます。

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

大きなテーブルの場合、これにより余分なマークアップを大幅に節約できます。

ここにyaのフィドルがあります... https://jsfiddle.net/w16c2nad/

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 Fiddleの例

または、オプションでtdコンテンツを表示させることもできinline-blockますが、その場合、子要素の位置が歪む可能性があります。