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

128

У меня старый классический код вроде этого

<td align="right">

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

Но потом я реорганизовал это в CSS, но нет такой вещи, как правильное выравнивание? Я вижу выравнивание текста, это то же самое?

css

— Мишель
источник

154

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

text-align: right

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

Видеть

выравнивания текста

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

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

— Рахул
источник

5

является ли <input type = "button"> блочным элементом, потому что он не выравнивается правильно?

— Мишель

1

Это зависит. У меня есть абзац, который является блоком, внутри ячейки таблицы (css display: table-cell), и если я даю этому абзацу ширину 100%, он начинает учитывать выравнивание текста по правому краю. Я полагаю, что определение ширины - не всегда лучший вариант.

— Costa

3

Я так понимаю, что это свойство text-alignне очень удачно названо, если оно применяется к кнопкам и элементам управления, а также к тексту. Может, это надо было назвать content-align?

— Бен

3

Мишель: установите для элемента блока значение inline-block, например: td input {display: inline-block; }

— shalamos

1

или у меня работает только float: right или старый добрый align = "right". что за?

— Тон Шкода

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/

— Joysn
источник

6

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

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

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

вот скрипка для тебя .... https://jsfiddle.net/w16c2nad/

— Люкс 404 не найден
источник

Отлично: самое простое и чистое решение, которое я видел.

— 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 Fiddle

В качестве альтернативы вы можете настроить tdотображение содержимого, inline-blockесли это возможно, но это может исказить положение его дочерних элементов.

— Джон Мутума
источник