dikey hiza html formu

Question

Bu metin kutusunu ortalamak ve sayfada dikey ve yatay olarak gönder düğmesini arıyorum, ancak aşağıdaki kod sadece en üst merkeze koyar. Bunu sayfaya nasıl merkezleyebilirim? Dikey hizalama ayarını görmezden geliyor gibi.

<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

kullanabilirsiniz Ayrıca bu gidebilirsiniz position:absolute DEMO http://jsfiddle.net/kevinPHPkevin/U8dZr/

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

Answer 2

Bu makaleyi okuyabilirsiniz ilgili yeni yayınlanmış css dikey merkezleme thechniques: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Answer 3

:

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 muhtemelen beni şaşırtmaktan asla durmayacak. Dhaval Marthak yanıtını Verilen Aslında ne istediğimi doğru hizalanmış etiketleri elde etmeyi başardı ve (elbette etiketlerin sağda) hizalanmış yerleri terk:

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

JSfiddle hala benim kalan problem işaret, saha etiket çizgiyi kırıyorsa etiketin alt ile hizalanacaktır. Ama bunun da değiştirilebileceğine eminim. Etiketlerin ve alanların arasındaki boşluğun etiketlerin boyutlarına (ör. Farklı dillerde) göre daha fazla "dinamik olarak" atanabilmesi de elbette güzel olurdu, ancak bunu şimdiye kadar herhangi bir yerde yapmamıştım. Gerçekten ihtiyacım olursa masalara başvurmam gerekecek.

Answer 5

Yukarıda verilen çözümlerin hiçbiri, benim hem dikey hem de yatay olarak bir formun içinde bir formun (tam sayfa referans olarak alınmamasını) merkezlemek istediğim gerçek proyektim için işe yaramadı, ancak display: flex; özelliğini kullanarak aldım. Ebeveyninizi div'u flex olarak görüntüleyin ve çocuğunuz için form için margin: auto; özelliğini kullanın.

HTML kodu:

<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 kodu: Senin durumunda

, bu gibi olurdu

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

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

#mainForm{ 
    margin: auto; 
} 

JSFiddle hangi görebilirsiniz formu, tam sayfada hem dikey hem de yatay olarak ortalıyor.