在引导表中垂直对齐 [英] Vertical align in bootstrap table

问题描述

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

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

以下是表的代码

CSS

  img {
 height：150px; 
 width：200px; 
} 
 th，td {
 text-align：center; 
 vertical-align：middle; 
} 
  

HTML

 < table id =newsclass =table table-striped table-responsive> 
< thead> 
< tr> 
< th>名称< / th> 
< th>电子邮件< / th> 
< th>电话< / th> 
< th>照片< / 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（'files / images / test.jpg'）。'>'; ？> 
< / td> 
< / tr> 
 
<？php 
} 
？> 
< / tbody> 
< / table> 
  

解决方案

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

请尝试以下操作：

 。表> tbody> tr> td {
 vertical-align：middle; 
} 
  

I am trying to display a table with 4 columns, one of which is an image. Below is the snapshot:-

I want to vertically align the text to the center position, but somehow the css doesn't seem to work. I have used the bootstrap responsive tables. I want to know why my code doesn't work and whats is the correct method to make it work.

following is the code for the table

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('files/images/test.jpg').'">'; ?>
            </td>
        </tr>

        <?php
        }
        ?>           
    </tbody>
</table>

解决方案

Based on what you have provided your CSS selector is not specific enough to override the CSS rules defined by Bootstrap.

Try this:

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

这篇关于在引导表中垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！