Текст центрування в таблиці в Twitter Bootstrap

Чомусь текст всередині таблиці все ще не в центрі. Чому? Як центрувати текст всередині таблиці?

Щоб зробити це дійсно ясно: Наприклад, я хочу, щоб "Лорем" сиділа посеред чотирьох "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 вирівнювання тексту встановлюється зліва, а не центр.

Додавання цього має зосереджувати всі ваші td:

.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>тег init, а потім скопіюйте, куди ви хочете :) Я сподіваюся, що це може бути корисним Приємного дня 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 є те, що він полегшує використання важливого тегу! Використання наведеної відповіді переможе мету. Ви можете легко налаштувати завантажувальний інструмент, змінивши класи у власному файлі css та пов’язавши його, включивши css boostrap.

додати:

<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>s, які знаходяться всередині <tr>вашого спеціального класу.

tr.custom_centered td {
  text-align: center;
}

наприклад, ви не ризикуєте перекрити інші таблиці або навіть замінити базовий клас завантаження (як це пропонували мої попередники).