vertical-align: middle is not working in twitter bootstrap with table rowspan

Question

I'm using Twitter Bootstrap 3.x and I've got a table where a cell has rowspan="2". Here is the table row:

<tr>
    <td rowspan="2" class="critical">
        <a href="#"><span class="glyphicon glyphicon-check white"></span></a>
    </td>
    <td colspan="2" class="col-xs-8 col-md-10">
        <b><a href="#">Title</a></b>
    </td>
</tr>
<tr>
    <td class="col-xs-8 col-md-10">
        <em><small>12/07/2014</small></em> - <a><span class="glyphicon glyphicon-paperclip"></span></a></small>
    </td>
    <td class="col-xs-4 col-md-2">
        <em><small  class="pull-right"><a href="#" class="black">Some name</a></small></em>
    </td>
</tr>

I've been looking trough StackOverflow for these solutions:

• Use Bootstrap 3 vert-align class (which I couldnt find in docs but someone said its added)
• Use line-height instead
• Add CSS vertical-align: middle
• Vertical-align: baseline
• .........

I've tried everything, and looking at Chrome dev console, everytime I add line-height or vertical-align: middle, it appears stroked and isn't applied. Tried also with !important but didnt work either.

I'd like to know if there is something preventing the rowspan cell to be aligned in middle, if it's due to rowspan (which is the most probable issue since the example's people have provide in JSFiddle vertical-align: middle works like a charm).

If there is any extra data needed Ill update the thread. Thanks in advance!

Answer 1

Bootstrap uses selector like (shortened):

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

So it has bigger priority that your single class selector (.vertical-center). So use either more specific selector or !important

.vertical-center {
    vertical-align: middle !important;
}