Выравнивание в ячейке таблицы с помощью CSS

У меня есть старый классический код, подобный этому

<td align="right">

который делает то, что он говорит: он правильно выравнивает содержимое в ячейке. Поэтому, если я поставлю две кнопки в этой ячейке, они появятся в нужном месте ячейки.

Но тогда я переформатировал это для CSS, но нет такой вещи, как правый выравнивание? Я вижу text-align, это то же самое?

Ответы

Ответ 1

Использование

text-align: right

Свойство CSS с выравниванием текста описывает как встроенный контент, такой как текст, выровненный в его родительском блочном элементе. text-align не контролирует выравнивание самих элементов блока, только их встроенный контент.

См

text-align

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

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

Ответ 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/

Ответ 3

Не забывайте о селекторе CSS3 'nth-child'. Если вы знаете индекс столбца, который вы хотите выровнять текст вправо, вы можете просто указать

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

В случае больших таблиц это может сэкономить вам много дополнительной разметки!

здесь скрипка для ya.... https://jsfiddle.net/w16c2nad/