发表新帖
发表新帖

Centering a button vertically in table cell, using Twitter Bootstrap

前端 未结
关注
6 782
盖世英雄少女心
盖世英雄少女心 2020-12-07 15:42

I\'m using Twitter Bootstrap, and attempting to center a button within a table cell. I only really need it centered vertically.


        

          6条回答        


        
    
                    
  • 
            
            
    
                         
                 青春惊慌失措 
              
              
    
                
                   青春惊慌失措
                                             
                
                
                (楼主)
            
              
                  
    
                2020-12-07 15:50
              
    

            
    
            
    
              
              

    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:
    



    ...

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:
 ... 
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 #ffffdffffd;
}

And is overloading the vertical-align: middle in '.vert' class, so you have to define this class as td.vert.

                                                        

              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              

                          
             
       
          
              

                                       




            

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          
        

          
 
     
 

        
热议问题

            
                 


        
      
      
      

    










  
 ...