在随字母高度缩放的跨度中垂直对齐字母答案

【问题标题】：Vertically align letter in span that scales with the height of the letter在随字母高度缩放的跨度中垂直对齐字母
【发布时间】：2014-11-28 17:23:18
【问题描述】：

有没有办法在一个跨度内垂直对齐一个字母，它的样式会随着字母的高度旋转和增长？

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

有很多容器大小固定的示例，但是当我尝试找到一个不使用固定容器大小（即容器大小与字体大小）。

我尝试创建另一个 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

【问题讨论】：

喜欢这个jsfiddle.net/j08691/sy60euf6?
太好了！我喜欢@danko 的 line-height 修复的简单性，所以我会接受这一点，但我也喜欢这个。你是怎么想到 .3em 和 .5em 的？
可能重复stackoverflow.com/questions/4801181/…
我的问题和建议的副本之间的区别在于，我希望我的圆圈和对齐方式可以随不同的字体大小进行缩放。建议的欺骗具有固定的大小。

标签： css

【解决方案1】：

也使用这行代码：

line-height:1.8em;

检查您的Demo Fiddle

【讨论】：