如何解决在标题中将不同字体大小的特殊文本居中
我正在尝试将较大的文本之间的较小“ @”符号垂直居中,但“ 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。