垂直对齐 bootstrap table

Question

我正在尝试显示具有 4 列的 table，其中一列是图像。下面是截图：-

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

以下是 table

的代码

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 选择器 specific 不足以覆盖 Bootstrap 定义的 CSS 规则。

试试这个：

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

在 Boostrap 4 和 5 中，这可以通过 .align-middle Vertical Alignment 实用程序 class.

实现

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

Answer 2

以下似乎有效：

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

您也可以像这样申请特定的 table：

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

Answer 3

对我来说 <td class="align-middle" >${element.imie}</td> 有效。我正在使用 Bootstrap v4.0.0-beta .

Answer 4

从 Bootstrap 4 开始，使用随附的 utilities 而不是自定义 CSS 现在要容易得多。您只需将 class 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 5

SCSS

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

使用

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

Answer 6

尝试：

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

Answer 7

vetrical-align: middle 由于某种原因对我不起作用（并且正在应用）。我用过这个：

table.vertical-align > tbody > tr > td {
  display: flex;
  align-items: center;
}

垂直对齐 bootstrap table

Vertical align in bootstrap table

html

css

twitter-bootstrap