Vertical alignment of the html form

Question

I want to center this text box and send the button on the page both vertically and horizontally, but the following code just puts it in the top center. How can I focus this on the page? This is like ignoring the vertical alignment setting.

<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

You can use position:absolute DEMO http://jsfiddle.net/kevinPHPkevin/U8dZr/

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

Answer 2

You can also take advantage of this:

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 3

You can read this article discussing the latest css vertical centering technologies: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Answer 4

CSS probably never ceases to amaze me. Given the answer of Dhaval Martak, I was really able to achieve what I wanted, correctly aligned labels and left-aligned fields (to the right of the labels):

 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 still points to my remaining problem, the field aligns with the bottom of the label if the label breaks the line. But I am sure that it can also be amended.

Of course, it would be nice if the space between labels and fields could be assigned more “dynamically” based on label sizes (for example, in different languages), but I have not done so yet. I think I will have to resort to tables if I really need it.

Answer 5

None of the solutions above helped me for my real project, in which I would like to center both vertically and horizontally the shape inside the div (not taking into account the full page), but I got it using the display: flex; property display: flex; . Just show the parent div as flex , and then use the margin: auto; property margin: auto; for your baby form .

In your case, it will be like this:

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:

 html, body{ height: 100%; width: 100%; margin: 0; } #centeringDiv{ height: 100%; width: 100%; display: flex; } #mainForm{ margin: auto; } 

JSFiddle , in which you can see the shape that it centers both vertically and horizontally on a full page.

Answer 6

You must change the width from "100%" to "px", and then you must make the field: "auto".

Then the shape will be centered horizontally.