cssを使用してボタンを中央に配置

Question

ボタンを中央に配置するのに問題があり、なぜ機能しないのか分かりません。

ここにhtmlとCSSがあります。ボタンは

を設定

text-align: center; 

等を含有親で

.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

：

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