http://www.amrick.com/cssbutton/ ^ Im trying to create a rollover button which is aligned in the middle of the page/outer div - but retain a fluid width. So the button should be as wide as the amount of text there is. The problem is that it doesnt seem to be aligning properly in the middle. Any ideas? I've tried taking out the float:left Code (markup): attribute in a.btnPromo Code (markup): but just messed everything up. thanks in advance! The code I have is as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> .btnPromoMain { margin:0px auto; border:1px solid blue; display:block; overflow:auto; text-align:center; } .btnPromoContainer { margin:0px auto; border:1px solid green; display:block; overflow:auto; text-align:center; } a.btnPromo { background:url('btn_Promo.gif') no-repeat right top; padding:0px 10px 0px 0px; color:#b51318; display:block; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:15px; text-decoration:none; height:52px; clear:both; float:left; } a.btnPromo span { background:url('btn_Promo.gif') no-repeat left top; display:block; line-height:52px; padding:0px 3px 0px 10px; text-align:center; } a.btnPromo:hover { background:url('btn_Promo.gif') no-repeat bottom right; color:#FF0000; } a.btnPromo:hover span{ background:url('btn_Promo.gif') no-repeat bottom left; } </style> </head> <body> <div class="btnPromoMain"> <div class="btnPromoContainer"> <a class="btnPromo" href="#"><span>Click here to subscribe and save 25%</span></a> </div> </div> <p>asdasd </p> <div id="btnPromo"> <a class="btnPromo" href="#"><span>Subscribe now</span></a> </div> <div id="btnPromo"> <a class="btnPromo" href="#"><span>Subscribe now</span></a> </div> </body> </html> Code (markup):
Since it has a fluid width, the margin: 0 auto wouldn't work unless scripting or something always checked the width and added it to the styles. If the width differences are only between pages, static, then you could use a unique identifyer on each page with a different set width. Then, margin: 0 auto; would work. If the widths are changing dynamically, like text being loaded into it from a program or a translation, then you'd likely need either scripting, or if you know the widest possible width and the smallest, you may be able to fake it with a max-width, or with equal sidepadding on the parent container. *edit, looking at the page, your whole button is made up of inline elements anyway, so no margin: 0 auto for you. However, text-align: center might center it for you, if the parent div has a set width (not sure how well that works with % widths, which is what you'd need). Or you could make the button a block, and give the Subscribe button a defining class and give it a width. I see why you would like to just have one piece of code for all the buttons, but if by changing width you simply mean some buttons are always wider, go ahead and say something special for the long one. You may even end up with some generic classes like small, medium, and wide or something, using them over and over again if there are many pages with many different button widths. Try the text-align: center first though.