在引导表中垂直对齐

Question

我试图显示一个包含4列的表,其中一列是图像.以下是快照: -

我想垂直对齐文本到中心位置,但不知何故css似乎不起作用.我使用了bootstrap响应表.我想知道为什么我的代码不起作用,什么是使它工作的正确方法.

以下是该表的代码

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>

Answer 1

根据您提供的内容,您的CSS选择器不够具体,无法覆盖Bootstrap定义的CSS规则.

试试这个:

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

Answer 2

从Bootstrap 4开始,现在使用包含的实用程序而不是自定义CSS 更容易.您只需要将类align-middle添加到td-element:

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

Answer 3

对我而言<td class="align-middle" >${element.imie}</td>.我正在使用Bootstrap v4.0.0-beta.

Answer 4

以下似乎有效：

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

您也可以像这样应用到特定的表：

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