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> Link to comment https://forums.phpfreaks.com/topic/197571-html-how-do-i-center-these-buttons/ 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. Link to comment https://forums.phpfreaks.com/topic/197571-html-how-do-i-center-these-buttons/#findComment-1036961 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.