Önyükleme tablosunda dikey hizalama

Biri resim olan 4 sütunlu bir tablo görüntülemeye çalışıyorum. Anlık görüntü aşağıdadır: -

Metni dikey olarak orta konuma hizalamak istiyorum, ancak bir şekilde css çalışmıyor. Bootstrap duyarlı tablolarını kullandım. Kodumun neden çalışmadığını ve çalışmasını sağlamak için doğru yöntemin ne olduğunu bilmek istiyorum.

tablo için kod aşağıdadır

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>

Sağladığınız şeye bağlı olarak CSS seçiciniz belirli değildir Bootstrap tarafından tanımlanan CSS kurallarını geçersiz kılmak için yeterince .

Bunu dene:

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

Gelen Boostrap 4 , bu elde edilebilir .align-middle Dikey Hizalama yardımcı sınıfı.

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

Bootstrap 4 itibariyle bu, özel CSS yerine dahil edilen yardımcı programları kullanmak artık çok daha kolay . Td elemanına hizalama orta sınıfını eklemeniz yeterlidir :

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

Benim için <td class="align-middle" >${element.imie}</td>çalışıyor. Bootstrap v4.0.0-beta kullanıyorum.

Aşağıdakiler işe yarıyor gibi görünüyor:

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

Bunun gibi belirli bir masaya da başvurabilirsiniz:

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

SCSS

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

kullanım

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

Deneyin:

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