Chciałbym otoczyć liczbę w kole jak na tym obrazku:
Czy to możliwe i jak to osiągnąć?
html
css
css-shapes
Pentium10
źródło
źródło
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ć
width
iline-height
na tę samą wartość:Jeśli chcesz wydłużyć lub skrócić zawartość, wystarczy dopasować szerokość pojemnika, aby uzyskać lepsze dopasowanie.
Zobacz na JSFiddle .
źródło
text-align
iline-height
do div. Prawdopodobnie najlepsza odpowiedź.Jeśli ma 20 i mniej, możesz po prostu użyć znaków Unicode ① ② ... ⑳
http://www.alanwood.net/unicode/enclosed_alphanumerics.html
źródło
W przypadku rozmiarów kół różniących się w zależności od treści powinno to działać:
http://jsfiddle.net/nzsnw55s/
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”. Wmargin-
„s musiałaby być regulowana w zależności od wielkości czcionki.Zaktualizuj, aby usunąć element wewnętrzny:
Używa pseudoelementów do wymuszenia wysokości. Potrzebujesz zerowej szerokości do wyrównania w pionie. Przeniesiono
line-height:0px
z zewnętrznego na pseudo, aby był przynajmniej widoczny podczas degradacji dla IE8.źródło
najprostszym sposobem jest użycie bootstrapu i klasy odznaki
źródło
Wersja ta nie opiera się na twardych kodowane, stałe wartości, ale w stosunku do wielkości
font-size
zdiv
.http://jsfiddle.net/qod1vstv/
CSS:
HTML:
źródło
W tym celu możesz użyć promienia granicy:
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.
źródło
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 :
CSS :
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ś?
źródło
Późno na imprezę, ale oto rozwiązanie tylko dla bootstrap, które zadziałało dla mnie. Używam Bootstrap 4:
Zasadniczo dodajesz
bg-dark text-white rounded-circle px-3 py-1 mx-2 h3
klasy 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ę.
źródło
Pracujesz jak ze standardowym blokiem, czyli kwadratem
Jest to cecha CSS 3 i nie jest zbyt dobrze obsadzona, na pewno możesz liczyć na Firefoxa i Safari.
źródło
PRZYKŁAD HTML
KOD
źródło
Późno na imprezę, ale oto rozwiązanie Poszedłem z https://codepen.io/jnbruno/pen/vNpPpW
Css:
HTML:
Nie wymagało dodatkowej pracy. Dzięki John Noel Bruno
źródło
Zrób coś takiego w swoim css
Użyj tagu akapitu, aby napisać tekst. Mam nadzieję, że to pomaga
źródło
Coś takiego, co tutaj zrobiłem , może działać (dla liczb od 0 do 99):
CSS:
HTML:
źródło
Poprawiając pierwszą odpowiedź, po prostu pozbądź się wypełnienia, dodaj
line-height
ivertical-align
:źródło
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.
źródło
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:
CSS:
ale najłatwiejszym rozwiązaniem jest użycie Bootstrap
<span class="badge" style ="float:right">123</span>
źródło