Centering a <div>

[Cineno]

I have a button designed with css that I need to center on the page. Anyone know how what I have to change to do this? Below is the code I'm using:

<div class="buttons">
<a href="/about/client/">
<img src="/images/arrow.png" alt=""/>
Change Password
</a>
</div>
--------------------------
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;
cursorointer;
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;
}

/* Color change */
button:hover, .buttons a:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
.buttons a:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}

-------------------------------------------------

Here is a page demonstrating the code:

http://particletree.com/features/rediscovering-the-button-element/

Anyone got any ideas? Thanks a lot for any help!

 

[Vragabond]

Do you need to center one button or more of them? If it is just one, then you would remove the float property from the button and change the margin to read: [tt]margin: 0 auto;[/tt]. If it is multiple buttons, you're in trouble. You will have to fake it by creating a container that is big enough to hold all the buttons and then center that using the same technique as above.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Olavxxx]

<div style="text-align: center; width: 100%;">
  blah&nbsp;foo
</div>

body {margin:0px; padding:0px;}

#menu {
	position:absolute;
	left:50%;
	width:500px;
	margin-top:50px;
	margin-left:-266px;
	padding:15px;
	border:1px dashed #333;
	background-color:#eee;
	}

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster

 

[Cineno]

Thanks, but these didn't workout too good.

Vragabond, yes I only need it to effect one button. If anyone has a couple minutes, could they try their solution with the code I provided? Whenever I try to change the float and margins, the button's dimensions get messed up. I basically want it to look how it is not, but just be centered on the page.

Thanks again for any help!

 

[Vragabond]

I didn't take a close enough look, sorry. Your button is using the auto width (which comes from floating it). If you need it centered, use my original code (adding [tt]margin: 0 auto;[/tt] to it) and also adding the width.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Olavxxx]

Like the code I pasted, you add an outer div with text-align: center; and width: 100%;

The inner div can be set to whatever width you please, as it will align center.

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster

 

[Cineno]

Thanks for all the help, I got it working right now!