垂直对齐div中的输入元素答案

【问题标题】：Align vertically input elements in div垂直对齐div中的输入元素
【发布时间】：2016-06-20 08:05:53
【问题描述】：

我在 SO 上进行了搜索，以了解如何垂直对齐 div 中的 input 元素。这个 div 在一个表单中。大多数问题，表单元素都有很多 <div> 的每个元素或 <br> 标记。

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

【问题讨论】：

去掉输入上的float:left，让输入自然流动
@ArnaudGueras 它不起作用。你自己看。删除浮动：从输入中离开，他们只是获得空格
删除float: left;并添加display: list-item;，这里是updated jsFiddle

标签： html css

【解决方案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/

【讨论】：

【解决方案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;
}

【讨论】：