在与字母高度成比例的跨度中垂直对齐字母

Question

有没有一种方法可以在一个跨度内垂直对齐一个字母，该跨度的样式是随着字母的高度而圆形和增长？

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

有很多例子表明容器的大小是固定的，但当我试图找到一个在不使用固定容器大小的情况下垂直对齐文本的例子（即容器大小与字体大小成比例）时，我就功亏一篑了。

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

我试图让<h1>和<h3>包裹跨度，这是错误的吗？或者有什么技巧可以帮助我完成这一点吗？

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