使用css居中按鈕

-2

我無法居中我的按鈕，不知道爲什麼它不工作。使用css居中按鈕

這裏是html和CSS。

.button { 
 
    margin:auto; 
 
    display: inline-block; 
 
    height: 100px; 
 
    width: 300px; 
 
    background: #00007f; 
 
    border: 2px solid rgba(192, 192, 192, 0.59); 
 
    border-radius: 50px; 
 
    padding: 15px 20px; 
 
    color: rgba(172, 172, 172, 0.55); 
 
    font: bold 3em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
 
    box-shadow:0 4px 0 #ACACAC; 
 
} 
 

 
a.button { 
 
    text-decoration: none; 
 
}

<a href="blabla.html" class="button" style= "text-align: center"> Start Game</a>

來源

2016-05-01 Ethan Barrett

你爲什麼不** **谷歌呢？這是CSS中最常見的問題，非常基本的東西。 – vsync

在父包含該按鈕設置

text-align: center;

像：

.button { 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
    background: #00007f; 
 
    border: 2px solid rgba(192, 192, 192, 0.59); 
 
    border-radius: 50px; 
 
    padding: 15px 40px; 
 
    color: rgba(172, 172, 172, 0.55); 
 
    font: bold 3em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
 
    box-shadow:0 4px 0 #ACACAC; 
 
} 
 

 
a.button { 
 
    text-decoration: none; 
 
} 
 

 
/* HELPER CLASSES:*/ 
 
.text-center{text-align:center;}

<p class="text-center"> 
 
    <a href="blabla.html" class="button"> Start Game</a> 
 
</p>

並從您的按鈕中刪除寬度和高度 - 將使事情變得更容易。

來源

2016-05-01 14:41:41

居中嵌套元素和塊元素的做法不同。

對於你的情況，你試圖使用margin: auto這是爲了居中塊元素，但你設置按鈕爲inline-block。只需將按鈕更改爲display: block即可完成。

.button { 
 
    margin:auto; 
 
    display: block; 
 
    height: 100px; 
 
    width: 300px; 
 
    background: #00007f; 
 
    border: 2px solid rgba(192, 192, 192, 0.59); 
 
    border-radius: 50px; 
 
    padding: 15px 20px; 
 
    color: rgba(172, 172, 172, 0.55); 
 
    font: bold 3em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
 
    box-shadow:0 4px 0 #ACACAC; 
 
} 
 

 
a.button { 
 
    text-decoration: none; 
 
}

<a href="blabla.html" class="button" style= "text-align: center"> Start Game</a>

來源

2016-05-01 14:45:16 Narxx

使用'block'是個不錯的主意。它迫使你使用固定的寬度，這隻會使設計複雜化。按鈕上下文應該規定寬度。 –

@ RokoC.Buljan該元素已經有固定大小。爲什麼要打呢？如果這是設計，保持該屬性的錨點沒有任何問題。設計可能有我不知道的各種約束（例如，由於設計中的內在一致性，所有按鈕都必須具有固定大小）。 – Narxx

使用css居中按鈕

回答

相關問題