Gamerz Posted April 4, 2010 Share Posted April 4, 2010 How do I center these buttons? It is on the left side now since I did float:left; See, if I change the float:left; to float:none;, then one button will be on top, and the other on button, and it would be all weird. I want it to make it so all the buttons are aligned into one line and centered. <html> <head> <style type="text/css"> /* BUTTONS */ .buttons a, .buttons button{ display:block; float:left; margin:0 7px 0 0; background-color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee; border-left:1px solid #eee; font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size:100%; line-height:130%; text-decoration:none; font-weight:bold; color:#565656; cursor:pointer; padding:5px 10px 6px 7px; /* Links */ } .buttons button{ width:auto; overflow:visible; padding:4px 10px 3px 7px; /* IE6 */ } .buttons button[type]{ padding:5px 10px 5px 7px; /* Firefox */ line-height:17px; /* Safari */ } *:first-child+html button[type]{ padding:4px 10px 3px 7px; /* IE7 */ } .buttons button img, .buttons a img{ margin:0 3px -3px 0 !important; padding:0; border:none; width:16px; height:16px; } </style> </head> <body> <div class="buttons"> <button type="submit" class="positive"> <img src="/images/icons/tick.png" alt=""/> Save </button> <a href="#" class="negative"> <img src="/images/icons/cross.png" alt=""/> Cancel </a> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
haku Posted April 5, 2010 Share Posted April 5, 2010 Remove display:block from from everything. Remove float:left from everything. Add text-align:center to the containing div. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.