Wyrównaj w pionie w tabeli bootstrap


123

Próbuję wyświetlić tabelę z 4 kolumnami, z których jedna jest obrazem. Poniżej znajduje się migawka: -wprowadź opis obrazu tutaj

Chcę wyrównać tekst w pionie do środka, ale w jakiś sposób CSS nie działa. Użyłem tabel responsywnych bootstrap. Chcę wiedzieć, dlaczego mój kod nie działa i jaka jest właściwa metoda, aby to zadziałało.

poniżej znajduje się kod tabeli

CSS

img {
    height: 150px;
    width: 200px;
}
th, td {
    text-align: center;
    vertical-align: middle;
}

HTML

<table id="news" class="table table-striped table-responsive">
    <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Photo</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $i=0;
        foreach ($result as $row) 
        { ?>
        <tr>
            <td>
                <?php echo 'Lorem Ispum'; ?>
            </td>
            <td>
                <?php echo 'lrem@ispum.com'; ?>
            </td>
            <td>
                <?php echo '9999999999'; ?>
            </td>
            <td>
                <?php echo '<img src="'.  base_url('files/images/test.jpg').'">'; ?>
            </td>
        </tr>

        <?php
        }
        ?>           
    </tbody>
</table>

Odpowiedzi:


251

Bazując na tym, co podałeś, twój selektor CSS nie jest wystarczająco konkretny , aby zastąpić reguły CSS zdefiniowane przez Bootstrap.

Spróbuj tego:

.table > tbody > tr > td {
     vertical-align: middle;
}

W Boostrap 4 można to osiągnąć dzięki klasie użyteczności .align-middle Vertical Alignment .

<td class="align-middle">Text</td>

8
@BarryFranklin Dodaj klasę do tej tabeli, <table class="table vertical-align">i nieco zwiększyć swoistość selektora przy użyciu tej klasy, table.vertical-align > tbody > tr > td {}. Możesz też zrobić, .table.vertical-alilgn > tbody > tr > td {}że ma to większą specyficzność niż pierwsza opcja. Zawsze staram się zwiększać specyficzność w moich selektorach CSS tak mało, jak to możliwe, jeśli mogę. Zwróć uwagę, że pierwsza opcja polega na wybraniu elementu tabeli, który ma, .vertical-alignpodczas gdy druga opcja polega na wybraniu elementu, który ma klasy .tableAND .vertical-align.
Hungerstar

37

Począwszy od Bootstrap 4 jest to teraz znacznie łatwiejsze przy użyciu dołączonych narzędzi zamiast niestandardowego CSS. Musisz po prostu dodać klasę align-middle do elementu td:

<table>
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

11

U mnie <td class="align-middle" >${element.imie}</td>działa. Używam Bootstrap v4.0.0-beta.


4

Wydaje się, że działa:

table td {
  vertical-align: middle !important;
}

Możesz aplikować do konkretnej tabeli, jak na przykład:

#some_table td {
  vertical-align: middle !important;
}

7
!importantto przesada, dodająca o wiele bardziej szczegółowości niż to konieczne.
Hungerstar

2

SCSS

.table-vcenter {
    td,
    th {
        vertical-align: middle;
    }
}

posługiwać się

<table class="table table-vcenter">
</table>

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.