modulo html verticale allineato

Question

Sto cercando di centrare questa casella di testo e di inviare il pulsante sulla pagina sia verticalmente che orizzontalmente ma il codice seguente lo colloca in alto al centro. Come posso centrare questo alla pagina? È come se ignorasse l'impostazione di allineamento verticale.

<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

È possibile utilizzare position:absolute DEMO http://jsfiddle.net/kevinPHPkevin/U8dZr/

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

Answer 2

si può leggere questo articolo che discute recenti css thechniques centratura verticale: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Answer 3

Si può anche andare per questo:

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 non sarà probabilmente mai smettere di stupirmi. Data la risposta di Dhaval Marthak mi è stato effettivamente in grado di realizzare ciò che volevo, etichette allineata a destra e sinistra campi allineati (a destra delle etichette naturalmente):

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

Il JSfiddle punta ancora il mio problema che rimane, il campo si allinea con lo inferiore dell'etichetta se l'etichetta interrompe la linea. Ma sono sicuro che anche questo può essere modificato.

Naturalmente sarebbe anche bello se lo spazio tra etichette e campi potesse essere assegnato più "dinamicamente" in base alle dimensioni delle etichette (ad esempio in lingue diverse) ma non l'ho mai visto finora. Credo che dovrò ricorrere ai tavoli se ne avessi davvero bisogno.

Answer 5

Nessuna delle soluzioni fornite sopra ha funzionato per me per il mio vero progetto in cui volevo centrare sia verticalmente che orizzontalmente un modulo all'interno di un div (non prendendo come riferimento l'intera pagina) ma l'ho ottenuto usando la proprietà display: flex;. Basta mostrare il genitore div come flex e quindi utilizzare la proprietà margin: auto; per il tuo bambino form.

Nel tuo caso, sarebbe come questo:

HTML codice:

<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 codice:

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

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

#mainForm{ 
    margin: auto; 
} 

JSFiddle in cui si può vedere che il forma è centrato sia verticalmente che orizzontalmente nella pagina intera.