biểu mẫu html thẳng đứng

Question

Tôi đang tìm cách căn giữa hộp văn bản này và nút gửi trên trang cả theo chiều dọc và chiều ngang nhưng mã sau chỉ đặt nó ở giữa trên cùng. Làm thế nào tôi có thể tập trung vào trang này? Nó giống như nó bỏ qua các thiết lập thẳng đứng.

<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

Bạn có thể sử dụng position:absolute DEMO http://jsfiddle.net/kevinPHPkevin/U8dZr/

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

Answer 2

Bạn có thể đọc bài viết này thảo luận gần đây css thechniques định tâm dọc: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Answer 3

Bạn cũng có thể đi cho việc này:

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 có thể sẽ không bao giờ dừng lại để tôi ngạc nhiên. Với câu trả lời Dhaval Marthak của tôi đã thực sự có thể đạt được những gì tôi muốn, nhãn chỉnh lề phải và trái các lĩnh vực liên kết (trên bên phải của nhãn dĩ nhiên):

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

Các JSfiddle vẫn chỉ ra vấn đề còn lại của mình, lĩnh vực này sẽ căn chỉnh với dưới cùng của nhãn nếu nhãn phá vỡ dòng. Nhưng tôi chắc chắn rằng có thể được sửa đổi là tốt. Tất nhiên nó cũng sẽ tốt nếu không gian giữa các nhãn và các trường có thể được gán nhiều hơn "động" dựa trên kích thước của nhãn (ví dụ: trong các ngôn ngữ khác nhau) nhưng tôi chưa thấy điều này được thực hiện ở bất cứ nơi nào cho đến nay. Tôi đoán tôi sẽ phải nghỉ mát để bàn nếu tôi thực sự cần nó.

Answer 5

Không có giải pháp nào được cung cấp ở trên làm việc cho tôi vì thực tế tôi muốn căn giữa theo chiều dọc và chiều ngang một biểu mẫu bên trong div (không tham chiếu toàn bộ trang) nhưng tôi nhận nó bằng thuộc tính display: flex;. Chỉ hiển thị phụ huynh div là flex và sau đó sử dụng thuộc tính margin: auto; cho con của bạn form.

Trong trường hợp của bạn, nó sẽ là như thế này:

HTML mã:

<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 mã:

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

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

#mainForm{ 
    margin: auto; 
} 

JSFiddle trong đó bạn có thể thấy rằng hình thức nó đang được tập trung cả theo chiều dọc và chiều ngang trong trang đầy đủ.