Wyśrodkowanie tekstu w tabeli w Twitter Bootstrap

Z jakiegoś powodu tekst w tabeli nadal nie jest wyśrodkowany. Czemu? Jak wyśrodkować tekst w tabeli?

Aby było to naprawdę jasne: na przykład chcę, aby "Lorem" siedział pośrodku czterech "1". Wcześniejsze

@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

.table td„S text-align jest ustawiony na lewo, zamiast środka.

Dodanie tego powinno wyśrodkować wszystkie twoje td:

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

Zaktualizowano JSFIDDLE

W Bootstrap 3 (3.0.3) dodanie "text-center"klasy do tdelementu działa od razu po wyjęciu z pudełka.

Tj. Następujące środki some textw komórce tabeli:

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

Myślę, że najlepszym połączeniem html i CSS do szybkiego i czystego moda jest:

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

zamknij <table>tag init, a następnie skopiuj, gdzie chcesz :) Mam nadzieję, że może się przydać. Miłego dnia w stackoverflow

ps Bootstrap w wersji 3.2.0

Możesz wyrównać td's bez zmiany css, dodając element div z klasą „text-center” wewnątrz komórki:

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

<td class="text-center">

i napraw .text-center w bootstrap.css:

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

Miałem ten sam problem i lepszym sposobem rozwiązania go bez użycia !importantbyło zdefiniowanie w moim CSS:

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

W ten sposób specyfika text-centerklasy działa poprawnie w tabelach.

Jeśli to tylko raz, nie powinieneś zmieniać swojego arkusza stylów. Po prostu edytuj ten konkretny td:

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

Twoje zdrowie

Jedną z głównych cech Bootstrap jest to, że łagodzi użycie! Important tag. Użycie powyższej odpowiedzi zniweczyłoby cel. Możesz łatwo dostosować bootstrap, modyfikując klasy we własnym pliku css i łącząc go po dołączeniu pliku boostrap css.

Dodaj:

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

po prostu nadaj otoczeniu <tr>klasę niestandardową, taką jak:

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

i spraw, aby css wybierał tylko <td>te, które znajdują się wewnątrz <tr>Twojej klasy niestandardowej.

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

w ten sposób nie ryzykujesz zastąpienia innych tabel lub nawet zastąpienia klasy bazowej ładowania początkowego (jak sugerowali niektórzy z moich poprzedników).