Bootstrap表格中的垂直对齐

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 '[e-mail]'; ?>
            </td>
            <td>
                <?php echo '9999999999'; ?>
            </td>
            <td>
                <?php echo '<img src="'.  base_url('files/images/test.jpg').'">'; ?>
            </td>
        </tr>

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

- Piyush Vishwakarma

Answer 1

根据您提供的内容，您的CSS选择器不够具体以覆盖Bootstrap定义的CSS规则。

尝试这样做：

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

在 Boostrap 4 和 5 中，可以通过使用 .align-middle Vertical Alignment 实用类来实现垂直对齐。

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

- hungerstar

---

将类添加到该表格中， <table class="table vertical-align">，并使用该类别略微增加选择器的特异性， table.vertical-align > tbody > tr > td {}。您也可以使用 .table.vertical-alilgn > tbody > tr > td {}，但其特异性比第一选项高。如果可能，我总是尽量少增加CSS选择器的特异性。请注意，第一选项选择具有.vertical-align的表元素，而第二选项选择具有.table和.vertical-align类的元素。 - hungerstar

Answer 2

自从 Bootstrap 4 推出后，使用内置的 工具类 而非自定义 CSS 就可以更轻松地实现此功能。只需将类 align-middle 添加到 td 元素中即可：

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

- Andreas Bergström

Answer 3

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

- Paweł Gil

Answer 4

以下方法看起来可行：

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

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

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

- Vasco

---

!important 是过度使用，增加了比必要的更多的具体性。 - hungerstar

Answer 5

SCSS

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

使用

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

- Syukur Zay

Answer 6

vertical-align: middle 对我来说不起作用（尽管已经应用了）。我使用了这个：

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

- madav

Answer 7

尝试：

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

- Andrew Kozlov