2013-03-08 11 views
20
<div> 
    <button>Button</button> 
</div> 

div要素にCSSコードを追加したくありません。だから<div style="text-align: center;">は私が欲しいものではありません。私はボタン要素にCSSコードを追加したいだけです。私はJSコードを追加したくありません。 CSS3を使用できます。ありがとうございました!ボタン要素をdiv要素の中央揃えで水平に表示させるにはどうすればよいですか?

答えて

54
button { 
    margin:0 auto; 
    display:block; 
} 

jsFiddle example

+0

あなたは現実の世界でこれを使用している場合、あなたはどこにでも中心にボタン要素を場合を除き、その特異性を高める必要があります。 –

+0

私は質問があります。ブロック要素は、その親要素の全幅を使用します。 http://jsfiddle.net/xmpDD/1を参照してください。なぜボタン要素はdiv要素の全幅を使用しないのですか?ボタン要素の幅は54ピクセルです。私はこれを理解できません。ありがとうございました! – weilou

+0

実際には '0'は必要ですか? 'margin:auto;'はFF、IE、Chromeで動作するようです。 –

2

あなたは<button>display: block; margin: auto;を必要としています。 jsFiddle

+0

私は質問があります。ブロック要素は、その親要素の全幅を使用します。 http://jsfiddle.net/xmpDD/1を参照してください。なぜボタン要素はdiv要素の全幅を使用しないのですか?ボタン要素の幅は54ピクセルです。私はこれを理解できません。ありがとうございました! – weilou

+1

@weilou実際、ブロックレベルの要素は必ずしも親の幅を取得するとは限りません。それらの結合幅、マージン、およびパディングは、親の幅と同じです。それが助けて欲しい! –

+0

ありがとうございました!フィリップあなたのコメントは私を助けます! – weilou

3

その他は、すでにmargin: 0 auto;方法を記載しているが、あなたは説明が欲しかった場合、ブラウザは、あなたの要素が入っているものは何でも、容器内の利用可能なスペースを分割します。

また、重要な指摘して、おそらくよあなたですこれが正しく動作するためには、要素に幅を与える必要もあります。

ので、全体的な:

button { 
    display:inline-block; //Typically a button wouldn't need its own line   
    margin:0 auto; 
    width: 200px; //or whatever 
} 
関連する問題