vertikale Ausrichtung HTML-Formular

Question

Ich freue mich, dieses Textfeld zu zentrieren und Schaltfläche auf der Seite sowohl vertikal als auch horizontal, aber der folgende Code setzt es nur in der oberen Mitte. Wie kann ich das auf die Seite zentrieren? Es ist, als ignoriere es die Einstellung für die vertikale Ausrichtung.

<div style="text-align:center; vertical-align:middle"> 
    <form action="save_thought.php" method="post"> 
     <input type="text" name="thought"><br> 
     <input type="submit" value="Submit"> 
    </form> 
</div> 

Answer 1

Sie position:absolute DEMO http://jsfiddle.net/kevinPHPkevin/U8dZr/

div#form-wrapper { 
    position:absolute; 
    top:50%; 
    right:0; 
    left:0; 
} 

Answer 2

Sie können diesen Artikel diskutieren letzten css vertikale Zentrierung thechniques lesen: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Answer 3

Sie für diesen gehen können:

HTML

<div id="main" > 
    <form id="frm" action="save_thought.php" method="post"> 
     <input type="text" name="thought"><br> 
     <input type="submit" value="Submit"> 
    </form> 
</div> 

CSS

#main 
{ 
    line-height: 400px; 
    text-align:center; 
    vertical-align:middle; 
} 

#frm 
{ 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 14px; 
} 

Demo Here

Answer 4

CSS wird wahrscheinlich nie, mich zu überraschen zu stoppen. Dhaval Marthak Antwort gegeben war ich tatsächlich in der Lage zu erreichen, was ich wollte, rechtsbündig Etiketten und links ausgerichteten Felder (auf der rechten Seite der Etiketten natürlich):

label { 
    display: block; 
    position:relative; 
    text-align: right; 
    width: 100px; 
    margin: 0 0 5px 0; 
} 
label > input, 
label > select, 
input { 
    position: absolute; 
    left: 120px; 
} 

Die JSfiddle noch mein verbleibendes Problem weist darauf hin, das Feld wird mit der unteren des Etiketts ausgerichtet, wenn das Etikett die Linie bricht. Aber ich bin mir sicher, dass das auch geändert werden kann.

Natürlich wäre es auch schön, wenn der Abstand zwischen Labels und Feldern "dynamisch" basierend auf den Größen der Labels (z. B. in verschiedenen Sprachen) zugewiesen werden könnte, aber ich habe dies noch nirgendwo bisher gesehen. Ich denke, ich werde auf Tische zurückgreifen müssen, wenn ich es wirklich brauche.

Answer 5

Keine der oben genannten Lösungen funktionierte für mich für mein richtiges Projekt, in dem ich vertikal und horizontal eine Form innerhalb eines Divs zentrieren wollte (nicht die gesamte Seite als Referenz), aber ich habe es mit display: flex; Eigenschaft. Zeigen Sie einfach Ihre Eltern div als flex an und verwenden Sie dann die Eigenschaft margin: auto; für Ihr Kind form.

HTML Code:

<div id="centeringDiv" style="display: flex;"> 
    <form id="mainForm" action="save_thought.php" method="post"> 
     <input type="text" name="thought"><br> 
     <input type="submit" value="Submit"> 
    </form> 
</div> 

CSS Code:

In Ihrem Fall würde es so sein

html, body{ 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 

#centeringDiv{ 
    height: 100%; 
    width: 100%; 
    display: flex; 
} 

#mainForm{ 
    margin: auto; 
} 

JSFiddle, in dem man sehen kann, dass die Form es wird sowohl vertikal als auch horizontal auf der ganzen Seite zentriert.