The parent div set to ‘vertical-align: top;’ and the child div set to ‘vertical-align: middle’ but the child is still aligning to the top. How do I make the child align to the middle relative to the height of the parent.
#a {
display: inline-block;
height: 1em;
width: 20px;
position: relative;
vertical-align: top;
background-color: rgba(100,100,100,0.2);
}
#b {
display: inline-block;
height: 2em;
width: 5px;
background-color: blue;
}<div id="a">
<div id="b">
</div>
</div>