Vertical align in bootstrap table

Question

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 '[email protected]'; ?>             </td>             <td>                 <?php echo '9999999999'; ?>             </td>             <td>                 <?php echo '<img src="'.  base_url('files/images/test.jpg').'">'; ?>             </td>         </tr>          <?php         }         ?>                </tbody> </table> 

Answer 1

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; } 

In Boostrap 4 and 5, this can be achieved with the .align-middle Vertical Alignment utility class.

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

Answer 2

As of Bootstrap 4 this is now much easier using the included utilities instead of custom CSS. You simply have to add the class align-middle to the 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>