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

Question

Consider the following code:

HTML:

    Name:
    
         


        
      

Answer 1

a more modern approach would be to use css flex-box.

div {
  height: 50px;
  background: grey;
  display: flex;
  align-items: center
}

  Name:
  

a more complex example... if you have multible elements in the flex flow, you can use align-self to align single elements differently to the specified align...

div {
  display: flex;
  align-items: center
}

* {
  margin: 10px
}

label {
  align-self: flex-start
}

  
  Text
  

its also super easy to center horizontally and vertically:

div {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background: grey;
  display: flex;
  align-items: center;
  justify-content:center
}

  Name: