Jak używać CSS do otaczania liczby okręgiem?

Chciałbym otoczyć liczbę w kole jak na tym obrazku:

Czy to możliwe i jak to osiągnąć?

Oto wersja demo na JSFiddle i fragment:

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

Moja odpowiedź jest dobrym punktem wyjścia, niektóre inne odpowiedzi zapewniają elastyczność w różnych sytuacjach. Jeśli zależy ci na IE8, spójrz na starą wersję mojej odpowiedzi.

Problem z większością innych odpowiedzi tutaj polega na tym, że musisz dostosować rozmiar zewnętrznego pojemnika, aby był to idealny rozmiar w oparciu o rozmiar czcionki i liczbę wyświetlanych znaków. Jeśli miksujesz cyfry 1-cyfrowe i 4-cyfrowe, to nie zadziała. Jeśli stosunek między wielkością czcionki a rozmiarem koła nie jest idealny, albo skończy się to owalem lub małą liczbą ustawioną pionowo na górze dużego koła. Powinno to działać dobrze dla dowolnej ilości tekstu i koła o dowolnym rozmiarze. Wystarczy ustawić widthi line-heightna tę samą wartość:

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

Jeśli chcesz wydłużyć lub skrócić zawartość, wystarczy dopasować szerokość pojemnika, aby uzyskać lepsze dopasowanie.

Zobacz na JSFiddle .

Jeśli ma 20 i mniej, możesz po prostu użyć znaków Unicode ① ② ... ⑳

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

W przypadku rozmiarów kół różniących się w zależności od treści powinno to działać:

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

Opiera się na szerokości zawartości plus margin-„s”, aby określić promień, a następnie zwiększa wysokość, aby dopasować za pomocą padding-„s”. W margin-„s musiałaby być regulowana w zależności od wielkości czcionki.

Zaktualizuj, aby usunąć element wewnętrzny:

<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:'\200B';
    display:inline-block;
    line-height:0px;

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

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

Używa pseudoelementów do wymuszenia wysokości. Potrzebujesz zerowej szerokości do wyrównania w pionie. Przeniesiono line-height:0pxz zewnętrznego na pseudo, aby był przynajmniej widoczny podczas degradacji dla IE8.

najprostszym sposobem jest użycie bootstrapu i klasy odznaki

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

Wersja ta nie opiera się na twardych kodowane, stałe wartości, ale w stosunku do wielkości font-sizez 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>

W tym celu możesz użyć promienia granicy:

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

Graj promieniem obramowania i wartościami dopełniania, aż będziesz zadowolony z wyniku.

Ale to nie zadziała we wszystkich przeglądarkach. Myślę, że IE nadal nie obsługuje zaokrąglonych rogów.

Moje rozwiązanie tutaj - z łatwością pozwala na różne rozmiary i kolory oraz łączy się w CMS do kontroli redakcyjnej. Dla IE degradującego do kwadratów.

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

Nie jest trudno zobaczyć, jak to zrobić. Większe pytanie dotyczy tego, czy można dopasować wymiary okręgu do skali.

Obecnie nie sądzę, aby było to możliwe. Ktoś?

Późno na imprezę, ale oto rozwiązanie tylko dla bootstrap, które zadziałało dla mnie. Używam 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>

Zasadniczo dodajesz bg-dark text-white rounded-circle px-3 py-1 mx-2 h3klasy do swojego <span>(lub cokolwiek) elementu i gotowe.

Pamiętaj, że może być konieczne dostosowanie klas marginesów i dopełniania, jeśli treść zawiera więcej niż jedną cyfrę.

Pracujesz jak ze standardowym blokiem, czyli kwadratem

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

Jest to cecha CSS 3 i nie jest zbyt dobrze obsadzona, na pewno możesz liczyć na Firefoxa i Safari.

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

PRZYKŁAD HTML

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

KOD

    .numberCircle { 

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

}

Późno na imprezę, ale oto rozwiązanie Poszedłem z 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>

Nie wymagało dodatkowej pracy. Dzięki John Noel Bruno

Zrób coś takiego w swoim css

 div {
    szerokość: 10em; wysokość: 10em;
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    wyrównanie tekstu: środek; margin-top: 4.5em;
  }

Użyj tagu akapitu, aby napisać tekst. Mam nadzieję, że to pomaga

Coś takiego, co tutaj zrobiłem , może działać (dla liczb od 0 do 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>

Poprawiając pierwszą odpowiedź, po prostu pozbądź się wypełnienia, dodaj line-heighti 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;
}

Oto mój sposób na zrobienie tego, przy użyciu metody kwadratowej. zaletą jest to, że działa z różnymi wartościami, ale potrzebujesz 2 zakresów.

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

Odpowiedź trzydziestu kropek jest słuszna, ale brakuje jej odrobiny. Musisz dodać pozycję: względną , jeśli chcesz mieć wyśrodkowaną wartość w okręgu i dołączyć także inny zakres liczb. Na przykład 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;
}

ale najłatwiejszym rozwiązaniem jest użycie Bootstrap

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