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

完美！不要忘記在你的問題上發佈正確的答案，這是一個社區運行的論壇，人們尋求幫助，你的解決方案可能會幫助別人。乾杯! –

回答

相關問題