learner
learner

Reputation: 1321

Align vertically input elements in div

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.

Vertically aligning input elements

Vertical align with my inputs

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?

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

Upvotes: 1

Views: 1797

Answers (2)

Johannes
Johannes

Reputation: 67799

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/

Upvotes: 2

Vahid Farahmandian
Vahid Farahmandian

Reputation: 6564

Add position: relative;top: 50%;margin: 1px; to your .fillform div input class and try this:

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

Upvotes: 0

Related Questions