在 header 中将不同的 font-sized 特殊文本居中

Question

我试图将一个较小的“@”符号垂直居中，夹在较大的文本之间，但是“vertical-align：中间；”几乎没有将它提升到与其他文本的基线。

如该屏幕截图所示，在 vertical-align 属性中，@ 符号仍位于文本的基线上。我想这是由于 @ 字符上方包含的额外 space 造成的？下面附上的代码片段大致近似于我的问题。

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>

Answer 1

您可以使用 flex 对齐 h1 内的项目，然后再对齐 .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>

在 header 中将不同的 font-sized 特殊文本居中

Centering different font-sized special text in a header

html

css

centering