How to use CSS to surround a number with a circle?

2020-01-23 14:30发布

站内问答 / HTML/CSS
1193 17 2

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?

17条回答
倾城　Initia
2楼-- · 2020-01-23 14:48

You work like with a standard block, that is a square

.circle {
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }

This is feature of CSS 3 and it is not very well suporrted, you can count on firefox and safari for sure. 

<div class="circle"><span>1234</span></div>
查看更多
0人赞 添加讨论(0) 举报
混吃等死
3楼-- · 2020-01-23 14:48

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

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:

<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

查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
4楼-- · 2020-01-23 14:50

Here's a demo on JSFiddle and a snippet:

.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 version of my answer.

查看更多
0人赞 添加讨论(0) 举报
Melony?
5楼-- · 2020-01-23 14:50

Do something like this in your css

 div {
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    text-align: center; margin-top: 4.5em;
  }

Use the paragraph tag to write the text. Hope that helps

查看更多
0人赞 添加讨论(0) 举报
叛逆
6楼-- · 2020-01-23 14:55

HTML EXAMPLE

<h3><span class="numberCircle">1</span> Regiones del Interior</h3>

CODE

    .numberCircle { 

    border-radius:50%;
    width:40px;
    height:40px;
    display:block;
    float:left;
    border:2px solid #000000;
    color:#000000;
    text-align:center;
    margin-right:5px;

}
查看更多
0人赞 添加讨论(0) 举报
▲ chillily
7楼-- · 2020-01-23 14:55

Late to the party, but here is a bootstrap-only solution that has worked for me. I'm using 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 h3 classes to your <span> (or whatever) element and you're done.

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

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)