Вертикальное выравнивание в таблице начальной загрузки

Question

Я пытаюсь отобразить таблицу с 4 столбцами, одним из которых является изображение. Ниже приводится снимок: -

Я хочу вертикально выровнять текст по центру, но как-то css, похоже, не работает. Я использовал загрузочные таблицы для загрузки. Я хочу знать, почему мой код не работает и что является правильным способом заставить его работать.

Ниже приведен код для таблицы

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

Основываясь на том, что вы предоставили селектор CSS не specific достаточно, чтобы переопределить правила CSS, определенные Bootstrap.

Попробуйте это:

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