Align text in the middle when there is an image in the Bootstrap table row

Question

I have a bootstrap table, but I can't get the text to align in the middle because the image extends the line.

I tried adding vertical-align: middlein .tableto my CSS, but it does nothing.

Example

https://jsfiddle.net/DTcHh/#&togetherjs=hy7S1lFDR3

<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p> 
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[e-mail]</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-       server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[e-mail]</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-  server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[e-mail]</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
</tbody>
</table>
</div>

Answer 1

Answer

Twitter Bootstrap has a CSS class called text-center, you can just use it as shown below.

Try the following:

CSS
.mid-align:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em;
    
 }

HTML

<div class="container">
  <h2>Hover Rows</h2>
  <p>The .table-hover class enables a hover state on table rows:</p>
  <table class="table table-hover text-center">
    <thead>
      <tr>
        <th class="text-center">Firstname</th>
        <th class="text-center">Lastname</th>
        <th class="text-center">Email</th>
        <th class="text-center">Image</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="mid-align">John</td>
        <td class="mid-align">Doe</td>
        <td class="mid-align">[e-mail]</td>
        <td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
      </tr>
      <tr>
        <td class="mid-align">Mary</td>
        <td class="mid-align">Moe</td>
        <td class="mid-align">[e-mail]</td>
        <td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
      </tr>
      <tr>
        <td class="mid-align">July</td>
        <td class="mid-align">Dooley</td>
        <td class="mid-align">[e-mail]</td>
        <td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
      </tr>
    </tbody>
  </table>
</div>

Run codeHide result

, style , *yourStyle*.css, HTML, , , ( ).