Центрирование текста в таблице в 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;
}

как вы, вы не рискуете переопределить другие таблицы или даже переопределить базовый класс начальной загрузки (как и некоторые из моих предшественников).