CSS按钮样式

我仍然是新的CSS，对于长篇文章感到抱歉。我有以下代码CSS按钮样式

<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>

我试图居中页面（水平对齐）的中间每一个按钮，我怎么能做到呢？我试着玩填充和边距，但它混乱了我的背景图像。

这里是jsFiddle

来源

2011-09-22 raym0nd

试保证金自动，文本对齐中心，固定宽度，中间部分.. 哦..和摆脱浮动的，而且不要忘了';'

编辑代码..

.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; }

来源

2011-09-22 20:21:24

看起来完美没有图像，但是当我添加图像时，它会变得混乱，谢谢，帮助我得到正确的答案。 – raym0nd

有两件事情可以做

.btn { 
    display: block 
    margin-left: auto; 
    margin-right: auto; 
}

默认的按钮是一个内联元素，所以利润率将没有工作。设置显示为阻止，会使其表现得像一个

div.btnParent { 
    text-align:center 
}

另一种方法是让按钮的包含元素文本对齐中心。这可能不一定总是有效，因为这个容器中可能有更多的内容不想被集中。

来源

2011-09-22 19:37:28

我尝试设置保证金自动，但它没有工作。 – raym0nd

“默认情况下，按钮是一个内联元素” - 嗯，一个按钮通常是一种形式的INPUT标签。但在上面的示例中，它是一个锚标记，它是默认内联的。 –

我无法从您的代码片段中完全看到，但是在其父代中间位置居中，您需要将其边距设置为自动。

margin: auto

，其宽度

width: 100px:

编辑： 此外拔掉所有float:风格你的元素。

来源

2011-09-22 19:38:26

我试着将边距设置为自动但它没有工作。 – raym0nd

看到编辑，删除浮动：左 –

你可以text-align:center divs中的链接（这是块级别的元素）将它们置于它们的容器中，但你必须做一些调整。试试这个：

.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; }

演示 http://jsfiddle.net/andresilich/UtXYY/1/

来源

2011-09-22 20:19:44

看起来完美没有图像，但是当我添加图像时，它变得混乱，谢谢，虽然，帮助我得到正确的答案。 – raym0nd

完美！不要忘记在你的问题上发布正确的答案，这是一个社区运行的论坛，人们寻求帮助，你的解决方案可能会帮助别人。干杯! –

回答

相关问题