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

垂直对齐以字母高度缩放的跨度字母

1 个答案: