Alignement vertical dans la table bootstrap

J'essaye d'afficher un tableau avec 4 colonnes, dont une est une image. Ci-dessous, l'instantané: -

Je veux aligner verticalement le texte sur la position centrale, mais d'une manière ou d'une autre, le CSS ne semble pas fonctionner. J'ai utilisé les tables réactives bootstrap. Je veux savoir pourquoi mon code ne fonctionne pas et quelle est la bonne méthode pour le faire fonctionner.

voici le code de la table

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>

Sur la base de ce que vous avez fourni, votre sélecteur CSS n'est pas suffisamment spécifique pour remplacer les règles CSS définies par Bootstrap.

Essaye ça:

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

Dans Boostrap 4 , cela peut être réalisé avec la classe utilitaire .align-middle Alignement vertical .

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

Depuis Bootstrap 4, cela est maintenant beaucoup plus facile en utilisant les utilitaires inclus au lieu du CSS personnalisé. Vous devez simplement ajouter la classe align-middle à l'élément 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>

Pour moi ça <td class="align-middle" >${element.imie}</td>marche. J'utilise Bootstrap v4.0.0-beta.

Ce qui suit semble fonctionner:

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

Vous pouvez également postuler à une table spécifique comme ceci:

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

SCSS

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

utilisation

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

Essayer:

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