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    lt table class  table table-bordered table-condensed  gt     lt tbody gt       lt tr gt         lt td gt  lt a href     class  btn btn-primary  gt  lt i class  icon-check icon-white  gt  lt  i gt  lt  a gt  lt  td gt         lt td gt  lt a href     gt Todo Item One lt  a gt  lt br   gt  lt span class  label label-success  gt One thing lt  span gt  lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    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  Thanks in advance   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

User · Answer

A little update for Bootstrap 3   Bootstrap now has the following style for table cells    table tbody gt tr gt td       vertical-align  top      The way to go is to add a your own class  with the same selector    table tbody gt tr gt td vert-align       vertical-align  middle      And then add it to your tds   lt td class  vert-align  gt  lt  td gt

User · Answer

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

User · Answer

FOR BOOTSTRAP 3 X   Bootstrap now has the following style for table cells    table tbody  gt  tr  gt  td      vertical-align  top      The way to go is to add your own class  adding more specificity to the previous selector    table tbody  gt  tr  gt  td vert-aligned       vertical-align  middle      And then add the class to your tds    lt tr gt       lt td class  vert-aligned  gt  lt  td gt           lt  tr gt    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    lt td valign  middle  gt   lt  -- but you shouldn t ever use valign -- gt   lt  td gt   lt td style  vertical-align middle  gt       lt  td gt   lt div style  display table-cell  vertical-align middle  gt       lt  div gt    Check your fiddle updated  Further   vertical-align  middle with Bootstrap 2 Understanding vertical-align Vertical alignment of elements in a div   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

User · Answer

To fix this  i put this class on the webpage   lt style gt                              td vcenter           vertical-align  middle  important          text-align  center  important         lt  style gt    and this in my TemplateField   lt asp TemplateField ItemStyle-CssClass  vcenter  gt    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

User · Answer

Add vertical-align  middle  to the td element that contains the button   lt td style  vertical-align middle   gt    lt --add this to center vertically    lt a href     class  btn btn-primary  gt       lt i class  icon-check icon-white  gt  lt  i gt     lt  a gt   lt  td gt

User · Answer

add this to your css   table-vcenter td      vertical-align  middle important      then add to the class to your table            lt table class  table table-hover table-striped table-vcenter  gt

[css] Centering a button vertically in table cell, using Twitter Bootstrap

Examples related to css

Examples related to twitter-bootstrap