0

I'm still new in CSS, sorry for the long post. I have the following code

<style type="text/css">

.btn {
    float: left;
    clear: both;
    background: url(images/btn_left.png) no-repeat;
    padding: 0 0 0 10px;
    margin: 5px 0;
}
.btn a{
    float: left;
    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;
    float: left;
    width: 10px;
    height: 40px;

}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }

</style>
</head>

<body>

<div class="btn btn_addtocart"><a href="#">Add to Cart</a><span></span></div>

<div class="btn btn_checkout"><a href="#">Check Out</a><span></span></div>

</body>
</html>

I'm trying to center each button in the middle of the page (horizontal alignment), how can I accomplish that? I tried playing with the padding and the margin but it messes my background image.

Here is jsFiddle

Improve this question

4 Answers 4

Reset to default
1

try margin auto, text-align center, fixed width for middle part.. oh ..and get rid of the float, and dont 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; }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

looks perfect without the images but when i add the images it gets messed up, thanks though, helped me get the correct answer.
1

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/

Improve this answer

2 Comments

looks perfect without the images but when i add the images it gets messed up, thanks though, helped me get the correct answer.
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!
0

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.

Improve this answer

1 Comment

"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.
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.