垂直对齐div中的输入元素 [英] Align vertically input elements in div

问题描述

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

I've made a search on SO to know how can I align vertically input elements in a div. This div is inside a form. Most of questions, form elements have a lot of <div>'s for each element or a <br> tag for that.

垂直对齐输入元素

垂直对齐我的投入

我制作了小提琴与这个CSS：

I've made a fiddle with this CSS:

.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;
}

输入元素不能垂直对齐并有边距？

Input elements can't be aligned vertically and have margins?

编辑：我不会使用表格或 display：table-cell;

I'll not use table or display: table-cell;

推荐答案

更改此规则：

Change this rule:

.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/

这篇关于垂直对齐div中的输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！