☰

ブートストラップテーブルの垂直方向の配置 質問する

tag-icon • tag-icon html css twitter-bootstrap
ブートストラップテーブルの垂直方向の配置 質問する

4 列のテーブルを表示しようとしています。そのうちの 1 つは画像です。以下はスナップショットです:-ここに画像の説明を入力してください

テキストを垂直に中央揃えにしたいのですが、どうも CSS が機能しないようです。ブートストラップ レスポンシブ テーブルを使用しました。コードが機能しない理由と、機能させるための正しい方法を知りたいです。

以下はテーブルのコードです

CS

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セレクタは特定のBootstrap によって定義された CSS ルールをオーバーライドするには十分です。

これを試して：

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

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

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

おすすめ記事