Html 如何使用 CSS 用圆圈包围数字？

Question

提问by Pentium10

I would like to surround a number in a circle like in this image:

我想将一个数字围在一个圆圈中，如下图所示：

Number in Circle Image

圆形图像中的数字

Is this possible and how is it achieved?

这是可能的，它是如何实现的？

Answer 1

回答by thirtydot

Here's a demo on JSFiddleand a snippet:

这是一个关于 JSFiddle的演示和一个片段：

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

<div class="numberCircle">30</div>

My answer is a good starting point, some of the other answers provide flexibility for different situations. If you care about IE8, look at the old versionof my answer.

我的答案是一个很好的起点，其他一些答案为不同情况提供了灵活性。如果你关心IE8，看看我的回答的旧版本。

Answer 2

回答by Mike

The problem with most of the other answers here is you need to tweak the size of the outer container so that it is the perfect size based on the font size and number of characters to be displayed. If you are mixing 1 digit numbers and 4 digit numbers, it won't work. If the ratio between the font size and the circle size isn't perfect, you'll either end up with an oval or a small number vertically aligned at the top of a large circle. This should work fine for any amount of text and any size circle. Just set the widthand line-heightto the same value:

此处大多数其他答案的问题是您需要根据字体大小和要显示的字符数调整外部容器的大小，使其成为完美的大小。如果您将 1 位数字和 4 位数字混合使用，它将不起作用。如果字体大小和圆圈大小之间的比例不完美，你最终会得到一个椭圆或一个小数字，垂直对齐在一个大圆圈的顶部。这应该适用于任何数量的文本和任何大小的圆圈。只需将width和line-height设置为相同的值：

.numberCircle {
    width: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    font-size: 32px;
    border: 2px solid #666;
}

<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>

If you need to make the content longer or shorter, all you need to do is adjust the width of the container for a better fit.

如果您需要使内容更长或更短，您需要做的就是调整容器的宽度以更好地适应。

See it on JSFiddle.

在 JSFiddle 上查看。

Answer 3

回答by Tom N

If it's 20 and lower, you can just use the unicode characters ① ② ... ?

如果是 20 及以下，您可以只使用 unicode 字符 ① ② ... ？

http://www.alanwood.net/unicode/enclosed_alphanumerics.html

Answer 4

回答by ryachza

For circle sizes varying based on the content this should work:

对于根据内容而变化的圆圈大小，这应该有效：

http://jsfiddle.net/nzsnw55s/

<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>

.numberCircle {
  display:inline-block;
  line-height:0px;

  border-radius:50%;
  border:2px solid;

  font-size:32px;
}

.numberCircle span {
  display:inline-block;

  padding-top:50%;
  padding-bottom:50%;

  margin-left:8px;
  margin-right:8px;
}

It relies on the width of the content plus the margin-'s to determine the radius, then extends the height to match using the padding-'s. The margin-'s would need to be adjusted based on the font-size.

它依赖于内容的宽度加上margin-'s 来确定半径，然后使用padding-'s扩展高度以匹配。的margin-需要根据字体大小进行调整。

Update to remove inner element:

更新以删除内部元素：

<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>

<style type="text/css">
.numberCircle {
    display:inline-block;

    border-radius:50%;
    border:2px solid;

    font-size:32px;
}

.numberCircle:before,
.numberCircle:after {
    content:'0B';
    display:inline-block;
    line-height:0px;

    padding-top:50%;
    padding-bottom:50%;
}

.numberCircle:before {
    padding-left:8px;
}
.numberCircle:after {
    padding-right:8px;
}
</style>

Uses pseudo-elements to force the height. Need the zero width space for vertical alignment. Moved the line-height:0pxfrom the outer to the pseudo so that it is at least visible when degrading for IE8.

使用伪元素来强制高度。需要零宽度空间进行垂直对齐。line-height:0px从外部移动到伪，以便它至少在为 IE8 降级时可见。

Answer 5

回答by Navid

the easiest way is using bootstrap and badge class

最简单的方法是使用引导程序和徽章类

 <span class="badge">1</span>

Answer 6

回答by Wolfgang Ziegler

This version does not rely on hard-coded, fixed values but sizes relative to the font-sizeof the div.

此版本不依赖于硬编码的，固定的值，但尺寸相对font-size的div。

http://jsfiddle.net/qod1vstv/

CSS:

CSS：

.numberCircle {
    font: 32px Arial, sans-serif;

    width: 2em;
    height: 2em;
    box-sizing: initial;

    background: #fff;
    border: 0.1em solid #666;
    color: #666;
    text-align: center;
    border-radius: 50%;    

    line-height: 2em;
    box-sizing: content-box;   
}

HTML:

HTML：

<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>

Answer 7

回答by kayahr

You can use the border-radius for this:

您可以为此使用边界半径：

