Perataan vertikal dalam tabel bootstrap

Saya mencoba menampilkan tabel dengan 4 kolom, salah satunya adalah gambar. Di bawah ini adalah cuplikannya: -

Saya ingin meratakan teks secara vertikal ke posisi tengah, tetapi entah bagaimana css sepertinya tidak berfungsi. Saya telah menggunakan tabel responsif bootstrap. Saya ingin tahu mengapa kode saya tidak berfungsi dan apa metode yang benar untuk membuatnya berfungsi.

berikut adalah kode untuk tabel tersebut

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 '[email protected]'; ?>
            </td>
            <td>
                <?php echo '9999999999'; ?>
            </td>
            <td>
                <?php echo '<img src="'.  base_url('files/images/test.jpg').'">'; ?>
            </td>
        </tr>

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

Berdasarkan apa yang Anda berikan, pemilih CSS Anda tidak cukup spesifik untuk menimpa aturan CSS yang ditentukan oleh Bootstrap.

Coba ini:

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

Di Boostrap 4 , ini dapat dicapai dengan kelas utilitas .align-middle Vertical Alignment .

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

Pada Bootstrap 4 ini sekarang jauh lebih mudah menggunakan utilitas yang disertakan daripada CSS khusus. Anda hanya perlu menambahkan class align-middle ke td-element:

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

Bagi saya <td class="align-middle" >${element.imie}</td>bekerja. Saya menggunakan Bootstrap v4.0.0-beta.

Berikut ini tampaknya berfungsi:

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

Anda dapat melamar ke tabel tertentu juga seperti ini:

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

SCSS

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

menggunakan

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

Mencoba:

.table thead th{
   vertical-align:middle;
}