Vertical alignment demo with h1

by audetwebdesign

HTML

<h1>
	<span class="icon">Icon</span>
	Some Text related to the icon 
</h1>

CSS

h1 {
    background: red;
    font-size: 40px;
    line-height: 80px;
}
.icon {
    background: aqua;
    border: 1px solid blue;
    border-radius: 3px;
    padding: 0px 4px;
    width: auto;
    display: inline-block;
    font-size: 20px;
    line-height: 40px;
    vertical-align: 7px;
}