CSS Button styling?

Try margin auto, text-align center, fixed width for middle part.. oh ..and get rid of the float, and don't forget the.

Try margin auto, text-align center, fixed width for middle part.. oh ..and get rid of the float, and don't forget the ';' edit code.. . Btn { clear: both; background: url(images/btn_left. Png) no-repeat; padding: 0 0 0 10px; display: block; margin: 5px auto; text-align: center; width: 120px; } .

Btn a { height: 40px; background: url(images/btn_stretch. Png) repeat-x left top; line-height: 40px; padding: 0 10px; color: #fff; font-size: 1em; text-decoration: none; } . Btn span { background: url(images/btn_right.

Png) no-repeat; width: 10px; height: 40px; } . Btn_addtocart { background-color: green; } . Btn_checkout { background-color: red; }.

Looks perfect without the images but when I add the images it gets messed up, thanks though, helped me get the correct answer. – raym0nd Sep 22 at 23:54.

You can text-align:center the links inside the divs (which are block-level elements) to center them inside their containers but you will have to make a couple of tweaks. Try this: . Btn { clear: both; background: url(images/btn_left.

Png) no-repeat; padding: 0 0 0 10px; margin: 5px 0; text-align:center; } . Btn a { height: 40px; background: url(images/btn_stretch. Png) repeat-x left top; line-height: 40px; padding: 10px; color: #fff; font-size: 1em; text-decoration: none; } .

Btn span { background: url(images/btn_right. Png) no-repeat; float: left; width: 10px; height: 40px; display: block; } . Btn_addtocart a { background-color: green; } .

Btn_checkout a { background-color: red; } Demo http://jsfiddle.net/andresilich/UtXYY/1.

Looks perfect without the images but when I add the images it gets messed up, thanks though, helped me get the correct answer. – raym0nd Sep 22 at 23:54 Perfect! Don't forget to post the correct answer to your question, this is a community-run forum where people come for help, your solution might help someone else.

Cheers! – Andres Ilich Sep 23 at 0:45.

A couple things you can do . Btn { display: block margin-left: auto; margin-right: auto; } By default a button is an inline element, so margins will no work. Setting display to block, will make it act like a div.

BtnParent { text-align:center } The other method is to have the button's containing element text-align center. The may not necessarily always work, as there may be more content in this container that you do not want to be centered.

I tried setting the margin to auto, but it didn't work. – raym0nd Sep 22 at 19:40 "By default a button is an inline element" - well, a button is typically a form INPUT tag. But in the example above it's an anchor tag, which, yes, is by default inline.

– DA. Sep 22 at 19:41.

I can't fully see from your code snippet but to centre somthing in the middle of its parent, you need to set its margin to auto. Margin: auto and its width width: 100px: EDIT: Also remove any float: styles you have on the element.

I tried setting the margin to auto but it didn't work. – raym0nd Sep 22 at 19:41 See edit, remove the float: left – Decad Sep 22 at 19:46.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.