<html>
  <head>
    <style type="text/css">

    .round
    {
        -moz-border-radius: 15px;
        border-radius: 15px;
        padding: 5px;
        border: 1px solid #000;
    }

  </style>
  </head>  
  <body>   
    <span class="round">30</span>
  </body>
</html>

Play with the border radius and the padding values until you are satisfied with the result.

使用边框半径和填充值，直到您对结果满意为止。

But this won't work in all browsers. I guess IE still does not support rounded corners.

但这不适用于所有浏览器。我猜 IE 仍然不支持圆角。

Answer 8

回答by bearinthewoods

My solution here - this easily allows for different sizes and colors and ties into a CMS for editorial control. For IE degrading to squares.

我的解决方案 - 这很容易允许不同的尺寸和颜色，并与 CMS 联系起来进行编辑控制。对于 IE 降级为正方形。

HTML:

<div class="circular-label label-outer label-size-large label-color-pink">
    <div class="label-inner"> 
        <span>Fashion & Beauty</span>
    </div>
</div>

CSS:

.circular-label {
    overflow: hidden;
    z-index: 100;
    vertical-align: middle;
    font-size: 11px;
    -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.label-inner {
    width: 85%;
    height: 85%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px dotted white;
    vertical-align: middle;
    margin: auto;
    top: 5%;
    position: relative;
    overflow: hidden;
}
.label-inner > span {
    display: table;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    position: absolute;
    margin: auto;
    margin-top: 38%;
    font-family:'ProximaNovaLtSemibold';
    font-size: 13px;
    line-height: 1.0em;
}
.circular-label.label-size-large {
    width: 110px;
    height: 110px;
    -moz-border-radius: 55px;
    -webkit-border-radius: 55px;
    border-radius: 55px;
    margin-top:-55px;
}
.circular-label.label-size-med {
    width: 76px;
    height: 76px;
    -moz-border-radius: 38px;
    -webkit-border-radius: 38px;
    border-radius: 38px;
    margin-top:-38px;
}
.circular-label.label-size-med .label-inner > span {
    margin-top: 33%;
}
.circular-label.label-size-small {
    width: 66px;
    height: 66px;
    -moz-border-radius: 33px;
    -webkit-border-radius: 33px;
    border-radius: 33px;
    margin-top:-33px;
}

It's not too difficult to see how to do this. The bigger question is whether it is possible to make the dimensions of the circle scale to content.

不难看出如何做到这一点。更大的问题是是否有可能使圆形的尺寸缩放到内容。

Currently I don't think it is possible. Anyone?

目前我认为这是不可能的。任何人？

Answer 9

回答by dotNET

Late to the party, but here is a bootstrap-only solution that has worked for me. I'm using Bootstrap 4:

聚会迟到了，但这是一个对我有用的仅引导程序解决方案。我正在使用 Bootstrap 4：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>

You basically add bg-dark text-white rounded-circle px-3 py-1 mx-2 h3classes to your <span>(or whatever) element and you're done.

您基本上将bg-dark text-white rounded-circle px-3 py-1 mx-2 h3类添加到您的<span>（或其他）元素中，您就完成了。

Note that you might need to adjust margin and padding classes if your content has more than one digits.

请注意，如果您的内容超过一位，您可能需要调整边距和填充类。

Answer 10

回答by Dt23

Late to the party but here's the solution I went with https://codepen.io/jnbruno/pen/vNpPpW

聚会迟到了，但这是我使用的解决方案https://codepen.io/jnbruno/pen/vNpPpW

Css:

css：

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

html:

html：

<div class="panel-body">
                            <h4>Normal Circle Buttons</h4>
                            <button type="button" class="btn btn-default btn-circle"><i class="fa fa-check"></i>
                            </button>
                            <button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i>
                            </button>
</div>

Required no extra work. Thanks John Noel Bruno

不需要额外的工作。感谢约翰·诺埃尔·布鲁诺

Html 如何使用 CSS 用圆圈包围数字？

提问by Pentium10

回答by thirtydot

回答by Mike

回答by Tom N

回答by ryachza

回答by Navid

回答by Wolfgang Ziegler

回答by kayahr

回答by bearinthewoods

回答by dotNET

回答by Dt23

相关推荐

最近更新

标签

Html 如何使用 CSS 用圆圈包围数字？

提问by Pentium10

回答by thirtydot

回答by Mike

回答by Tom N

回答by ryachza

回答by Navid

回答by Wolfgang Ziegler

回答by kayahr

回答by bearinthewoods

回答by dotNET

回答by Dt23

相关推荐

Html 从 <object> 嵌入中删除滚动条

窗口最小化时保留 HTML 页面的位置

Html CORS - 引入预检请求的动机是什么？

Html html5：使用页眉或页脚标签两次？

相关推荐

最近更新

标签