Question

I was thinking that I could do like that:

 <div style='height:100px;vertical-align:middle;border:1px solid red;'>
    <div style='display:inline-block;'>hi there</div>
    <div style='display:inline-block;'>hi there</div>
  </div>

and the divs inside would get aligned vertically in the middle, but for some reason this doesn’t work,
the only way I achieved this atm is doing this (using line-height = to height):

 <div style='height:100px;border:1px solid red;line-height:100px;'>
    <div style='display:inline-block;'>hi there</div>
    <div style='display:inline-block;'>hi there</div>
  </div>

what’s the proper way of doing this ?

Answer 1

That’s a good way to do it. You could alternatively add display: table-cell to the parent div, and in that case the vertical-align: middle would work -> http://tinkerbin.com/mxle0LH4 . Unfortunately the width gets cut out like this. The best way is, yes, to use the line-height. But set it on the parent element, not individually to the children -> http://tinkerbin.com/ssvg8yPX