vertical-align：middle在twitter bootstrap中没有表行rowpan

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;
}

Answer 2

In regards to the following HTML you would like to vertically align -

HTML

<tr>
    <td rowspan="2" class="critical"> <a href="#" class="aa"><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>

Add the following CSS to allow for the element within the td tag to become vertically aligned. I have named the class aa and stuck it inside of the anchor tag in the first td tag.

CSS

.aa {
    vertical-align:middle;
}

DEMO JSFiddle

Answer 3

Okay so I managed to fix it.

I changed the code to

<td rowspan="2" class="critical">
    <div class="input-group-addon">
        <a href="#"><span class="glyphicon glyphicon-check white"></span></a>
    </div>
</td>

and I could finnally manage to vertically align it. i can't provide more accurate reasons for why this works, but if you are having this problem with bootstrap you can aftwerwards use abit of CSS to resize the TD to your necessities.