垂直對齊字母的跨度與字母高度的比例尺

Question

有沒有一種方法可以在字體內垂直對齊一個字母，字母的方式是將字母與字母的高度一起圈出並生長？

我的目標是創建一個單一的風格來完成這一點。獲得圓的大小與字母的高度成比例很容易，但我無法弄清楚如何讓字母垂直對齊。

有很多例子，其中容器的大小是固定的，但當我試圖找到一個不使用固定容器大小（即容器大小成比例的情況下到字體大小）。

我已經嘗試創建另一個跨/ 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