Căn dọc trong bảng bootstrap

Tôi đang cố gắng hiển thị một bảng có 4 cột, một trong số đó là hình ảnh. Dưới đây là ảnh chụp nhanh: -

Tôi muốn sắp xếp theo chiều dọc văn bản đến vị trí trung tâm, nhưng bằng cách nào đó, css dường như không hoạt động. Tôi đã sử dụng các bảng đáp ứng bootstrap. Tôi muốn biết lý do tại sao mã của tôi không hoạt động và phương pháp chính xác để làm cho nó hoạt động.

sau đây là mã cho bảng

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>

Dựa trên những gì bạn đã cung cấp, bộ chọn CSS của bạn không đủ cụ thể để ghi đè các quy tắc CSS được xác định bởi Bootstrap.

Thử cái này:

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

Trong Boostrap 4 , điều này có thể đạt được với lớp tiện ích .align-middle Sắp xếp theo chiều dọc .

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

Kể từ Bootstrap 4, điều này giờ đây dễ dàng hơn nhiều khi sử dụng các tiện ích đi kèm thay vì CSS tùy chỉnh. Bạn chỉ cần thêm lớp căn chỉnh giữa vào phần tử 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>

Đối với tôi <td class="align-middle" >${element.imie}</td>làm việc. Tôi đang sử dụng Bootstrap v4.0.0-beta.

Sau đây có vẻ hoạt động:

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

Bạn có thể áp dụng cho một bảng cụ thể cũng như vậy:

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

SCSS

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

sử dụng

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

Thử:

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