我正在尝试显示一个包含 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 '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>
最佳答案
根据您提供的内容,您的 CSS 选择器不是 specific足以覆盖 Bootstrap 定义的 CSS 规则。
试试这个:
.table > tbody > tr > td {
vertical-align: middle;
}
在 Boostrap 4 和 5 中,这可以通过 .align-middle
Vertical Alignment 实现实用类。
<td class="align-middle">Text</td>
关于html - Bootstrap 表中的垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27747072/