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

JSFiddle

.table td«S выравнивания текста устанавливается слева, а не центр.

Добавление этого должно центрировать все ваши tds:

.table td {
   text-align: center;   
}

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.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>

Обновлен JSFIDDLE

В Bootstrap 3 (3.0.3) добавление "text-center"класса к tdэлементу работает из коробки.

То есть, следующие центры some textв ячейке таблицы:

<td class="text-center">some text</td>

Я думаю, кто лучший микс для 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>тег инициализации и скопируйте туда, куда хотите :) Надеюсь, это может быть полезно. Удачного дня w stackoverflow

ps Bootstrap v3.2.0

Вы можете сделать выравнивание td без изменения css, добавив div с классом "text-center" внутри ячейки:

    <td>
        <div class="text-center">
            My centered text
        </div>
    </td>

<td class="text-center">

и исправим .text-center в bootstrap.css:

.text-center {
    text-align: center !important;
}

У меня была та же проблема, и лучший способ решить ее без использования !important- это определение следующего в моем CSS:

table th.text-center, table td.text-center { 
    text-align: center;
}

Таким образом, специфика text-centerкласса корректно работает в таблицах.

Если это всего один раз, вам не следует изменять таблицу стилей. Просто отредактируйте это td:

<td style="text-align: center;">

ура

Одна из главных особенностей Bootstrap заключается в том, что он упрощает использование тега! Important. Использование приведенного выше ответа приведет к поражению цели. Вы можете легко настроить начальную загрузку, изменив классы в своем собственном файле css и связав его после включения ускоренного css.

Добавить:

<p class="text-center"> Your text here... </p>

просто дайте окружению <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;
}

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