css - 第二个字出圈

Question

最初，我想把文字放到这个圈子里。最大字符数为 20。

我想将字体大小设置为24px左右，圆的宽度和高度为100px；

然而，第二个词落在了圆圈之外。

有人可以帮忙吗？ http://codepen.io/yumikohey/pen/ocFtJ

这是我的代码。

<div class="blog_circle">
   Channel Buzz  
</div>

.blog_circle{
    width:100px;
    height: 100px;
    border-radius:50px;
    font-size:24px;
    color:#000;
    line-height:100px;
    text-align:center;
    background:#45C2B3;
    margin-left: 50px;
    margin-top: 50px;
}

另一方面，如何使字体大小的变化取决于用户的输入？

Answer 1

为什么你有一个 line-height:100px？它太高了，这就是导致它落在圆圈之外的原因......

将其更改为 40px.......这是 demo

更新:

将 display:table-cell; 添加到您的样式中。这将使文本在您的 div 中垂直居中。当您实际检查元素并查看 div 时，文本垂直位于 div 的中心。更新 FIDDLE