Znalazłem ten przykład na stackoverflow:
Narysuj okrąg przy użyciu samego CSS
Który jest świetny. Ale chciałbym wiedzieć, jak zmodyfikować ten przykład, aby umieścić tekst w środku koła?
Znalazłem również to: wyśrodkowanie tekstu w kółku w pionie i poziomie w CSS (jak znaczek powiadomienia na iPhonie)
ale z jakiegoś powodu to nie działa dla mnie. Kiedy tworzę następujący kod testowy:
<div class="badge">1</div>
zamiast koła otrzymuję owalny kształt. Próbuję pobawić się kodem, aby zobaczyć, jak mogę go uruchomić.
css
css-shapes
kropka
źródło
źródło
border-radius:50%;
, że Twoje zdarzenie kodu będzie bardziej eleganckie i przenośne, bez konieczności każdorazowej zmiany tego atrybutu na podstawie szerokości i wysokości;)Jeśli zawartość ma się zawijać i mieć nieznaną wysokość, jest to najlepszy wybór:
http://cssdeck.com/labs/aplvrmue
Pokaż fragment kodu
źródło
display: absolute
zrywa alingment - ale prostym rozwiązaniem jest umieszczenie go w innym div.Możesz użyć css3
flexbox
.HTML:
CSS:
Pozwoli to na wyrównanie w pionie i poziomie do środka tekstu jedno- i wielowierszowego.
Pokaż fragment kodu
źródło
Myślę, że chcesz napisać tekst w owalu lub kółku? dlaczego nie ten?
źródło
W przypadku projektowania stron internetowych, które otrzymałem niedawno, musiałem rozwiązać problem z wyśrodkowaną i nieznaną ilością tekstu w stałym okręgu i pomyślałem, że udostępnię to rozwiązanie innym osobom szukającym kombinacji koło / tekst.
Głównym problemem, jaki miałem, było to, że tekst często przekraczał granice koła. Aby rozwiązać ten problem, użyłem 4 elementów div. Jeden prostokątny pojemnik, który określa maksymalne (stałe) granice okręgu. Wewnątrz byłby to element div, który rysuje okrąg z jego szerokością i wysokością ustawioną na 100%, więc zmiana rozmiaru elementu nadrzędnego zmienia rozmiar rzeczywistego koła. Wewnątrz znajdowałby się kolejny prostokątny element div, który, używając% 's, utworzyłby granicę tekstu, zapobiegającą opuszczaniu koła przez jakikolwiek tekst (w większości). Na końcu rzeczywisty element div dla tekstu i wyśrodkowanie w pionie.
Ma to większy sens jako kod:
Możesz odkomentować kolory obramowań elementów div kontenera, aby zobaczyć, jak to ogranicza.
Kwestie, o których należy pamiętać: nadal możesz złamać granice koła, jeśli umieścisz zbyt dużo tekstu lub użyjesz słów / nieprzerwanego tekstu, które są zbyt długie. Nadal nie nadaje się do całkowicie nieznanego tekstu (takiego jak dane wejściowe użytkownika), ale działa najlepiej, gdy wiesz, jaka jest największa ilość tekstu, którą musisz przechowywać, i odpowiednio ustawisz rozmiar koła i rozmiary czcionek. Oczywiście możesz ustawić element div kontenera tekstu tak, aby ukrywał wszelkie przepełnienia, ale może to po prostu wyglądać na „zepsute” i nie zastąpi faktycznego uwzględnienia maksymalnego rozmiaru w projekcie.
Mam nadzieję, że to komuś się przyda! HTML / CSS nie jest moją główną dyscypliną, więc jestem pewien, że można ją ulepszyć!
źródło
Narysuj okrąg z tekstem pośrodku ze znacznikiem HTML i bez CSS
źródło
font-size
,font-family
,x
, iy
wyrównać. Dla każdego, kto nie ma zainstalowanej Verdany, nie będzie wyśrodkowany. Używaniex="50%" y="50%" dominant-baseline="middle" text-anchor="middle"
również nie rozwiązuje problemu.Jeśli jest to tylko jeden wiersz tekstu, możesz użyć właściwości line-height, z taką samą wartością jak wysokość elementu:
Jeśli tekst ma wiele linii lub jeśli zawartość jest zmienna, możesz użyć dopełnienia górnego:
Przykład: http://jsfiddle.net/2GUFL/
źródło
Oczywiście, aby to zrobić, musisz użyć tagów. Jeden do tworzenia koła, a drugi do tekstu.
Tutaj może ci pomóc trochę kodu
Przykład na żywo tutaj http://jsbin.com/apumik/1/edit
Aktualizacja
Tutaj mniej mniejszy z kilkoma zmianami
http://jsbin.com/apumik/3/edit
źródło
U mnie tylko to rozwiązanie działało dla tekstu wielowierszowego:
źródło
Jeśli używasz Foundation 5 i frameworka Compass, możesz spróbować tego.
.sass input
Wyjście CSS
źródło
Mam to ze strony YouTube, która ma naprawdę prostą konfigurację. Całkowicie konserwowalne i wielokrotnego użytku.
źródło
Niektóre rozwiązania tutaj nie działały dobrze na małych kółkach. Więc zrobiłem to rozwiązanie używając ol pozycji absolutnej.
Korzystanie z SASS będzie wyglądać następująco:
I może być używany jak
Zobacz demo na https://codepen.io/matheusrufca/project/editor/DnYPMK
Zobacz fragment, aby wyświetlić wyjściowy arkusz CSS
Pokaż fragment kodu
źródło
Jednym ze sposobów jest użycie flexboksa w celu wyrównania tekstu na środku. Sposób, w jaki to zrobiłem, jest następujący:
HTML:
CSS:
Tutaj plnkr: https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview
źródło
Używając tego kodu będzie również responsywny.
źródło
źródło
Byłem łącząc kilka odpowiedzi od innych osób oraz ze
float
irelative
ona dała mi wynik potrzebne.W HTML używam div. Używam go wewnątrz a
li
jako pasek nawigacyjny.źródło