在标题中将不同字体大小的特殊文本居中

问题描述

我正在尝试将较大的文本之间的较小“ @”符号垂直居中，但“ vertical-align：middle;”；几乎没有将其与其他文字一起提高到基线。

如该屏幕截图所示，具有vertical-align属性，@符号仍位于文本的基线上。我想这是由于@字符上方包含多余的空格吗？下面随附的代码段大致与我的问题差不多。

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>

解决方法

您可以使用flex在h1内然后在.alt类内对齐项目。

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>

centering html