Search code examples
htmlcssvertical-alignment

Vertical Align Two Spans (Different font size)

I have been trying but cannot for the life of me make two spans with different font sizes vertically align. I have tried to use vertical-align on both the wrapper div and the spans, but to no avail.

I have considered Flexbox, but am not sure.

.nav-toggle {
    background-color: #2c3e50;
    color: white;
    vertical-align: middle;
}

.nav-toggle:hover {
    color: #d35400;
}

.triple-bar {
    font-size: 3em;
    margin: 0 0.25em 0 0.5em;
}

.menu-text {
    line-height: 3em;
    vertical-align: middle;
}
<div class="nav-toggle">
    <span class="triple-bar">&#8801;</span>
    <span class="menu-text">Menu</span>
</div>

Cheers, Finn!

Solution

  • add vertical-align: bottom to .triple-bar:

    .triple-bar {
  font-size: 3em;
  margin: 0 0.25em 0 0.5em;
  vertical-align: bottom;
}

    FIDDLE