Simple vertical alignment of inline-blocks

by gryzzly

HTML

<div class=container>
     <div class=icon>⬆</div>
     <div class=instruction>Lorem Ipsum Dolor Sit Amet</div>
</div>

CSS

.container {
    border:1px dashed #000;
    text-align:center;
}
.icon,
.instruction {
    display:inline-block;
    vertical-align:middle;
}
.icon {
    height:2.4rem;
    line-height:2.4rem;
}
.instruction {
    font-weight:.8rem;
    line-height:1.4rem;
}