引导表中的垂直对齐

Posted 2023-03-05

【中文标题】引导表中的垂直对齐

【英文标题】：Vertical align in bootstrap table

【发布时间】：2015-03-01 01:47:55

【问题描述】：

我正在尝试显示一个包含 4 列的表格，其中一列是图像。 下面是截图：-

我想将文本垂直对齐到中心位置，但不知何故，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 '[e-mail]'; ?>
            </td>
            <td>
                <?php echo '9999999999'; ?>
            </td>
            <td>
                <?php echo '<img src="'.  base_url('files/images/test.jpg').'">'; ?>
            </td>
        </tr>

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

【参考方案1】：

根据您提供的 CSS 选择器，specific 不足以覆盖 Bootstrap 定义的 CSS 规则。

试试这个：

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

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

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

【讨论】：

@BarryFranklin 向该表添加一个类<table class="table vertical-align">，并稍微增加使用该类table.vertical-align > tbody > tr > td 的选择器的特异性。您也可以使用.table.vertical-alilgn > tbody > tr > td ，尽管它比第一个选项具有更高的特异性。如果可以的话，我总是尝试尽可能少地增加我的 CSS 选择器的特异性。请注意，第一个选项是选择具有.vertical-align 的表格元素，而第二个选项是选择具有.table AND .vertical-align 类的元素。

【参考方案2】：

以下似乎有效：

table td 
  vertical-align: middle !important;

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

#some_table td 
  vertical-align: middle !important;

【讨论】：

!important 太过分了，增加了不必要的特异性。

【参考方案3】：

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

【参考方案4】：

从 Bootstrap 4 开始，现在使用包含的 utilities 而不是自定义 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>

【参考方案5】：

SCSS

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

使用

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

【参考方案6】：

试试：

.table thead th
   vertical-align:middle;

【参考方案7】：

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

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