Allineamento verticale nella tabella bootstrap

Sto cercando di visualizzare una tabella con 4 colonne, una delle quali è un'immagine. Di seguito è riportata 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.

di seguito è riportato il codice per la tabella

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>

In base a ciò che hai fornito, il tuo selettore CSS non lo è abbastanza specifico per sovrascrivere le regole CSS definite da Bootstrap.

Prova questo:

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

In Boostrap 4 , questo può essere ottenuto con la classe di utilità .align-middle Allineamento verticale .

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

A partire da Bootstrap 4, ora è molto più semplice utilizzare le utilità incluse al posto del CSS personalizzato. Devi semplicemente aggiungere la classe align-middle all'elemento 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>

Per me <td class="align-middle" >${element.imie}</td>funziona. Sto usando Bootstrap v4.0.0-beta.

Quanto segue sembra funzionare:

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

Puoi anche applicare a una tabella specifica in questo modo:

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

SCSS

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

uso

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

Provare:

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