css - 如何使用 CSS 围绕内容制作一个圆圈？

Question

像这样

只有这段代码

<span>1</span>

Answer 1

http://jsfiddle.net/MafjT/

你可以使用这个css

span {
    display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
}

因为你想要一个圆，所以你需要为宽度、高度和行高设置相同的值(使文本垂直居中)。您还需要将该值的一半用于边界半径。

无论内容长度如何，此解决方案始终呈现一个圆圈。

---

但是，如果您想要一个随着内容展开的椭圆，那么 http://jsfiddle.net/MafjT/256/

---

根据内容调整大小 - 改进

在这个 https://jsfiddle.net/36m7796q/2/ 您可以看到如何呈现一个对内容长度变化使用react的圆圈。
您甚至可以编辑最后一个圆上的内容，以查看直径如何变化。