如何使用CSS围绕内容圈？ [英] How to make a circle around content using CSS?

问题描述

像这样

只有此代码

<span>1</span>

推荐答案

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;
}

因为你想要一个圆，你需要设置相同的值为width，高度和行高（将文本垂直居中）。您还需要将该值的一半用于边框半径。

Because you want a circle, you need to set the same value to width, height and line-height (to center the text vertically). You also need to use half of that value to the border radius.

此解决方案总是呈现一个圆形，而不考虑内容长度。

This solution always renders a circle, regardless of content length.

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

But, if you want an ellipse that expands with the content, then http://jsfiddle.net/MafjT/256/

https://jsfiddle.net/36m7796q/2/ ，您可以了解如何呈现圈子对内容长度的变化做出反应。

您甚至可以编辑最后一个圆圈上的内容，以了解直径的变化。

In this https://jsfiddle.net/36m7796q/2/ you can see how to render a circle that reacts to a change in content length.
You can even edit the content on the last circle, to see how the diameter changes.

这篇关于如何使用CSS围绕内容圈？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！