自举表中的垂直对齐

我试图显示一个有4列的表，其中一列是一个图像。 下面是快照:-< img src = “ https://i.stack.imgur.com/Rm1CC.jpg”alt = “ enter image description here”>

我想垂直对齐文本的中心位置，但不知何故，CSS 似乎不工作。 我已经使用了启动响应表。 我想知道为什么我的代码不工作，什么是正确的方法使它工作。

下面是表的代码

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>
209524 次浏览
小开
最佳答案

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

试试这个:

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

在 四号和五号胸带中，这可以通过 .align-middle 垂直对齐实用程序类来实现。

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

下列措施似乎有效:

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

您也可以像下面这样应用到特定的表:

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

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

小开

从 Bootstrap 4开始，使用包含的 公用事业代替自定义 CSS 更加容易。您只需将类 中间对齐添加到 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>
小开

SCSS

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

使用

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

试试:

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

由于某些原因，vetrical-align: middle不能为我工作(它正在被应用)。我使用了以下方法:

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

提交答案