CSS Button styling
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="b开发者_如何转开发tn 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
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; }
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/
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 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.
加载中,请稍侯......
精彩评论