我想把一个数字围成一个圆,就像下图所示:
这可能吗?它是如何实现的?
我想把一个数字围成一个圆,就像下图所示:
这可能吗?它是如何实现的?
当前回答
你用一个标准的方块,那是一个正方形
这是css3的特性,它不是很受支持,你可以依靠firefox和safari。
.circle { 宽度:10 em; 高度:10 em; -webkit-border-radius: 5 em; -moz-border-radius: 5 em; 边框:1px纯黑色; } < div class = "圆" > < span > 1234 < / span > < / div >
其他回答
下面是JSFiddle的演示和代码片段:
.numberCircle { 这个特性:50%; 宽度:36 px; 高度:36 px; 填充:8 px; 背景:# fff; 边框:2px实体#666; 颜色:# 666; text-align:中心; 字体:32px Arial, sans-serif; } < div class = " numberCircle " > < / div > 30
我的答案是一个很好的起点,其他一些答案为不同的情况提供了灵活性。如果你关心IE8,看看我回答的旧版本。
如果是20或更低,你可以直接使用unicode字符①②…⑳
http://www.alanwood.net/unicode/enclosed_alphanumerics.html
我很惊讶没有人使用更容易理解的flex,所以我把我的答案放在这里:
要创建一个圆,请确保宽等于高 为了适应圆圈中数字的字体大小,请使用em而不是px 要将数字居中,请使用flex和justify-content: center;对齐项目:中心; 如果数字增加(例如>1000),则同时增加宽度和高度
这里有一个例子:
.circled-number { color: #666; border: 2px solid #666; border-radius: 50%; font-size: 1rem; display: flex; justify-content: center; align-items: center; width: 2em; height: 2em; } .circled-number--big { color: #666; border: 2px solid #666; border-radius: 50%; font-size: 1rem; display: flex; justify-content: center; align-items: center; width: 4em; height: 4em; } <div class="circled-number"> 30 </div> <div class="circled-number--big"> 3000000 </div>
改进第一个答案,只需去除填充,并添加line-height和vertical-align:
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
line-height: 36px;
vertical-align:middle;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
虽然迟到了,但下面是我用https://codepen.io/jnbruno/pen/vNpPpW给出的解决方案
不需要额外的工作。 谢谢约翰·诺埃尔·布鲁诺
.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; } <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>