對齊垂直輸入元素div

Question

我已經搜索了SO，知道如何垂直對齊輸入元素在div中。這個div在一個表單裏面。大多數問題，表單元素都有很多<div>的每個元素或<br>標籤。

Vertically aligning input elements

Vertical align with my inputs

我做了這個CSS一個fiddle：

.fillform{ 
position: relative; 
width: 100%; 
height: 33%; 
bottom: 0; 
background: rgba(225, 43, 50, 1.0); 
} 

.fillform div{ 
position: absolute; 
float: left; 
width: 100%; 
height: 200px; 
box-sizing: border-box; 
border: 2px solid rgba(0,0, 255, 1.0); 
} 

.fillform div input{ 
float: left; 
display: inline-block; 
border: 2px solid rgba(255, 0, 0, 1.0); 
box-sizing: border-box; 
vertical-align: middle; 
} 

輸入元素不能垂直對齊，並有利潤？

編輯：我不會用表或display: table-cell;

Answer 1

將此規則更改爲：

.fillform div input{ 
    display: block; 
    border: 2px solid rgba(255, 0, 0, 1.0); 
    box-sizing: border-box; 
    vertical-align: middle; 
} 

https://jsfiddle.net/m9ev8etj/

Answer 2

添加position: relative;top: 50%;margin: 1px;您.fillform div input類，並嘗試這個辦法：

.fillform{ 
    width: 100%; 
    height: 33%; 
    bottom: 0; 
    background: rgba(225, 43, 50, 1.0); 
} 

.fillform div{ 
    float: left; 
    width: 100%; 
    height: 200px; 
    box-sizing: border-box; 
    border: 2px solid rgba(0,0, 255, 1.0); 
} 

.fillform div input{ 
    float: left; 
    border: 2px solid rgba(255, 0, 0, 1.0); 
    box-sizing: border-box; 
    position: relative; 
    top: 50%; 
    margin: 1px; 
}