Zentrieren von Text in einer Tabelle in Twitter Bootstrap

Aus irgendeinem Grund ist der Text in der Tabelle immer noch nicht zentriert. Warum? Wie zentriere ich den Text in der Tabelle?

Um es wirklich klar zu machen: Ich möchte zum Beispiel, dass "Lorem" in der Mitte der vier "1" sitzt. Wenn Sie

@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

Die .table tdTextausrichtung des Textes ist auf links und nicht auf zentriert eingestellt.

Wenn Sie dies hinzufügen, sollten alle Ihre tds zentriert sein :

.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 wurde aktualisiert

In Bootstrap 3 (3.0.3) funktioniert das Hinzufügen der "text-center"Klasse zu einem tdElement sofort.

Dh die folgenden Zentren some textin einer Tabellenzelle:

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

Ich denke, wer die beste Mischung für HTML & CSS für schnelle und saubere Mod ist:

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

Schließen Sie das <table>Init-Tag und kopieren Sie es, wo Sie möchten :) Ich hoffe, es kann nützlich sein. Wir wünschen Ihnen einen guten Tag mit Stackoverflow

ps Bootstrap v3.2.0

Sie können td's ausrichten, ohne das CSS zu ändern, indem Sie ein Div mit einer Klasse von "Text-Center" in der Zelle hinzufügen:

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

<td class="text-center">

und korrigieren Sie .text-center in bootstrap.css:

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

Ich hatte das gleiche Problem und ein besserer Weg, es zu lösen, ohne es zu verwenden, !importantbestand darin, Folgendes in meinem CSS zu definieren:

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

Auf diese Weise text-centerfunktioniert die Spezifität der Klasse in Tabellen korrekt.

Wenn es nur einmal ist, sollten Sie Ihr Stylesheet nicht ändern. Bearbeiten Sie einfach das td:

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

Prost

Eines der Hauptmerkmale von Bootstrap ist, dass es die Verwendung von! Wichtigen Tags erleichtert. Die Verwendung der obigen Antwort würde den Zweck zunichte machen. Sie können Bootstrap einfach anpassen, indem Sie die Klassen in Ihrer eigenen CSS-Datei ändern und sie nach dem Einfügen des Boostrap-CSS verknüpfen.

hinzufügen:

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

Geben Sie der Umgebung einfach <tr>eine benutzerdefinierte Klasse wie:

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

und lassen Sie das CSS nur <td>s auswählen , die sich in einer <tr>mit Ihrer benutzerdefinierten Klasse befinden.

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

Auf diese Weise riskieren Sie nicht, andere Tabellen oder sogar eine Bootstrap-Basisklasse zu überschreiben (wie einige meiner Vorgänger vorgeschlagen haben).