Le centrage du texte dans un tableau de Twitter Bootstrap

Pour une raison quelconque, Le texte à l'intérieur de la table n'est toujours pas centré. Pourquoi? Comment faire pour centrer le texte à l'intérieur de la table?

Pour le rendre vraiment Clair: Par exemple, je veux "Lorem" de rester dans le milieu de la quatre "1".

CSS:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}

HTML:

<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

InformationsquelleAutor Sven | 2012-07-26

twitter-bootstrap

139

.table td s 'text-align est défini à gauche, plutôt que de centre:

L'ajout de ce qui devrait centre:

.table td {
   text-align: center;   
}

CSS:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}

.table td {
  text-align: center;
}

HTML:

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

Mise à jour JSFIDDLE

Dans les versions ultérieures, il y a un texte-centre de classe pour cette.
méfiez-vous: .table td { text-align: center; } centre de TOUTES vos TDs
Oui, il est, .text-center, mais la spécificité de .table td sera toujours à la vaincre. C'est pourquoi bootstrap doit avoir commencé avec les noms d'étiquette au lieu de lancer directement dans des classes comme .table
Ajouter .texter-center dans le <table> et toutes les lignes deviendront centré.
en fait, .text-center..et par la manière, ce n'est pas de travailler sur thead..

InformationsquelleAutor Tim

158

Dans le Bootstrap 3 (3.0.3) en y ajoutant la "text-center" classe à un td élément fonctionne hors de la boîte.

I. e., les centres suivants some text dans une cellule de tableau:
```
<td class="text-center">some text</td>
```
- J'ai aimé cette solution plus qui change tout .table td style.
- Vous pouvez aussi ajouter une classe "text-center" à l'élément de tableau.
- il fonctionne pour moi. Je vous remercie.
- C'est la vraie réponse.
InformationsquelleAutor Alex Che

Je pense qui a la meilleure combinaison pour le html & Css pour rapide et propre mod 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>

fermer la <table> init balise puis copier où vous voulez 🙂
J'espère que cela peut être utile
Bonne journée
w stackoverflow

p.s. Bootstrap v3.2.0

tandis que cette question a déjà la réponse,il n'y a pas de sens de poster une nouvelle réponse!!

InformationsquelleAutor dbjoomla

26

Vous pouvez faire de la banque td align 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>
```
- Qui a défini class?
- Bootstrap ici.
- Aussi loin que je peux dire, dans le Bootstrap 2.3 le td {text-align:left} va remplacer toutes les autres tentatives de centre des choses. J'ai juste tenté de le faire de cette façon, sans succès.
- une div à l'intérieur d'un td n'est pas vraiment une bonne solution.
InformationsquelleAutor user2507821
11
```
<td class="text-center">
```
et corrigé .texte-centre dans le bootstrap.css:
```
.text-center {
    text-align: center !important;
}
```
- Je crois que vous ne souhaitez pas modifier directement bootstrap.css.
- Je n'ai pas besoin de corriger .texte-centre dans le bootstrap.css, cela a fonctionné sans elle.
InformationsquelleAutor XAOPT

ajouter:

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

InformationsquelleAutor Artem Zinoviev

5

J'ai eu le même problème et une meilleure façon de le résoudre sans l'aide de !important était la définition de la suite dans mon CSS:
```
table th.text-center, table td.text-center { 
    text-align: center;
}
```
De cette façon, la spécificité de la text-center classe fonctionne correctement dans les tableaux.

InformationsquelleAutor VSP
4

Une des caractéristiques principales de "Bootstrap" est qu'elle permet de réduire l'utilisation de la !important tag.
À l'aide de la réponse ci-dessus à l'encontre de l'objectif. Vous pouvez facilement personnaliser bootstrap en modifiant les classes dans votre propre fichier css et de le relier à la suite notamment de bootstrap css.

InformationsquelleAutor Thoshi B
4

Si c'est juste une fois, vous ne devriez pas modifier votre feuille de style.
Il suffit d'éditer ce td:
```
<td style="text-align: center;">
```
Acclamations

InformationsquelleAutor Breno
0

juste donner les environs <tr> une classe personnalisée comme:
```
<tr class="custom_centered">
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
```
et la css de sélectionner uniquement <td>s qui sont à l'intérieur d'un <tr> avec votre classe personnalisée.
```
tr.custom_centered td {
  text-align: center;
}
```
comme ça tu ne risque pas de l'emporter sur d'autres tables ou même remplacer un bootstrap de la classe de base (à l'instar de certains de mes prédécesseurs a suggéré).

InformationsquelleAutor Peter Piper

Vous devez vous connecter pour publier un commentaire.