Vertikale Ausrichtung in der Bootstrap-Tabelle

Ich versuche, eine Tabelle mit 4 Spalten anzuzeigen, von denen eine ein Bild ist. Unten ist der Schnappschuss: -

Ich möchte den Text vertikal an der Mittelposition ausrichten, aber irgendwie scheint das CSS nicht zu funktionieren. Ich habe die auf Bootstrap reagierenden Tabellen verwendet. Ich möchte wissen, warum mein Code nicht funktioniert und was die richtige Methode ist, damit er funktioniert.

Es folgt der Code für die Tabelle

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>

Basierend auf Ihren Angaben ist Ihr CSS-Selektor nicht spezifisch genug, um die von Bootstrap definierten CSS-Regeln zu überschreiben.

Versuche dies:

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

In Boostrap 4 kann dies mit der Dienstprogrammklasse .align-middle Vertikale Ausrichtung erreicht werden .

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

Ab Bootstrap 4 ist dies jetzt mit den enthaltenen Dienstprogrammen anstelle von benutzerdefiniertem CSS viel einfacher . Sie müssen lediglich die Klasse align-middle zum td-Element hinzufügen :

<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>

Für mich <td class="align-middle" >${element.imie}</td>funktioniert. Ich verwende Bootstrap v4.0.0-beta.

Folgendes scheint zu funktionieren:

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

Sie können sich auch wie folgt auf eine bestimmte Tabelle bewerben:

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

SCSS

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

verwenden

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

Versuchen:

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