html - HTML CSS フォーム - フォームをページの中央に配置する方法は?

Question

フォームを作成し、ページの中央に配置しようとしていますが、うまくいきません。これら2つのCSSを適用しようとしましたが、うまくいきませんでした。

form{margin: 0 auto;}

form{margin: auto;}

また、フォームを div.container に囲み、同じ CSS を適用しようとしましたが、それでも何もしませんでした。

しかし、これは機能します：

{margin: 0 250px 0;}

フォームはこちら

Answer 1

これを実現するには、次の 2 つのことを行う必要があります。

1)inline-blockフォームの表示を に変更しますblock。
2) 幅を修正します (現在は ですauto)。

デモ: http://jsfiddle.net/bMf9M/2/

または、フォームのサイズを固定したくない場合は、使用できますtext-align: center(@donderpiet に感謝)

デモ: http://jsfiddle.net/bMf9M/4/

Answer 2

あなたformにはプロパティdisplay: inline-block;があり、インライン要素のように動作します。したがってtext-align: center;、親に追加して、水平方向の中央に配置する必要があります。このように: http://jsfiddle.net/bMf9M/4/。

text-alignフォームをに設定することを忘れないでくださいleft。そうしないと、テキストが中央揃えになります。

Answer 3

display:blockコンテナの最大幅に合わせてプロパティが自動的にサイズ変更される要素として、コンテナの幅を指定する必要があります。

Answer 4

margin:auto; を使用する場合は、幅を設定する必要があります。