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?

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

score 162 · Accepted Answer · edited Aug 14 '17 at 15:39

162

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

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.

edited Aug 14 '17 at 15:39

Dysnomian

47
1
8

answered Dec 07 '12 at 21:43

Tomas Ramirez Sarduy

17,294
8
69
85

Thanks for linking to an updated jsfiddle. I wasn't aware when making a class statement in css, and it is table specific, you have to prepend the table element before the class name. In your example, 'td.vcenter' works, but if you change it to just '.vcenter' it doesn't work. – Tim Habersack Dec 07 '12 at 21:48
Thanks =) Grt help without using inline css to fix it! – sk8terboi87 ツ Jun 28 '13 at 12:59
"vert-align" was never documented and does not appear in current Bootstrap master. When answering such questions, please stick to documented behavior. – Dr. Jan-Philip Gehrcke Nov 05 '14 at 20:23
@Jan-PhilipGehrcke: I'm not sure what do you mean, but I'm not saying that `vert-align` is part of Bootstrap, I'm talking about adding a **NEW** class in the main css file – Tomas Ramirez Sarduy Nov 06 '14 at 06:17
Sorry, I really should have read your answer more careful before making such a strong statement. – Dr. Jan-Philip Gehrcke Nov 06 '14 at 10:14

score 43 · Answer 2 · answered Oct 30 '13 at 23:00

43

A little update for Bootstrap 3.

Bootstrap now has the following style for table cells:

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

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

answered Oct 30 '13 at 23:00

Gabriel G. Roy

2,552
2
27
39

1

Is the change officially documented? – user Mar 18 '14 at 18:51

score 15 · Answer 3 · answered Nov 18 '13 at 01:39

15

add this to your css

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

then add to the class to your table:

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

answered Nov 18 '13 at 01:39

Andrew

191
1
2

3

I like this one because you only need to add the class in 1 place, instead of adding it in every `td`. – Hugo Sousa Mar 05 '14 at 16:47

score 2 · Answer 4 · answered Sep 18 '14 at 09:46

To fix this, i put this class on the webpage

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

and this in my TemplateField

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

as the CSS class points directly to the td (tabledata) element and has the !important statment at the end each setting. It will over rule bootsraps CSS class settings.

Hope it helps

score 1 · Answer 5 · answered Dec 07 '12 at 21:35

1

Add vertical-align: middle; to the td element that contains 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>

answered Dec 07 '12 at 21:35

Forty-Two

7,535
2
37
54

1

Here is the strange thing. If I do it inline, it works. If I create a class, and have the vertical-align in that, it doesn't work. I updated the jsfiddle to reflect this. – Tim Habersack Dec 07 '12 at 21:39
2

Looking at it in the debugger, I see the class 'vert' is being overridden by bootstraps css. Inline style take precedence over css, so that's why it works. – Forty-Two Dec 07 '12 at 21:46
@TimHabersack: I have added a class and is working, just use `td.vert` instead `.vert`;) – Tomas Ramirez Sarduy Dec 07 '12 at 21:47

score 0 · Answer 6 · answered Mar 09 '16 at 13:37

0

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

table .btn{
  vertical-align: top;
}

answered Mar 09 '16 at 13:37

Jens Alenius

1,931
2
16
20

Centering a button vertically in table cell, using Twitter Bootstrap

6 Answers6

FOR BOOTSTRAP 3.X:

FOR BOOTSTRAP 2.X

Further

Linked