Как использовать CSS, чтобы окружить число кружком? - PullRequest
Новая
       62

Как использовать CSS, чтобы окружить число кружком?

217 голосов
/ 01 февраля 2011

Я хотел бы заключить число в кружок, как на этом рисунке:

Number in Circle Image

Возможно ли это и как это достигается?

Ответы [ 17 ]

1 голос
/ 04 июня 2013

Что-то вроде того, что я сделал здесь может работать (для чисел от 0 до 99):

CSS: 

.circle {
    border: 0.1em solid grey;
    border-radius: 100%;
    height: 2em;
    width: 2em;
    text-align: center;
}

.circle p {
    margin-top: 0.10em;
    font-size: 1.5em;
    font-weight: bold;
    font-family: sans-serif;
    color: grey;
}

HTML: 

<body>
    <div class="circle"><p>30</p></div>
</body>
1 голос
/ 22 января 2015

Улучшение первого ответа, просто избавьтесь от отступов и добавьте 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;
}
1 голос
/ 09 сентября 2018

Вот мой способ сделать это, используя квадратный метод.плюс, он работает с разными значениями, но вам нужно 2 пролета. 

.circle {
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  padding: 5px;
}
.circle::after {
  content: '';
  display: block;
  padding-bottom: 100%;
  height: 0;
  opacity: 0;
}
.num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.width_holder {
  display: block;
  height: 0;
  overflow: hidden;
}
<div class="circle">
  <span class="width_holder">1</span>
  <span class="num">1</span>
</div>
<div class="circle">
  <span class="width_holder">11</span>
  <span class="num">11</span>
</div>
<div class="circle">
  <span class="width_holder">11111</span>
  <span class="num">11111</span>
</div>
<div class="circle">
  <span class="width_holder">11111111</span>
  <span class="num">11111111</span>
</div>
1 голос
/ 16 июня 2017

HTML ПРИМЕР 

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

}
1 голос
/ 09 сентября 2018

Опоздал на вечеринку, но вот решение для начальной загрузки, которое сработало для меня.Я использую 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>

Вы в основном добавляете bg-dark text-white rounded-circle px-3 py-1 mx-2 h3 классы к своему <span> (или какому-либо другому) элементу, и все готово.

Обратите внимание, что вам может понадобитьсяотрегулируйте поля margin и padding, если ваш контент содержит более одной цифры.

0 голосов
/ 12 декабря 2018

Поздно до вечеринки, но вот решение, которое я выбрал 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>

Не требуется никакой дополнительной работы.Спасибо Джон Ноэль Бруно

0 голосов
/ 02 марта 2016

Ответ Тридцати Точен, но в нем не хватает небольшого смысла.Вам нужно добавить position: относительный , если вы хотите, чтобы центрированное значение в кружке включало также другой диапазон чисел.Например, 123;

HTML:

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

CSS: 

.numberCircle {    

border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
position: relative;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;

font: 32px Arial, sans-serif;
}

, но самым простым решением являетсяиспользовать Bootstrap

<span class="badge" style ="float:right">123</span>

Страница:
...