Bootstrap 引导表中的垂直对齐

7z5jn7bk 于 2023-05-04 发布在 Bootstrap

关注(0)|答案(7)|浏览(185)

我试图显示一个有4列的表，其中一列是图像。下面是快照：-x1c 0d1x
我想垂直对齐文本的中心位置，但不知何故，css似乎不工作。我使用了bootstrap响应表。我想知道为什么我的代码不工作，什么是正确的方法，使其工作。
以下是表的代码

CSS

img {
    height: 150px;
    width: 200px;
}
th, td {
    text-align: center;
    vertical-align: middle;
}

超文本标记语言

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/27747072/vertical-align-in-bootstrap-table

7条答案

按热度按时间

db2dz4w81#

根据您提供的内容，您的CSS选择器不足以覆盖Bootstrap定义的CSS规则。
试试这个：

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

在Boostrap 4和5中，可以使用.align-middleVertical Alignment实用程序类来实现。

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

赞(0）回复(0）举报 2023-05-04

x0fgdtte2#

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

赞(0）回复(0）举报 2023-05-04

bjp0bcyl3#

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

赞(0）回复(0）举报 2023-05-04

mwyxok5s4#

以下内容似乎可以正常工作：

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

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

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

赞(0）回复(0）举报 2023-05-04

wlp8pajw5#

SCSS

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

使用

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

赞(0）回复(0）举报 2023-05-04

55ooxyrt6#

尝试：

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

赞(0）回复(0）举报 2023-05-04

vybvopom7#

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

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

赞(0）回复(0）举报 2023-05-04

我来回答

Bootstrap 引导表中的垂直对齐

7条答案

相关问题

热门标签

最新问答