[解決済み] ブートストラップテーブルの垂直方向への整列

質問

私は4つの列を持つテーブルを表示しようとしており、そのうちの1つは画像です。 以下はスナップショットです。

テキストを中央の位置に縦に揃えたいのですが、なぜか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>

どのように解決するのですか？

あなたが提供したものに基づいて、あなたのCSSセレクタは、次のとおりではありません。 特定の であり、Bootstrap によって定義された CSS 規則を上書きするには不十分です。

これを試してみてください。

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

で ブーストラップ4と5 で、これは .align-middle 垂直方向のアライメント ユーティリティクラスです。

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