Căn chỉnh dọc trong bảng bootstrap

Question

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

Tôi muốn căn chỉnh 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 bảng đáp ứng bootstrap. Tôi muốn biết tại sao mã của tôi không hoạt động và whats là phương pháp chính xác để làm cho nó hoạt động.

Sau đây là đoạn code 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> 

Answer 1

Dựa trên những gì bạn đã cung cấp bộ chọn CSS của bạn không phải là specific đủ để ghi đè các quy tắc CSS được định nghĩa bởi Bootstrap.

Hãy thử điều này:

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