Menu icon Foundation
buttons to be centred

Hi,

For the code below, I need the 3 buttons to be centered in its column. Please help. Appreciate your help.

<div class="row">
      
	   <div class="small-4 small-centered column">
        <a href="javascript: submitform('create')" class="button small radius">Create</a>
	   </div>
	   
	   <div class="small-4 small-centered column">
        <a href="javascript: submitform('cancel')" class="button small radius">Cancel</a>
	   </div>
	   
	   <div class="small-4 small-centered column">
        <a href="javascript: submitform('confirm')" class="button small radius">Confirm</a>
	   </div>	   
	  
	  </div>
            

         

html

Hi,

For the code below, I need the 3 buttons to be centered in its column. Please help. Appreciate your help.

<div class="row">
      
	   <div class="small-4 small-centered column">
        <a href="javascript: submitform('create')" class="button small radius">Create</a>
	   </div>
	   
	   <div class="small-4 small-centered column">
        <a href="javascript: submitform('cancel')" class="button small radius">Cancel</a>
	   </div>
	   
	   <div class="small-4 small-centered column">
        <a href="javascript: submitform('confirm')" class="button small radius">Confirm</a>
	   </div>	   
	  
	  </div>
            

         
Lee Honeycutt about 5 years ago

Prakash,

You could use Foundation's Block Grid to achieve this:

http://foundation.zurb.com/docs/components/block_grid.html

-- Lee

Preston McPeak about 5 years ago

Does it work if you give the buttons a margin auto?

margin-right: auto;
margin-left: auto;