更新：

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

Answer 2

你的圆圈实际上是一个宽度和高度为100px的正方形，它的角落被修剪了50px的距离，给出了圆形的视觉效果。

现在你的字体有你的字体，但你也提到了100px的行高。现在这就像是，想象一页裁定纸（有要写行的那一行）行高定义了两行之间的大小。在你的情况下，线高是100px，这是整个盒子的高度。如果你将行高降低到50px（这将在你的100px高度框内写入2行），它应该可以工作。

希望这会有所帮助

Answer 3

尝试使用padding并更改line-height和其他一些内容。 DEMO

第二个词不在圈内

3 个答案:

更新：