CODEWITHSUNDEEP
htmlcssvertical-alignment
Finn LeSueur
Finn LeSueur

Reputation: 529

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!

Upvotes: 0

Views: 3703

Answers (1)

jmore009
jmore009

Reputation: 12923

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

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

FIDDLE

Upvotes: 2

Related Questions