Wyśrodkowanie tekstu w tabeli w Twitter Bootstrap


114

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

Odpowiedzi:


149

.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


48
W późniejszych wersjach jest do tego klasa centrum tekstu.
MGP

9
uważaj: .table td {tekst-wyrównanie: środek; } wyśrodkuje WSZYSTKIE twoje
niszczyciele

9
@ xr09 Tak jest, .text-centerale specyfika .table tdwciąż go pokona. Dlatego bootstrap powinien zacząć się od zmiennych zamiast bezpośrednio do klas takich jak.table
Sinetheta.

6
Dodaj .texter-centerw <table>i wszystkie wiersze będzie wyśrodkowany.
chaim,

Komentarz @chaim powinien zostać opublikowany jako odpowiedź. Pracowałem nad bootstrap-vue 2.0.1
MrCodeX

177

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>

3
Podobało mi się to rozwiązanie zamiast zmiany całego stylu .table td.
Stuart

Możesz także po prostu dodać klasę „centrum tekstu” do elementu tabeli.
shad0wec

To jest prawdziwa odpowiedź.
Nyxynyx

33

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


1
podczas gdy to pytanie ma już odpowiedź, nie ma sensu publikować nowej odpowiedzi !!
Pragnesh Ghoda シ

29

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>

1
Kto zdefiniował class?
Amol M Kulkarni

6
O ile wiem, w Bootstrap 2.3 td {text-align:left}będzie nadpisywać wszelkie dodatkowe próby wyśrodkowania rzeczy. Po prostu próbowałem to zrobić w ten sposób, ale bezskutecznie.
Jason Lowenthal,

12
<td class="text-center">

i napraw .text-center w bootstrap.css:

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

3
Uważam, że nie chcesz bezpośrednio zmieniać pliku bootstrap.css.
Mike Cole

3
Nie musiałem naprawiać .text-center w bootstrap.css, to działało bez niego.
user573335

6

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.


6

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


4

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.



0

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.