web-dev-qa-db-ja.com

div要素のボタン要素を水平方向に中央揃えするにはどうすればよいですか？

CSSをdiv要素に追加したくない（例：<div style="text-align: center;">）。ボタン要素にCSSコードを追加したいだけです。

<div>
    <button>Button</button>
</div>

この場合、ボタンを水平方向に中央揃えするにはどうすればよいですか？

htmlcsscentertext-alignmenttext-align
31
weilou
button {
    margin:0 auto;
    display:block;
}

button {
  margin: 0 auto;
  display: block;
}
<div>
  <button>Button</button>
</div>
80
j08691

他の人はすでにmargin: 0 auto;メソッドですが、説明が必要な場合、ブラウザは要素が入っているコンテナ内の利用可能なスペースを分割します。

また、これを正しく機能させるには、おそらく要素にも幅を与える必要があることを指摘することが重要です。

したがって、全体として：

button {
    display:inline-block; //Typically a button wouldn't need its own line        
    margin:0 auto;
    width: 200px; //or whatever
}
4
Phillip Schmidt

display: block; margin: auto;に<button>が必要です。 jsFiddle

3
dezman