Align `button-group` horizontal in the centre of the column div - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button layout

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button layout

Description

Align `button-group` horizontal in the centre of the column div

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/foundation/4.1.6/css/foundation.min.css"> 
  <style id="compiled-css" type="text/css">

ul.button-group>li{
   float: none;
   display: inline-block;
}
ul.button-group{
   text-align: center;
}


      </style> 
 </head> <!--from w ww  . j  a v a2s .  c om-->
 <body> 
  <div class="row"> 
   <div class="large-12 columns"> 
    <ul class="button-group "> 
     <li> <a class="tiny secondary button" href="#">3 months</a> </li> 
     <li> <a class="tiny secondary button" href="#">6 months</a> </li> 
     <li> <a class="tiny secondary button" href="#">9 months</a> </li> 
     <li> <a class="tiny secondary button" href="#">1 year</a> </li> 
     <li> <a class="tiny secondary button" href="#">2 years</a> </li> 
    </ul> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials