Centrer du texte dans un tableau dans Twitter Bootstrap

Question

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

Violon

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". Un séjour sans faille

Answer 1

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

Par exemple, les centres suivants some text dans une cellule de tableau:

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

Answer 2

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>
 

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

Au revoir Davide

ps Bootstrap v3.2.0

Answer 3

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>
 

Answer 4

 <td class="text-center">
 

et corrigez .text-center dans bootstrap.css:

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