вирівняйте прямо в комірці таблиці з CSS

128

У мене є такий старий класичний код

<td align="right">

який робить те, що говорить: він правильно вирівнює вміст у комірці. Тож якщо я покладу 2 кнопки в цю клітинку, вони з’являться в потрібному місці комірки.

Але тоді я перетворював це на CSS, але не існує такого поняття, як правильне вирівнювання? Я бачу вирівнювання тексту, це те саме?

css

— Мішель
джерело

154

Використовуйте

text-align: right

Властивість CSS-вирівнювання тексту описує, як вбудований вміст, як текст, вирівнюється в його батьківському блоковому елементі. Вирівнювання тексту не контролює вирівнювання самих блокових елементів, а лише їх вбудований вміст.

Побачити

вирівнювання тексту

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

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

— rahul
джерело

5

це <вхідний тип = "кнопка"> елемент блоку, тому що він не вирівняється правильно?

— Мішель

1

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

— Коста-

3

Я вважаю, що властивість text-alignне дуже добре названо, якщо воно стосується кнопок і елементів керування, а також тексту. Можливо, це повинно було називатися content-align?

— Бен

3

Мішель: встановіть елемент блоку на вбудований блок, наприклад: вхід td {display: inline-block; }

— shalamos

1

або мені працює тільки float: right or good old align = "right". wtf?

— Тон Шкода

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/

— Джойсн
джерело

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;
}

Приклад Дж. С. Фідділа

Крім того, ви можете зробити так, щоб це tdвідображалось вміст, inline-blockякщо це варіант, але це може спотворювати положення його дочірніх елементів.

— Джон Мутума
джерело