2012-02-10 10 views
27

入力を中央に揃えようとしています。 display: blockがCSSに追加されていない場合、通常margin-left:automargin-right: autoは応答しません。私はdisplay: blockを私のCSSに追加しましたが、それでも表示されません。margin-left:autoとmargin-right:入力時にオートが機能しない

私は理解しやすい保つためにJSFiddleを作りました:http://jsfiddle.net/XnKDQ/97/

+0

jsfiddleのリンクが動作していないようです。提案として、アイテムの幅が指定されているのですか?これはこのアプローチにも必要であると私は信じています。 – Paddy

+0

リンクを編集しました。 – Xecure

答えて

55

margin: 0 auto;を機能させるには、display:blockに加えて、widthを指定する必要があります。

+4

ディスプレイを忘れないでください:ブロックしても、表示されると思います:インラインブロックですが、それでも...それは壊れます –

+0

@Clarenceあなたが慎重に質問を読んだら、Xecureが既に 'display:block;'を要素に適用していることが分かります。だから私はそれについて言及しなかった。 – Christoph

+0

私はちょうどあなた自身の答えを読んで言っているというだけで、質問とあなたの答えを比較しても、それは 'display:block'が関連しているという直接的なものではありません。私はあなたがあなたの答えを前置きすると、「表示するだけでなくブロックするために...」と答えています。 –

0

あなたが一緒に三つの形式が中央に整列されるようにしたいですか?それらを1つのdivにラップし、代わりにdivを中心に配置します。

+0

をフォームの中央に揃えようとしています – Xecure

4

私はあなたが私の場合、それはフロートが、私はそんなにあなたがフロートを適用します忘れて残っていなかった要素に

input { 
    display: block; 
    margin: 10px auto 10px auto; 
    padding: 3px; 
    width:60px; 
} 
2

を指定する必要があります

のための解決策が見つかりました:あなたの入力に何をフィールド。

あなたは既にdisplay:blockとmargin:0 autoを持っています。あなたはあまりにも幅を設定する必要があります。動作するはず

例:

input {width:50% !important; margin:0 auto !important; display:block !important; float:none !important} 

問題が解決しない場合は値への重要な追加してみてくださいまたはあなたのスタイルが何か他のもので上書きされていないことを確認してください!。

+0

これは私のために働いたものです。ありがとう! – mikeym

0

さらに、widthとdisplayブロックを指定することに加えて、floatプロパティがnoneに設定されているかどうかをチェックします。

0

あなたの体がパラメータの位置を持っているかどうかをすべて確認することができます。固定に設定されている可能性があります。

関連する問題