引导程序表中的垂直对齐

新手上路,请多包涵

我正在尝试显示一个包含 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 '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>

原文由 Piyush Vishwakarma 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 223
2 个回答

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

尝试这个:

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

Boostrap 4 和 5 中,这可以通过 .align-middle 垂直对齐 实用程序类来实现。

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

原文由 hungerstar 发布,翻译遵循 CC BY-SA 4.0 许可协议

从 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 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