引导表中的垂直对齐
引导表中的垂直对齐
提问于 2015-01-03 02:51:47
我正在尝试显示一个包含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>回答 7
Stack Overflow用户
回答已采纳
发布于 2015-01-03 02:58:02
根据您提供的内容，您的CSS选择器的specific不足以覆盖Bootstrap定义的CSS规则。
试试这个：
.table > tbody > tr > td {
vertical-align: middle;
}在Boostrap 4和5中，这可以通过.align-middle Vertical Alignment实用程序类来实现。
<td class="align-middle">Text</td>Stack Overflow用户
发布于 2018-03-29 17:49:03
从Bootstrap4开始，使用内含的utilities而不是自定义的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>Stack Overflow用户
发布于 2017-11-01 04:18:15
对我来说，<td class="align-middle" >${element.imie}</td>是可行的。我使用的是Bootstrap v4.0.0-beta。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27747072
复制相关文章
相似问题
腾讯云开发者
