Center a button vertically in a table cell using Twitter Bootstrap

Question

I am using Twitter Bootstrap and trying to center a button inside a table cell. I really need it to be 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> 

Pay attention to my JSFiddle . I have tried some table centering tricks that I know of, but no one seems to be working properly. Any ideas? Thanks in advance.

UPDATE: Yes, I tried vertical-align:middle; , and this works if it is built-in, but not if it has the td class. Updated JSFiddle to reflect this.

Final update: I am an idiot and do not check if it is being rewritten 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 add your own class is by adding more specifics to the previous selector:

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

Then add the class to td s:

 <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 to simulate the (old, obsolete) 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> 

Refresh the fiddle

Further

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

In addition, you cannot reference 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 it overloads vertical-align: middle in the .vert class, so you should define this class as td.vert .

Answer 2

A small update for Bootstrap 3.

Bootstrap now has the following style for table cells:

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

The way is to add 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> 

Answer 3

add this to your css

 .table-vcenter td { vertical-align: middle!important; } 

then add the class to the table:

  <table class="table table-hover table-striped table-vcenter"> 

Answer 4

To fix this, I put this class on a web page

 <style> td.vcenter { vertical-align: middle !important; text-align: center !important; } </style> 

and this is in my TemplateField

 <asp:TemplateField ItemStyle-CssClass="vcenter"> 

since the CSS class points directly to the td (tabledata) element and has a value in the main status at the end of each parameter. This will be according to CSS class class bootsraps rules

Hope this helps

Answer 5

Add vertical-align: middle; to the td element containing the button

 <td style="vertical-align:middle;"> <--add this to center vertically <a href="#" class="btn btn-primary"> <i class="icon-check icon-white"></i> </a> </td> 

Answer 6

So why is td set to vertical-align: top; by default? I don't know that yet. I would not dare touch him. Instead, add this to your stylesheet. It changes the buttons in the tables.

 table .btn{ vertical-align: top; }