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

Я пытаюсь отобразить таблицу с 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 '[email protected]'; ?>
            </td>
            <td>
                <?php echo '9999999999'; ?>
            </td>
            <td>
                <?php echo '<img src="'.  base_url('files/images/test.jpg').'">'; ?>
            </td>
        </tr>

        <?php
        }
        ?>           
    </tbody>
</table>

Ответ 1

На основе того, что вы предоставили, ваш селектор CSS не specific достаточно, чтобы переопределить правила CSS, определенные Bootstrap.

Попробуйте следующее:

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

Ответ 2

Появится следующее:

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

Вы можете обратиться к определенной таблице так же:

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

Ответ 3

Для меня <td class="align-middle" >${element.imie}</td> работает. Я использую Bootstrap v4.0.0-beta.