web-dev-qa-db-fra.com

Centre du texte dans un tableau dans Twitter Bootstrap

J'ai ce code:

<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>
                <th>4</th>
                <th>4</th>
                <th>4</th>
                <th>4</th>
                <th>5</th>
                <th>5</th>
                <th>5</th>
                <th>5</th>
                <th>6</th>
                <th>6</th>
                <th>6</th>
                <th>6</th>
                <th>7</th>
                <th>7</th>
                <th>7</th>
                <th>7</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="4">Lorem</td>
                <td colspan="4">ipsum</td>
                <td colspan="4">dolor</td>
                <td colspan="4">sit</td>
                <td colspan="4">amet</td>
                <td colspan="4">Lorem</td>
                <td colspan="4">ipsum</td>
            </tr>
        </tbody>
    </table>​



@import url('http://Twitter.github.com/bootstrap/assets/css/bootstrap.css');

    table,
    thead,
    tr,
    tbody,
    th,
    td {
        text-align: center;
    }

Fiddle

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 ce soit vraiment clair: Par exemple, je veux que "Lorem" soit assis au milieu des quatre "1" ..__

twitter-bootstrap
96
Sven

L'alignement du texte de .table td est défini à gauche plutôt qu'au centre:

Ajouter ceci devrait le centrer: 

.table td {
   text-align: center;   
}

Violon mis à jour: http://jsfiddle.net/JeCpZ/1/

132
Tim

Dans Bootstrap 3 (3.0.3), l’ajout de la classe "text-center" à un élément td fonctionne immédiatement.

C'est-à-dire que les centres suivants some text dans une cellule de tableau:

<td class="text-center">some text</td>
151
Alex Che

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 balise <table> init puis copiez où vous voulez:) J'espère que cela pourra vous être utile Passez une bonne journée w stackoverflow

p.s. Bootstrap v3.2.0

28
dbjoomla

Vous pouvez aligner les td sans changer le css en ajoutant une div avec une classe de "centre de texte" dans la cellule:

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

et corrigez .text-center dans bootstrap.css:

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

J'ai eu le même problème et un meilleur moyen de le résoudre sans utiliser! Important était de définir ce qui suit dans mes css:

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

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

5
VSP

L'une des principales caractéristiques de Bootstrap est qu'il atténue l'utilisation de! Balise importante . L'utilisation de la réponse ci-dessus irait à l'encontre du but recherché. Vous pouvez facilement personnaliser l’initialisation en modifiant les classes dans votre propre fichier css et en le liant après l’inclusion du css boostrap.

4
Thoshi B

ajouter:

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

Si c’est juste une fois, vous ne devriez pas modifier votre feuille de style

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

À votre santé

3
Breno

donnez simplement au <tr> environnant une classe personnalisée comme: 

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

et css uniquement sélectionner <td>s qui se trouvent dans un <tr> avec votre classe personnalisée.

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

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

0
Peter Piper