css - 在随字母高度缩放的跨度内垂直对齐字母

Question

有没有一种方法可以垂直对齐跨度内的字母，该跨度的样式是围绕字母并随着字母的高度而增长的？

我的目标是创建一个单一的样式来实现这一点。让圆圈的大小与字母的高度成比例很容易，但我不知道如何让字母垂直对齐。

有很多容器大小固定的例子，但当我试图找到一个垂直对齐文本而不使用固定容器大小(即容器大小与字体大小)。

我尝试创建另一个 span/div 来将字母包裹在圆圈内并使用边距和填充，但我不知道如何在不扭曲圆圈形状的情况下做到这一点。

我是否通过尝试让 <h1> 错误地处理了这个问题？和 <h3>包装 spans 还是有什么技巧可以帮助我实现这一点？

HTML

<h1>
    <span class="circle">A</span>
    <span class="circle">B</span>
    <span class="circle">C</span>
</h1>

<h3>
    <span class="circle">A</span>
    <span class="circle">B</span>
    <span class="circle">C</span>
</h3>

CSS

.circle {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    border: 1px solid black;
    border-radius: 50%;
    background-color: lightblue;
    text-align: center;
}

JSFiddle

Answer 1

也使用这行代码:

line-height:1.8em;

检查您的 Demo Fiddle