固定幅のdivの内側に動的な幅のボタンを配置するにはどうすればよいですか？

固定ディビジョンの中にラップされた値に応じて、さまざまな幅のボタンまたは通常のボタンを送信しました。とdisplay:block;の後にも、widthプロパティがないため、ボタンがdivの中央に配置されなくなりました。各ボタンの幅を明示的に設定せずに、それらを中央に配置する方法は？固定幅のdivの内側に動的な幅のボタンを配置するにはどうすればよいですか？

input[type="submit"], .button { 
     border: none; 
     outline: none; 
     -moz-border-radius: 10px; 
     -webkit-border-radius: 10px; 
     border-radius: 10px; 
     color: white; 
     display: block; 
     cursor: pointer; 
     margin: 0 auto !important; 
     clear: both; 
     padding: 5px 7px; 
     text-shadow: 0 1px 1px #777; 
     font-weight: bold; 
     font-family: "Century Gothic", Helvetica, sans-serif; 
     font-size: 14px; 
     -moz-box-shadow: 0px 0px 3px #aaa; 
     -webkit-box-shadow: 0px 0px 3px #aaa; 
     box-shadow: 0px 0px 3px #aaa; 
     background: #4797ED; 
}

出典

2012-05-03 Vivek

ボタンはインライン要素です。他の理由でdisplay:blockが必要ですか、またはdiv内のすべてのテキスト/インライン要素を一般的にセンタリングすることに対して何か言及していませんか？

そうでない場合は、代わりにtext-align:centerをdivに割り当て、ボタンからdisplay:blockを削除します。

現在のスタイルではボタンがFF12に配置されています。どのブラウザを使用していますか？編集：IE9（jsfiddle）でも動作します。

出典

2012-05-03 13:42:42 Armatus

感謝。しかし、私は他のテキストも同じdivの中にラップされているので、私はdivに 'text-align：center'を割り当てることはできません。ボタンのCSSを微調整してボタンを中央に配置する方法はありますか？ – Vivek

@Vivekボタンに幅を設定するか、ボタンの周りに追加のラッパー要素を 'text-align：center;'で追加する必要があります。 –

input[type="submit"], .button {} 〜display: inline-block;を設定します。親divをtext-align: center;に設定します。このURL

出典

2012-05-03 13:45:48

http://jsfiddle.net/gSaBj/1/

チェックアウト....あなたの答えのための

出典

2012-05-03 13:50:03

ボタンのCSSに 'width'と' height'を追加しました。しかしここでは、ボタンに固定の「幅」と「高さ」を設定することはできません。幅と高さのプロパティを取り除いてdiv内にボタンをラップし、結果は次のようになります：http：// jsfiddle.net/gSaBj/1/'ボタンは中央に配置されていません。 – Vivek

@vivek：送信ボタンのコンテナの中心を水平と垂直の両方で正しくしたいですか？ –

ボタンを水平に中央に置くだけで私のことができます。 – Vivek

固定幅のdivの内側に動的な幅のボタンを配置するにはどうすればよいですか？

答えて

関連する問題