Центрирование текста в таблице в Twitter Bootstrap
По какой-то причине текст внутри таблицы все еще не центрирован. Зачем? Как мне центрировать текст внутри таблицы?
Чтобы сделать это действительно понятным: например, я хочу, чтобы "Lorem" сидел посередине четырех "1".
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
table,
thead,
tr,
tbody,
th,
td {
text-align: center;
}
<table class="table">
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>2</th>
<th>2</th>
<th>2</th>
<th>2</th>
<th>3</th>
<th>3</th>
<th>3</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">Lorem</td>
<td colspan="4">ipsum</td>
<td colspan="4">dolor</td>
</tr>
</tbody>
</table>
Ответы
Ответ 1
.table td
text-align установлен слева, а не по центру:
Добавление этого должно центрировать это:
.table td {
text-align: center;
}
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
table,
thead,
tr,
tbody,
th,
td {
text-align: center;
}
.table td {
text-align: center;
}
<table class="table">
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>2</th>
<th>2</th>
<th>2</th>
<th>2</th>
<th>3</th>
<th>3</th>
<th>3</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">Lorem</td>
<td colspan="4">ipsum</td>
<td colspan="4">dolor</td>
</tr>
</tbody>
</table>
Ответ 2
В Bootstrap 3 (3.0.3) добавление класса "text-center"
к элементу td
выполняется из коробки.
I.e., следующие центры some text
в ячейке таблицы:
<td class="text-center">some text</td>
Ответ 3
Я думаю, кто лучший микс для html и Css для быстрого и чистого мод:
<table class="table text-center">
<thead>
<tr>
<th class="text-center">Uno</th>
<th class="text-center">Due</th>
<th class="text-center">Tre</th>
<th class="text-center">Quattro</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
закрыть тег <table>
init, а затем скопировать туда, где вы хотите:)
Я надеюсь, что это может быть полезно
Хорошего дня
w stackoverflow
p.s. Bootstrap v3.2.0
Ответ 4
Вы можете сделать td align без изменения css, добавив div в класс "text-center" внутри ячейки:
<td>
<div class="text-center">
My centered text
</div>
</td>
Ответ 5
<td class="text-center">
и исправить .text-center в bootstrap.css:
.text-center {
text-align: center !important;
}
Ответ 6
добавить:
<p class="text-center"> Your text here... </p>
Ответ 7
У меня была та же проблема, и лучшим способом ее решения без использования !important
было определить следующее в моем CSS:
table th.text-center, table td.text-center {
text-align: center;
}
Таким образом, спецификация класса text-center
работает корректно в таблицах.
Ответ 8
Одна из основных особенностей Bootstrap заключается в том, что она облегчает использование важного тега.
Использование вышеуказанного ответа победит цель. Вы можете легко настроить загрузку, изменив классы в своем собственном файле css и связав их после включения boostrap css.
Ответ 9
Если это только один раз, вы не должны изменять свою таблицу стилей. Просто отредактируйте этот конкретный td
:
<td style="text-align: center;">
ура
Ответ 10
просто присвойте окружающему <tr>
пользовательский класс, например:
<tr class="custom_centered">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
и css выберите только <td>
, которые находятся внутри <tr>
с вашим пользовательским классом.
tr.custom_centered td {
text-align: center;
}
как вы, вы не рискуете переопределить другие таблицы или даже переопределить базовый класс начальной загрузки (как и некоторые из моих предшественников).