HTML CSS Formular - How, um die Mitte der form auf der Seite?

Machte ich ein Formular, und ich versuche, um es auf die Seite, aber es funktioniert nicht. Ich habe versucht, die Anwendung dieser 2 CSS aber es hat nicht funktioniert.

form{margin: 0 auto;}

form{margin: auto;}

Ich habe auch versucht, umschließt das Formular in div.container und Anwendung derselben CSS, aber immer noch nichts.

Aber das funktioniert:

{margin: 0 250px 0;}

Form hier

InformationsquelleAutor Sourabh | 2013-03-27
  1. 4

    Müssen Sie zwei Dinge tun, um dies zu erreichen:

    1) Ändern inline-block auf dem Formular angezeigt werden block.

    2) Fixieren Sie die Breite (den Sie derzeit haben, es als auto).

    Demo: http://jsfiddle.net/bMf9M/2/


    Oder wenn Sie nicht möchten, dass zu beheben, die form, die Größe, die Sie verwenden können text-align: center (Danke @donderpiet)

    Demo: http://jsfiddle.net/bMf9M/4/

    • Aber was, wenn Sie möchten, dass das Formular zur automatischen Anpassung der Breite? Es ist einfacher zu verlassen, die inline-block und fügen Sie text-align: center zu seinen Eltern.
    • Nicht width: auto " legt Breite minimale Breite benötigt?
    • Dann würden Sie am Ende mit allen die form zentriert, etwa so jsfiddle.net/bMf9M/5
    • Tut es, aber es ist nicht behoben und um zu zentrieren, müssen Sie beheben die Breite.
    • Sie müssen text-align: left auf die form finden Sie in diesem: jsfiddle.net/bMf9M/4
    • Eine Lösung, die ich gefunden habe: in form display: table;.und alles funktioniert gut.
    • Abhängig von Ihrem Publikum, display: table funktioniert nicht im IE7 und unten, IE8 erfordert eine DocType -
    • Mit der Methode in meinem edit bedeutet, dass Sie nicht auf die form zu fixieren-Größe (Dank donderpiet)
    • Ok ich werde text-align: center; im body und text-align: left; im form (Siehe, dies ist der Grund, warum Leute hassen es, IE). Vielen Dank für Ihre Hilfe mattytommo und donderpiet.

    InformationsquelleAutor mattytommo
  2. 0

    Müssen Sie die Breite der container als Elemente mit display:block Eigenschaft automatisch die Größe der maximalen Breite der container.

    • Was, wenn Sie wollen, dass Ihr container zur automatischen Anpassung der Breite>?
    • Dann verwenden Sie relativen Einheiten, wie %.
    InformationsquelleAutor thatidiotguy
  3. 0

    Müssen Sie eine Breite, wenn Sie wie zu verwenden margin:auto;

    • Nicht auf Elemente, die eine display: inline-block; Eigenschaft.
    InformationsquelleAutor Christian Ziemer
  4. 0

    Ihre form hat eine Eigenschaft display: inline-block;, wodurch es verhält sich wie ein inline-element. So müssen Sie text-align: center; zu seinen Eltern, um es Mitte horizontal. Wie diese: http://jsfiddle.net/bMf9M/4/.

    Vergessen Sie nicht, legen Sie das Formular text-align zu left, sonst wird es zentriert ausgerichteten text.

    • Es auch zentriert den text in zu ich habe, um es zurückzusetzen, um text-align: left; gibt es eine bessere Möglichkeit?
    • Ich denke nicht so, nicht während der Verwendung der inline-block Wert.
    InformationsquelleAutor Piet van Dongen
Schreibe einen Kommentar