Centering different font-sized special text in a header

Question

I am trying to vertically center a smaller "@" symbol sandwiched between larger text, but "vertical-align: middle;" is barely bringing it up to the baseline with the other text.

As this screengrab shows, with the vertical-align property, the @ sign is still sitting on the baseline of the text. I suppose this is due to the extra space that is included above the @ character? Code snippet attached below roughly approximates my issue.

html{
  font-size: 20px;
}

h1 {
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
  color: orange;
  letter-spacing: -.1rem;
}

h1 .alt {
  color: black;
  font-weight: 400;
  white-space: nowrap;
}

h1 span.mini {
  font-size: 2rem;
  vertical-align: middle;
}

<h1>
  Hello <span class="alt"><span class="mini">@</span> Py</span>
</h1>

score 0 · Accepted Answer · answered Aug 14 '20 at 07:20

you could use flex to align the Items inside the h1 and then inside the .alt-class.

html{
  font-size: 20px;
}

h1 {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  font-size: 3.5rem;
  font-weight: 600;
  color: orange;
  letter-spacing: -.1rem;

}

h1 .alt {
  display: flex;
  align-items: center;
  color: black;
  font-weight: 400;
}

h1 span.mini {
  font-size: 2rem;
}

<h1>
  Hello <span class="alt"><span class="mini">@</span> Py</span>
</h1>

of course you then need to use jsutify-content on the h1 or set margin to the spans to seperate them a bit :) — Warden330, Aug 14 '20 at 07:21

Centering different font-sized special text in a header

1 Answers1