Centrare il testo in una tabella in Twitter Bootstrap

Per qualche motivo, il testo all'interno della tabella non è ancora centrato. Perché? Come centrare il testo all'interno della tabella?

Per renderlo davvero chiaro: ad esempio, voglio che "Lorem" si trovi nel mezzo dei quattro "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

L' .table tdallineamento del testo di è impostato a sinistra, anziché al centro.

L'aggiunta di questo dovrebbe centrare tutti i tuoi messaggi 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>

Aggiornato JSFIDDLE

In Bootstrap 3 (3.0.3) l'aggiunta della "text-center"classe a un tdelemento funziona immediatamente.

Cioè, i seguenti centri some textin una cella di tabella:

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

Penso che il miglior mix per html e Css per mod veloce e pulito sia:

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

chiudi il <table>tag init quindi copia dove vuoi :) Spero che possa essere utile Buona giornata w stackoverflow

ps Bootstrap v3.2.0

Puoi allineare td senza modificare il css aggiungendo un div con una classe di "text-center" all'interno della cella:

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

<td class="text-center">

e correggi .text-center in bootstrap.css:

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

Ho avuto lo stesso problema e un modo migliore per risolverlo senza utilizzare !importantera definire quanto segue nel mio CSS:

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

In questo modo la specificità della text-centerclasse funziona correttamente nelle tabelle.

Se è solo una volta, non dovresti alterare il tuo foglio di stile. Basta modificare quel particolare td:

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

Saluti

Una delle caratteristiche principali di Bootstrap è che allevia l'uso del tag! Important. Usare la risposta di cui sopra vanificherebbe lo scopo. Puoi personalizzare facilmente il bootstrap modificando le classi nel tuo file css e collegandolo dopo aver incluso il css boostrap.

Inserisci:

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

basta dare all'ambiente circostante <tr>una classe personalizzata come:

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

e fai in modo <td>che il CSS selezioni solo i messaggi che si trovano all'interno di un <tr>con la tua classe personalizzata.

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

in questo modo non rischi di sovrascrivere altre tabelle o addirittura sovrascrivere una classe base bootstrap (come suggerito da alcuni dei miei predecessori).