Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: How to align vertically a "label" and "input" inside a "div"?

Consider the following code:

HTML:

<div>     <label for='name'>Name:</label>     <input type='text' id='name' /> </div> 

CSS:

div {     height: 50px;     border: 1px solid blue; } 

What would be the easiest method to put the label and the input in the middle of the div (vertically) ?

like image 977
Misha Moroshko Avatar asked Dec 17 '10 00:12

Misha Moroshko


People also ask

How do I align text vertically inside a div?

The CSS just sizes the div, vertically center aligns the span by setting the div's line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.

How do you align inputs and labels?

We specify the margin-bottom of our <div> element. Then, we set the display of the <label> element to "inline-block" and give a fixed width. After that, set the text-align property to "right", and the labels will be aligned with the inputs on the right side.

How do you vertically align labels in CSS?

The CSS tag vertical-align does not work but there is a work-around of sorts...for some reason padding-top seems to work. So you can set a value for the padding-top and then adjust the height of your label to get the text where you want it to be.

How do I vertically align two items in a div?

To align two <div> elements vertically in Bootstrap 3, you can try using the CSS Flexible Box Layout. In the example below, we display the needed row as a flex container box with the CSS display property and then, align the flex-items (columns) vertically with the align-items property.


1 Answers

div {      display: table-cell;      vertical-align: middle;      height: 50px;      border: 1px solid red;  }
<div>      <label for='name'>Name:</label>      <input type='text' id='name' />  </div>

The advantages of this method is that you can change the height of the div, change the height of the text field and change the font size and everything will always stay in the middle.

http://jsfiddle.net/53ALd/6/

like image 90
Marc-François Avatar answered Sep 28 '22 06:09

Marc-François