在引导表中垂直alignment

我试图显示一个4列的表格，其中之一是一个图像。 下面是快照： –

我想垂直alignment文本的中心位置，但不知何故，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 '[e-mail]'; ?> </td> <td> <?php echo '9999999999'; ?> </td> <td> <?php echo '<img src="'. base_url('fileshttp://img.dovov.comtest.jpg').'">'; ?> </td> </tr> <?php } ?> </tbody> </table> 

Answer 1

根据你所提供的CSSselect器不足以覆盖由Bootstrap定义的CSS规则。

尝试这个：

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

Answer 2

以下似乎工作：

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

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

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

Answer 3

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