CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Aitor Martin
Aitor Martin

Reputation: 734

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

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:

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!

Upvotes: 6

Views: 23004

Answers (3)

Jaroslav Kuboš
Jaroslav Kuboš

Reputation: 693

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

Upvotes: 14

Aitor Martin
Aitor Martin

Reputation: 734

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.

Upvotes: -3

BuddhistBeast
BuddhistBeast

Reputation: 2670

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

Upvotes: 0

Related Questions