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

250

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

Liczba na obrazku koła

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

Pentium10
źródło

Odpowiedzi:

442

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.

trzydzieści
źródło
Obecna najnowsza wersja Internet Explorera 9 faktycznie obsługuje promień obramowania. ... a div nie jest do tego doskonałym wyborem. :)
reisio,
7
display: blok wbudowany;
Kirkland,
1
@KyleMit: Teoretycznie to dobry pomysł. Niestety, SROKA CSS3 ma ograniczenie tej samej domeny .
thirtydot
3
Aby uniknąć konieczności wykonywania matematyki w CSS za każdym razem, gdy zmieniasz rozmiar czcionki (kłopot, jeśli robisz na przykład responsive design), możesz użyć tej adaptacji jsfiddle trzydziestki, która używa tylko pikseli do opisania rozmiaru czcionki: jsfiddle. net / dQR9T / 7058
Steven
1
@steven, jak upewnić się, że okrąg jest zawsze wokół liczby , lub czy możemy go powiększyć, jeśli liczba wynosi 24928, to teraz się przepełnia
transformator
108

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 .

Mikrofon
źródło
To właśnie miałem problem, pokazując procent wewnątrz, który może wynosić „1”, „10” lub „100”. Działa idealnie, dzięki!
Felipe Castro,
Zauważ, że ta sugerowana edycja została odrzucona, ale zmiany faktycznie wyśrodkowują tekst nieco lepiej w pionie, więc dodałem je ręcznie do odpowiedzi.
Mike
To lepsza odpowiedź. Użyłbym translateY (-50%) zamiast ujemnego górnego marginesu
Tobias
@Tobias Dziękujemy za świetny pomysł. Zaktualizowałem swoją odpowiedź.
Mike
Znacznie czystsze byłoby usunięcie zakresu i dodanie text-aligni line-heightdo div. Prawdopodobnie najlepsza odpowiedź.
dlsso,
41

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.

ryachza
źródło
5
Dla mnie było to najlepsze rozwiązanie. Pozwala na większe liczby i jest najbardziej skalowalny. Wszystkie pozostałe rozwiązania mają zbyt dużo twardego kodowania rozmiarów. To ma najmniej. Rozmiar czcionki można zmienić całkiem sporo, nie przerywając tego. Jeśli drastycznie się zmieni, margines musi zostać dostosowany, ale jest bardzo wybaczający. Konieczność użycia zagnieżdżonego elementu jest jednak nieco negatywna.
Necreaux,
@Necreaux Zaktualizowałem odpowiedź wersją, która zastępuje jawny element wewnętrzny pseudoelementami.
ryachza
1
Rzeczywiście najlepsze rozwiązanie. Właśnie zastąpiłem rozmiar marginesu po lewej i marginesie po prawej stronie 0,35 em zamiast 8px (wypełnienie w zaktualizowanym rozwiązaniu). Abyś mógł zmienić rozmiar czcionki liczbowej i zachować odpowiedni margines.
Jibato,
24

najprostszym sposobem jest użycie bootstrapu i klasy odznaki

 <span class="badge">1</span>
Navid
źródło
4
To jest świetne! Już używam bootstrap, po prostu nie wiedziałem, że ta klasa istnieje.
Justin
1
Dobra odpowiedź navid!
SeyedPooya Soofbaf
22

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/

wprowadź opis zdjęcia tutaj

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>
Wolfgang Ziegler
źródło
1
cześć, jest to bardzo miłe, ale jeśli liczba jest duża, nawet w setkach lub tysiącach, przewija się poza kółko. Czy można również użyć rozmiaru czcionki do utworzenia nowego koloru tła
transformator
1
Piękne rozwiązanie!
jomofrodo
8

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.

Kayahr
źródło
nie zapomnij `-webkit-border-radius: 15px;` także jest poprawka dla IE htmlremix.com/css/curved-corner-border-radius-cross-browser, ale pomyśl dwa razy o jego wdrożeniu
Hannes
+1 prawdopodobnie jest najłatwiejszą metodą ... powrót do IE również wygląda dobrze (kwadrat). wordpress robi to tak, jeśli pamiętam
Ross
4

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

niedźwiedź w lesie
źródło
3

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

dotNET
źródło
2

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>
Damian Leszczyński - Vash
źródło
2

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;

}
Leonardo Vega
źródło
Chociaż ten kod jest przydatny, dobrze byłoby podać jakieś wyjaśnienie
mhatch
2

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

Dt23
źródło
Kim jest John Noel Bruno? Jeśli zdobędziesz go z bloga lub samouczka,
dodanie
1

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

1000suns
źródło
1

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>
jstol
źródło
1

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;
}
Hubyx Reds
źródło
1

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>

Chris Li
źródło
0

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>

Marco Maggiotti
źródło