Question

我还是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

Answer 1

您可以text-align:center div中的链接（块级元素）将它们置于容器中心，但您必须进行一些调整。试试这个：

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

Answer 2

尝试自动边距，文本对齐中心，中间部分固定宽度.. 哦..摆脱浮动，不要忘记＆＃39 ;;＆＃39;

修改代码..

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

Answer 3

你可以做的几件事

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

默认情况下，按钮是内联元素，因此边距不起作用。将显示设置为阻止，将使其像

一样

div.btnParent {
    text-align:center
}

另一种方法是让按钮包含元素文本对齐中心。可能不一定总是有效，因为此容器中可能有更多内容您不希望居中。

Answer 4

我无法完全从您的代码段中看到，但要将其内容放在其父级中间，您需要将其边距设置为自动。

margin: auto

及其宽度

width: 100px:

修改同时删除元素上的所有float:样式。

CSS按钮样式

4 个答案: