Centering a button vertically in table cell, using Twitter Bootstrap

Question

I'm using Twitter Bootstrap, and attempting to center a button within a table cell. I only really need it centered vertically.

<table class="table table-bordered table-condensed">   <tbody>     <tr>       <td><a href="#" class="btn btn-primary"><i class="icon-check icon-white"></i></a></td>       <td><a href="#">Todo Item One</a><br /><span class="label label-success">One thing</span></td>     </tr>   </tbody> </table> 

Please see my JSFiddle for the problem. I've tried several table centering tricks I know about, but none seem to work properly. Any ideas? Thanks in advance.

UPDATE: Yes, I've tried vertical-align:middle;, and that works if it's inline, but not if it's in a class the td has. Updated the JSFiddle to reflect this.

Final Update: I'm an idiot, and didn't check to see if it was being overwritten by bootstrap.css

Answer 1

FOR BOOTSTRAP 3.X:

Bootstrap now has the following style for table cells:

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

The way to go is to add your own class, adding more specificity to the previous selector:

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

And then add the class to your tds:

<tr>     <td class="vert-aligned"></td>     ... </tr> 

FOR BOOTSTRAP 2.X

There is no way to do this with Bootstrap.

When used in table cells, vertical-align does what most people expect it to, which is to mimic the (old, deprecated) valign attribute. In a modern, standards-compliant browser, the following three code snippets do the same thing:

<td valign="middle"> <!-- but you shouldn't ever use valign --> </td> <td style="vertical-align:middle"> ... </td> <div style="display:table-cell; vertical-align:middle"> ... </div> 

Check your fiddle updated

Further

• vertical-align: middle with Bootstrap 2
• Understanding vertical-align
• Vertical alignment of elements in a div

Also, you can't refer to the td class using .vert because Bootstrap already has this class:

.table td {    padding: 8px;    line-height: 20px;    text-align: left;    vertical-align: top; // The problem!    border-top: 1px solid #dddddd; } 

And is overloading the vertical-align: middle in '.vert' class, so you have to define this class as td.vert.

Answer 2

A little update for Bootstrap 3.

Bootstrap now has the following style for table cells:

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

The way to go is to add a your own class, with the same selector:

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

And then add it to your tds

<td class="vert-align"></td>