Centralizando o texto em uma tabela no Twitter Bootstrap

Por algum motivo, o texto dentro da tabela ainda não está centralizado. Por quê? Como faço para centralizar o texto dentro da tabela?

Para deixar realmente claro: Por exemplo, quero que "Lorem" se sente no meio dos quatro "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

O .table tdalinhamento de texto do é definido para a esquerda, ao invés do centro.

Adicionar isso deve centralizar todos os seus 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 atualizado

No Bootstrap 3 (3.0.3), adicionar a "text-center"classe a um tdelemento funciona imediatamente.

Ou seja, os seguintes centros some textem uma célula de tabela:

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

Acho que a melhor combinação de html e Css para um mod rápido e limpo é:

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

feche a <table>tag init e copie onde quiser :) Espero que possa ser útil Tenha um bom dia w stackoverflow

ps Bootstrap v3.2.0

Você pode alinhar tds sem alterar o css adicionando um div com uma classe de "text-center" dentro da célula:

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

<td class="text-center">

e corrigir .text-center em bootstrap.css:

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

Eu tive o mesmo problema e uma maneira melhor de resolvê-lo sem usar !importantera definir o seguinte no meu CSS:

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

Dessa forma, a especificidade da text-centerclasse funciona corretamente nas tabelas.

Se for apenas uma vez, você não deve alterar sua folha de estilo. Apenas edite esse particular td:

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

Felicidades

Uma das principais características do Bootstrap é que ele alivia o uso da tag! Important. Usar a resposta acima anularia o propósito. Você pode personalizar o bootstrap facilmente, modificando as classes em seu próprio arquivo css e vinculando-o após incluir o boostrap css.

adicionar:

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

apenas dê ao ambiente <tr>uma classe personalizada como:

<tr class="custom_centered">
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>

e faça com que o css selecione apenas os <td>que estão dentro de um <tr>com sua classe personalizada.

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

assim, você não corre o risco de sobrescrever outras tabelas ou mesmo sobrescrever uma classe base de bootstrap (como alguns de meus predecessores sugeriram).