css - 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.