Vertical align in bootstrap table - html

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 '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>

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>

Answer 3

For me <td class="align-middle" >${element.imie}</td> works. I'm using Bootstrap v4.0.0-beta .

Answer 4

The following appears to work:
table td {
vertical-align: middle !important;
}
You can apply to a specific table as well like so:
#some_table td {
vertical-align: middle !important;
}

Answer 5

SCSS
.table-vcenter {
td,
th {
vertical-align: middle;
}
}
use
<table class="table table-vcenter">
</table>

Answer 6

Try:
.table thead th{
vertical-align:middle;
}

Answer 7

vetrical-align: middle did not work for me for some reason (and it was being applied). I used this:
table.vertical-align > tbody > tr > td {
display: flex;
align-items: center;
}