Question

我试图在圆形div元素中添加文字：

<div class='roundText'>
        Hi there!
</div>

和css

.roundText {
    width: 60px;
    height:60px;
    border-radius: 50%;
    border-radius: 10px solid #94BBEB;
    background: #ddd;
}

有没有办法做到这一点？ Demo

Answer 1

JSFiddle

取走width并将其替换为：

display:inline-block;

看起来它不合适，因为它位于顶部，但如果你加入风格：

如果你想要，你需要一些javascript：

JSFiddle

您需要删除height css属性，然后获取框的宽度并将其高度设置为相同以使其成为圆形。

var round = document.getElementsByClassName("roundText")[0];
var width = round.offsetWidth;
round.style.height = width+"px";

然后，如果您希望文本位于中心（高度和宽度），则可以添加此样式：

text-align:center;

但是，由于javascript动态调整高度，因此需要添加更多JS来设置行高。

这是：

round.style.lineHeight = width+"px";

JSFiddle

Answer 2

添加div高度的行高，并将text-align设置为center

.roundText {
    width: 60px;
    height:60px;
    border-radius: 50%;
    border-radius: 10px solid #94BBEB;
    background: #ddd;
    line-height : 60px;
    text-align : center;
}

Answer 3

通过提供display:inline-block;＆amp;一些padding你也可以得到这个结果。 DEMO

line-height已添加＆amp; border-radius也在进行调整。

如何基于其中的文本制作舍入div长度？

3 个答案: