Centrer du texte dans un tableau dans Twitter Bootstrap

Pour une raison quelconque, le texte à l'intérieur du tableau n'est toujours pas centré. Pourquoi? Comment centrer le texte à l'intérieur du tableau?

Pour que les choses soient vraiment claires: par exemple, je veux que "Lorem" soit placé au milieu des quatre "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 tdalignement du texte de s est défini sur la gauche plutôt que sur le centre.

L'ajout de ceci devrait centrer tous vos 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 mis à jour

Dans Bootstrap 3 (3.0.3), l'ajout de la "text-center"classe à un tdélément fonctionne hors de la boîte.

Ie, les centres suivants some textdans une cellule de tableau:

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

Je pense que le meilleur mélange pour html & Css pour un mod rapide et propre est:

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

fermez la <table>balise init puis copiez où vous voulez :) J'espère que cela peut être utile Passez une bonne journée w stackoverflow

ps Bootstrap v3.2.0

Vous pouvez faire aligner td sans changer le css en ajoutant un div avec une classe de "text-center" à l'intérieur de la cellule:

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

<td class="text-center">

et corrigez .text-center dans bootstrap.css:

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

J'ai eu le même problème et une meilleure façon de le résoudre sans utiliser !importantétait de définir ce qui suit dans mon CSS:

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

De cette façon, la spécificité de la text-centerclasse fonctionne correctement dans les tableaux.

Si ce n'est qu'une seule fois, vous ne devez pas modifier votre feuille de style. Modifiez simplement ce détail td:

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

À votre santé

L'une des principales caractéristiques de Bootstrap est qu'il réduit l'utilisation de la balise! Important. Utiliser la réponse ci-dessus irait à l'encontre du but. Vous pouvez facilement personnaliser le bootstrap en modifiant les classes dans votre propre fichier css et en le liant après avoir inclus le css boostrap.

ajouter:

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

donnez simplement à l'environnement <tr>une classe personnalisée comme:

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

et faites en sorte que le css ne sélectionne que les <td>s qui sont à l'intérieur d'un <tr>avec votre classe personnalisée.

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

comme ça, vous ne risquez pas de remplacer d'autres tables ou même de remplacer une classe de base bootstrap (comme certains de mes prédécesseurs l'ont suggéré).