Allineamento verticale nella tabella bootstrap

Question

Sto provando a visualizzare una tabella con 4 colonne, una delle quali è un'immagine. Segue l'istantanea: -

Voglio allineare verticalmente il testo alla posizione centrale, ma in qualche modo il css non sembra funzionare. Ho usato le tabelle reattive bootstrap. Voglio sapere perché il mio codice non funziona e qual è il metodo corretto per farlo funzionare.

seguito è riportato il codice per la tavola

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

In base a quello che ci avete fornito il vostro selettore CSS non è specific sufficiente per ignorare le regole CSS definite da Bootstrap.

Prova questo:

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