CODEWITHSUNDEEP
csshtmltwitter-bootstrap
user3670354
user3670354

Reputation: 73

Align text in middle when there is a image in a row Bootstrap table

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

I have tried adding vertical-align: middle to .table in my CSS, but it doesn't seem to do anything.

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>[email protected]</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>[email protected]</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>[email protected]</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>

Upvotes: 4

Views: 980

Answers (1)

Hulke
Hulke

Reputation: 857

Answer

Twitter Bootstrap have a CSS class called text-center, you can simply use this one, as shown below.

Try this:

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">[email protected]</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">[email protected]</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">[email protected]</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>

As for specificity, declaring a style attribute inside a tag overwrites the style written in your *yourStyle*.css file, so in most cases it is not the best practice to declare the style inside the HTML element, but it is surely acceptable (just added a small note).

Upvotes: 3

Related Questions