嘗試用CSS居中按鈕。但是，每當我使用display：block和margin：0 auto;我在按鈕文字下獲得文字裝飾。CSS中的中心按鈕

.app-download .btn { 
    display: block; 
    margin: 0 auto; 
    text-decoration: none; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); 
    font-family: "News Cycle", sans-serif; 
    font-size: 1.5em; 
    border-radius: 5px; 
    color: #ffffff; 
    background: steelblue; 
    width: 400px; 
    padding: 20px 0; 

} 
.app-download .btn:hover { 
    background: tomato; 
    text-decoration: none; 
}

我的HTML

<div class="app-download"> 
    <div class="container"> 
      <a href="#"><button type="button" class="btn">Download for iPhone</button></a> 
      <a href="#"><button type="button" class="btn">Download for Android</button></a> 
    </div> 
</div>

我怎麼能中心的按鈕沒有得到一個文本的裝飾之下？

來源

2014-01-08 Ryan Salmons

*無*獲取文本裝飾？ – Cilan

沒有你的HTML，我們只能猜測你在做什麼。但這裏有一個可能的解決方案：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style media="all"> 
.app-download {text-align: center;} 
.app-download .btn { 
    display: inline-block; 
    text-decoration: none; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); 
    font-family: "News Cycle", sans-serif; 
    font-size: 1.5em; 
    border-radius: 5px; 
    color: #ffffff; 
    background: steelblue; 
    width: 400px; 
    text-align:center; 
    padding: 20px 0; 

} 
.app-download .btn:hover { 
    background: tomato; 
    text-decoration: none; 
} 

</style> 
</head> 
<body> 

<div class="app-download"> 
    <a href="" class="btn">Button</a> 
</div> 

</body> 
</html>

來源

2014-01-08 02:41:21

這裏是我在JSFIDDLE中遇到的問題http://jsfiddle.net/#&togetherjs=EmpcAxzNcJ –

我沒有看到問題。你能解釋什麼是錯的嗎？ –

我想水平居中在div中的按鈕。每當我添加顯示和邊距時，它會添加文字裝飾（下劃線） –

添加到您的CSS

a 
{ 
    text-decoration:none; 
}

Working Fiddle

來源

2014-01-08 03:32:03

CSS中的中心按鈕

回答

Working Fiddle

相關問題