центрирование кнопки с помощью css

Question

У меня возникли проблемы с центрированием моей кнопки и не знаю, почему она не работает.

вот 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>

Answer 1

На родителя, который содержит кнопку установить

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>

И снимите ширину и высоту с вашей кнопки - упростите ситуацию.

Answer 2

Центрирование встроенных элементов и элементов блока осуществляется по-разному.

В вашем случае вы попытались использовать 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>