css vertical align middle doesn't work

Question

.parent{
height:50px;
background:gold;
}

.checka, .radioa, .selecta{
display:inline-block;
vertical-align:middle;
}

<div class='parent'>
<input type='checkbox' class='checka'>
<input type='radio' class='radioa'>

<select class='selecta'>
<option>lorem</option>
<option>lorem</option>
</select>
</div>

What is the problem with the vertical align:middle here? Why child element are not on middle of parent?

@j08691 we don't need height, vertical-align work with the line box (that no one can see) and not the containing block (that everyone can see) ... this will always confuse everyone — Temani Afif, Aug 26 '18 at 19:56

score 1 · Accepted Answer · answered Aug 26 '18 at 19:22

You could also add line-height to center them. Just make sure the height and line-height are equal. See CSS vertical-align, how can I remove the little spacing below the text? for another dynamic example of the effect.

.parent{
height:50px;
line-height: 50px;
background:gold;
}

.checka, .radioa, .selecta{
  display:inline-block;
}

<div class='parent'>
  <input type='checkbox' class='checka'>
  <input type='radio' class='radioa'>

  <select class='selecta'>
    <option>lorem</option>
    <option>lorem</option>
  </select>
</div>

and we still need `vertical-align:middle` ...increasing the line-height will increase the line box and keep the alignment in the middle as expected ... actually they are not exacly in the middle — Temani Afif, Aug 26 '18 at 20:03

IsraGab · Answer 2 · 2018-08-26T19:25:42.237

0

Use flex for that is better Add the following to your parent:

.parent{
height:50px;
background:gold;
display: flex;
align-items: center;
}

and you can remove styles for : .checka, .radioa, .selecta

edited Aug 26 '18 at 19:25

answered Aug 26 '18 at 19:20

IsraGab

4,819
3
27
46

Does this work in IE11 too? – xec Aug 26 '18 at 19:25

css vertical align middle doesn't work

2 Answers2