Как использовать CSS для окружения числа кругом?

Question

Как использовать CSS для окружения числа кругом?

Я хотел бы окружить ряд по кругу, как на этом изображении:

Number in Circle Image

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

195

css css-shapes html

автор: Stewartside

16 ответов

автор: thirtydot · Accepted Answer · 2018-02-16 22:43:41

здесь демо на JSFiddle и фрагмент:

.numberCircle {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  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>

чтобы сделать эту работу в IE8 и старше, вы должны скачать и использовать С ПОМОЩЬЮ CSS3 ПИРОГ. Моя демо-версия выше не будет работать в IE8, но это только потому, что jsFiddle не размещает PIE.htc.

автор: Mike · Accepted Answer · 2017-11-23 01:07:58

проблема с большинством других ответов здесь вам нужно настроить размер внешнего контейнера так, что это идеальный размер в зависимости от размера шрифта и количества символов на экране. Если вы смешиваете 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>

Если вам нужно сделать контент, длиннее или короче, все, что вам нужно сделать, это отрегулировать ширину контейнера для лучшей подгонки.

смотрите его на JSFiddle.

автор: Tom N · Accepted Answer · 2012-08-24 07:15:57

Если это 20 и ниже, вы можете просто использовать символы юникода① ②... ⑳

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

автор: ryachza · Accepted Answer · 2016-02-16 19:00:51

для размера окружности определяется в зависимости от содержания это должно работать:

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

он зависит от ширины содержимого плюс margin- ' s, чтобы определить радиус, а затем расширяет высоту, чтобы соответствовать с помощью padding-. The margin-'ы должны быть скорректированы на основе размера шрифта.

обновление для удаления внутреннего элемента:

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

использует псевдо-элементы для принуждения высота. Нужно пространство нулевой ширины для вертикального выравнивания. Перенес line-height:0px от внешнего к псевдо, так что он, по крайней мере, виден при деградации для IE8.

автор: Navid · Accepted Answer · 2016-09-18 12:37:31

самый простой способ-использовать bootstrap и badge class

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

автор: Wolfgang Ziegler · Accepted Answer · 2016-11-08 16:02:27

эта версия не полагается на жестко закодированные, фиксированные значения, но размеры относительно font-size на div.

http://jsfiddle.net/qod1vstv/

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:

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

автор: kayahr · Accepted Answer · 2011-02-01 10:13:13

вы можете использовать свойство border-radius для этого:

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

играйте с радиусом границы и значениями заполнения, пока вы не будете удовлетворены результатом.

но это не будет работать во всех браузерах. Я думаю, IE по-прежнему не поддерживает закругленные углы.

автор: bearinthewoods · Accepted Answer · 2014-01-03 20:03:57

мое решение здесь-это легко позволяет для различных размеров и цветов и связей в 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;
}

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

в настоящее время я не думаю, что это возможно. Кто?

автор: Damian Leszczyński - Vash · Accepted Answer · 2011-02-01 10:19:37

вы работаете как со стандартным блоком, то есть квадратом

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

это особенность CSS 3, и это не очень хорошо suporrted, вы можете рассчитывать на firefox и safari наверняка.

<div class="circle"><span>1234</span></div>

автор: 1000Suns · Accepted Answer · 2011-02-01 10:13:45

сделайте что-то подобное в своем css

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

используйте тег paragraph для записи текста. Надеюсь, это поможет

автор: jstol · Accepted Answer · 2013-06-05 18:52:10

что-то вроде того, что я сделал здесь может работать (для чисел от 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>

автор: Hubyx Reds · Accepted Answer · 2015-01-21 23:59:25

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

автор: Leonardo Vega · Accepted Answer · 2018-04-24 05:39:47

ПРИМЕР HTML

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

код

    .numberCircle { 

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

}

автор: Marco Maggiotti · Accepted Answer · 2016-03-02 14:53:39

ответ thirtydot прав, но не хватает небольшой точки. Вам нужно добавить позиция: относительная , если вы хотите иметь центрированное значение в круге, а также различные числа. Например 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>

автор: dotNET · Accepted Answer · 2018-09-09 06:50:04

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

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

автор: Chris Li · Accepted Answer · 2018-09-09 07:42:49

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