垂直對齊html表格

Question

我正在尋找居中該文本框並在頁面上垂直和水平提交按鈕，但下面的代碼只是將它放在頂部中心。我怎樣才能將這個中心到頁面？這就像忽略了垂直對齊設置。

<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

您可以使用position:absolute DEMO http://jsfiddle.net/kevinPHPkevin/U8dZr/

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

Answer 2

您可以閱讀這篇文章，討論近期的CSS垂直居中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可能永遠不會停止給我帶來驚喜。鑑於Dhaval Marthak的回答實際上，我是能夠達到我想要的東西，右對齊的標籤和左對齊的領域（上當然標籤的右側）：

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還指出我剩下的問題，現場將與標籤的底部對齊，如果標籤破壞線條。但我相信也可以修改。

當然，如果標籤和字段之間的空間可以基於標籤的大小（例如以不同的語言）被更「動態地」分配，但迄今爲止我還沒有在任何地方看到過。我想如果我真的需要的話，我將不得不訴諸表格。

Answer 5

上面提供的解決方案都不適用於我的真正項目，我想在垂直和水平方向上居中放置一個窗體（不參考整個頁面），但我使用display: flex;屬性。只需將您的父母div顯示爲flex，然後將margin: auto;用於您的孩子form。

在你的情況，這將是這樣的：

HTML代碼：

<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代碼：

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

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

#mainForm{ 
    margin: auto; 
} 

JSFiddle中，你可以看到，形成它在整頁中垂直和水平居中。