对齐垂直输入元素div

我已经搜索了SO，知道如何垂直对齐输入元素在div中。这个div在一个表单里面。大多数问题，表单元素都有很多<div>的每个元素或<br>标签。对齐垂直输入元素div

我做了这个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;

来源

2016-06-19 learner

删除输入上的“float：left”，只要让我在自然流量中输入 –

@ArnaudGueras它不起作用。你自己看。删除浮动：从输入左侧，他们只是获得空间 – learner

删除'float：left;'并添加'display：list-item;'这里是[更新的jsFiddle]（https://jsfiddle.net/dmb3q6gz/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/

来源

2016-06-20 00:05:53 Johannes

添加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; 
}

来源

2016-06-19 22:49:06

Emre提供的解决方案解决了这个问题：https：//jsfiddle.net/dmb3q6gz/1/ – learner

对齐垂直输入元素div

回答

相关问题