Centrar texto en una tabla en Twitter Bootstrap

Por alguna razón, el texto dentro de la tabla todavía no está centrado. ¿Por qué? ¿Cómo centro el texto dentro de la tabla?

Para que quede realmente claro: por ejemplo, quiero que "Lorem" se siente en el medio de los cuatro "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

La .table tdalineación del texto de se establece a la izquierda, en lugar de al centro.

Agregar esto debería centrar todos sus 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 actualizado

En Bootstrap 3 (3.0.3), agregar la "text-center"clase a un tdelemento funciona de manera inmediata.

Es decir, los siguientes centros some texten una celda de tabla:

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

Creo que quién es la mejor combinación de html y Css para una modificación rápida y limpia es:

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

cierre la <table>etiqueta de inicio y luego copie donde desee :) Espero que pueda ser útil Tenga un buen día w stackoverflow

ps Bootstrap v3.2.0

Puede hacer que td's se alinee sin cambiar el CSS agregando un div con una clase de "text-center" dentro de la celda:

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

<td class="text-center">

y corregir .text-center en bootstrap.css:

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

Tuve el mismo problema y una mejor manera de resolverlo sin usar !importantfue definiendo lo siguiente en mi CSS:

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

De esa forma, la especificidad de la text-centerclase funciona correctamente en tablas.

Si es solo una vez, no debes alterar tu hoja de estilo. Solo edita ese particular td:

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

Salud

Una de las características principales de Bootstrap es que alivia el uso de la etiqueta! Important. Usar la respuesta anterior frustraría el propósito. Puede personalizar fácilmente bootstrap modificando las clases en su propio archivo css y vinculándolo después de incluir el boostrap css.

añadir:

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

simplemente dale al entorno <tr>una clase personalizada como:

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

y haga que css solo seleccione <td>s que están dentro de una <tr>con su clase personalizada.

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

de esta forma, no se arriesga a anular otras tablas o incluso anular una clase base de arranque (como sugirieron algunos de mis predecesores).