ページの中央にブートストラップボタンを表示するにはどうすればよいですか？

Question

私のボタンをページの真ん中に配置したいのですが、自分のコードを使用してもボタンが機能しません。

私のコード：

button { 
margin-left: auto; 
margin-right: auto; 
max-width: 100px; 
} 

Answer 1

margin: 0 autoに変更してみてください。

Answer 2

HTML：

<div> 
    <button> 
     Hello 
    </button> 
</div> 

はCSS：

button { 
margin-left: auto; 
margin-right: auto; 
max-width: 100px; 
} 

div { 
text-align: center; 
} 

Answer 3

することができますあなたは、カスタムCSSを介してブートストラップクラスを利用する必要があります。

親に.text-centerを使用してください。

button 
 
{ 
 
    max-width: 100px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="text-center"> 
 
    <button>button</button> 
 
</div>

それともあなただけのボタンに.center-block（またはdisplay: block）を追加し、それを行うにはしたくない場合。

button 
 
{ 
 
    max-width: 100px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <button class="center-block">button</button>

Answer 4

あなたはそれを中央にフレキシボックスを使用することができます。

div { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}