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

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

More Related Contents:

  1. Align text to the bottom of a div
  2. Align vertically using CSS 3
  3. How can I vertically align elements in a div?
  4. Vertically align an image inside a div with responsive height
  5. How to vertically center a container in Bootstrap?
  6. Vertical Text Direction
  7. Child inside parent with min-height: 100% not inheriting height
  8. Select elements by attribute in CSS
  9. How to prevent long words from breaking my div?
  10. Add centered text to the middle of a horizontal rule [duplicate]
  11. How to make a floated div 100% height of its parent?
  12. Disable webkit’s spin buttons on input type=”number”?
  13. How do I force a DIV block to extend to the bottom of a page even if it has no content?
  14. How to make fixed header table inside scrollable div?
  15. CSS: Vertically align div when no fixed size of the div is known
  16. Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
  17. Two divs, one fixed width, the other, the rest
  18. blur of part of Background image with css
  19. Make outer div be automatically the same height as its floating content
  20. Remove “whitespace” between div element
  21. How to center div vertically inside of absolutely positioned parent div
  22. How to align a div to the top of its parent but keeping its inline-block behaviour?
  23. How to get Floating DIVs inside fixed-width DIV to continue horizontally?
  24. CSS text ellipsis when using variable width divs
  25. Vertical align table-cell don’t work with position absolute
  26. How to push a footer to the bottom of page when content is short or missing?
  27. How to add bordered triangle over a div tag
  28. CSS Floating Divs with different height are aligned with space between them
  29. Horizontal scroll in DIV with many small DIV’s inside (no text)
  30. What’s the deal with vertical-align: baseline?

Leave a Comment