css: jak narysować okrąg z tekstem pośrodku?

156

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

kropka
źródło

Odpowiedzi:

328

JSFiddle

.circle {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  line-height: 500px;
  text-align: center;
  background: #000
}
<div class="circle">Hello I am A Circle</div>

Jawad
źródło
8
@dot: Niezbyt to moje działanie - bryanhadaway.com/how-to-create-circles-with-css
Jawad
3
Jeśli możesz sprawić 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;)
bonCodigo
14
Osobiście usunąłbym atrybut line-height i dodał vertical-align: middle; wyświetlacz: tabela-komórka; W ten sposób linie tekstu będą nadal wyśrodkowane. jsfiddle.net/z9bLtw99
ministe2003
3
A co z wieloma liniami.
Henry Zhu
1
@DamjanPavlica Zobacz ostatnią aktualizację tej odpowiedzi , która nie określa jawnie żadnej szerokości ani wysokości. Działa również dla wielu linii, ponieważ możesz zweryfikować na żywo na jsfiddle
Jose Rui Santos
57

Jeśli zawartość ma się zawijać i mieć nieznaną wysokość, jest to najlepszy wybór:

http://cssdeck.com/labs/aplvrmue

.badge {
  height: 100px;
  width: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%; /* may require vendor prefixes */
  background: yellow;
}

cimmanon
źródło
6
To generuje owale, a nie idealne koła.
Sophivorus
2
to jest prawdziwe rozwiązanie. chociaż muszę wspomnieć, że to display: absolutezrywa alingment - ale prostym rozwiązaniem jest umieszczenie go w innym div.
Ondřej Želazko
1
tworzy idealne koło (nie owal). W przypadku pozycjonowania bezwzględnego lub stałego dobrym pomysłem jest również opakowujący element div.
krivar
2
Do pozycjonowania bezwzględnego użyłbyś opakowania. Ale daje owal, ponieważ maksymalna szerokość, do której może dojść, to 180 pikseli. Więc jeśli określisz min-width na żądaną szerokość i ustawisz wysokość również na tę wartość. Otrzymasz krąg. W przeciwnym razie otrzymasz owal o szerokości i wysokości> 180 pikseli.
mutp
27

Możesz użyć css3 flexbox.

HTML:

<div class="circle-with-text">
    Here is some text in circle
</div>

CSS:

.circle-with-text {
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  display: flex;
}

Pozwoli to na wyrównanie w pionie i poziomie do środka tekstu jedno- i wielowierszowego.

Mohammad Usman
źródło
1
Najlepsze rozwiązanie w idealnym świecie. Niestety, we wdrażaniu flexbox pozostaje wiele błędów między przeglądarkami: github.com/philipwalton/flexbugs
jimiayler
dla IE: `` display: -ms-flexbox ''
Michael Guild
11

Myślę, że chcesz napisać tekst w owalu lub kółku? dlaczego nie ten?

<span style="border-radius:50%; border:solid black 1px;padding:5px">Hello</span>

mplungjan
źródło
8

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:

/* Main Container -  this controls the size of the circle */
.circle_container
{
	width : 128px;
	height : 128px;
	margin : 0;
	padding : 0;
/*	border : 1px solid red; */
}

/* Circle Main draws the actual circle */
.circle_main
{
	width : 100%;
	height : 100%;
	border-radius : 50%;
	border : 2px solid black;	/* can alter thickness and colour of circle on this line */
	margin : 0;
	padding : 0;
}

/* Circle Text Container - constrains text area to within the circle */
.circle_text_container
{
	/* area constraints */
	width : 70%;
	height : 70%;
	max-width : 70%;
	max-height : 70%;
	margin : 0;
	padding : 0;

	/* some position nudging to center the text area */
	position : relative;
	left : 15%;
	top : 15%;
	
	/* preserve 3d prevents blurring sometimes caused by the text centering in the next class */
	transform-style : preserve-3d;
	
	/*border : 1px solid green;*/
}

/* Circle Text - the appearance of the text within the circle plus vertical centering */
.circle_text
{
	/* change font/size/etc here */
	font: 11px "Tahoma", Arial, Serif;	
	text-align : center;
	
	/* vertical centering technique */
	position : relative;
	top : 50%;
	transform : translateY(-50%);
}
<div class="circle_container">
	<div class="circle_main">
		<div class="circle_text_container">
			<div class = "circle_text">
				Here is an example of some text in my circle.
			</div>
		</div>
	</div>
</div>			

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

David Burford
źródło
8

Narysuj okrąg z tekstem pośrodku ze znacznikiem HTML i bez CSS

HTML z tagiem SVG do tego. Możesz zastosować to standardowe podejście, jeśli nie chcesz korzystać z CSS.

 <svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="white" />
     Sorry, your browser does not support inline SVG.
   <text fill="#000000" font-size="18" font-family="Verdana"
     x="15" y="60">ASHISH</text>
 </svg>

wprowadź opis obrazu tutaj

Ashish
źródło
Dla porównania w przyszłości dla okazjonalnych czytelników: Jak widać w kodzie i obraz, tekst skupia się tylko dlatego, że font-size, font-family, x, i ywyrównać. Dla każdego, kto nie ma zainstalowanej Verdany, nie będzie wyśrodkowany. Używanie x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"również nie rozwiązuje problemu.
LosManos
6

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:

height:100px;
line-height:100px;

Jeśli tekst ma wiele linii lub jeśli zawartość jest zmienna, możesz użyć dopełnienia górnego:

padding-top:30px;
height:70px;

Przykład: http://jsfiddle.net/2GUFL/

Bruno Gomes
źródło
6

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

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    color:black;

}
.innerTEXT{
    position:absolute;
    top:80px;
    left:60px;
}

<div id="circle">
    <span class="innerTEXT"> Here a text</span>
</div>

Przykład na żywo tutaj http://jsbin.com/apumik/1/edit

Aktualizacja

Tutaj mniej mniejszy z kilkoma zmianami

http://jsbin.com/apumik/3/edit

Ligth
źródło
dzięki! Rozumiem Twój przykład lepiej niż ten znaleziony w poście ( stackoverflow.com/questions/4801181/… ), ale chciałbym zrozumieć, dlaczego ten przykład nie działa dla mnie ...
kropka
wygląda na to, że zrobili to samo, co ty, ale po prostu połączyli w jedną klasę w css ...?
dot
Tak, właśnie zauważyłem, że zrobiłem to samo.
Ligth
Daj chwilę, źle zaktualizuj mój post i kod, aby było lepiej: D
Ligth
3

U mnie tylko to rozwiązanie działało dla tekstu wielowierszowego:

.circle-multiline {
    display: table-cell;
    height: 200px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: yellow;
}
Damjan Pavlica
źródło
3

Jeśli używasz Foundation 5 i frameworka Compass, możesz spróbować tego.

.sass input

$circle-width: rem-calc(25) !default;
$circle-height: $circle-width !default;
$circle-bg: #fff !default;
$circle-radius: 50% !default;
$circle-line-height: $circle-width !default;
$circle-text-align: center !default;

@mixin circle($cw:$circle-width, $ch:$circle-height, $cb:$circle-bg, $clh:$circle-line-height, $cta:$circle-text-align, $cr:$circle-radius) {
    width: $cw;
    height: $ch;
    background: $cb;
    line-height: $clh;
    text-align: $cta;
    @include inline-block;
    @include border-radius($cr);
}

.circle-default {
    @include circle;
}

Wyjście CSS

.circle-default {
  width: 1.78571rem;
  height: 1.78571rem;
  background: white;
  line-height: 1.78571rem;
  text-align: center;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
MagicJoseph
źródło
2

Mam to ze strony YouTube, która ma naprawdę prostą konfigurację. Całkowicie konserwowalne i wielokrotnego użytku.

.circle {
    position: absolute;
    top: 4px;
    color: white;
    background-color: red;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    line-height: 18px;
    font-size: 10px;
    text-align: center;
    cursor: pointer;
    z-index: 999;
}
<div class="circle">2</div>

Programista front-end
źródło
2

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:

.circle-text {
    position: relative;
    display: block;
    text-align: center;
    border-radius: 50%;
    > .inner-text {
        display: block;
        @extend .center-align;
    }
}

.center-align {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

@mixin circle-text($size) {
    width: $size;
    height: $size;
    @extend .circle-text;
}

I może być używany jak

#red-circle {
    background-color: red;
    border: 1px solid black;
    @include circle-text(50px);
}

#green-circle {
    background-color: green;
    border: 1px solid black;
    @include circle-text(150px);
}

Zobacz demo na https://codepen.io/matheusrufca/project/editor/DnYPMK

Zobacz fragment, aby wyświetlić wyjściowy arkusz CSS

m.rufca
źródło
0

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:

<div class="circle-without-text">
  <div class="text-inside-circle">
    The text
  </div>
</div>

CSS:

.circle-without-text {
    border-radius: 50%;
    width: 70vh;
    height: 70vh;
    background-color: red;
    position: relative;
 }

.text-inside-circle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
 }

Tutaj plnkr: https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview

PennyBirman
źródło
0

Używając tego kodu będzie również responsywny.

<div class="circle">ICON</div>

.circle {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 0;
  padding: 50% 0;
  border-radius: 50%;
  /* Just making it pretty */
  -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
  background: #38a9e4;
  color: white;
  font-family: Helvetica, Arial Black, sans;
  font-size: 48px;
  text-align: center;
}
Ankit Sinha
źródło
0

.circle {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  line-height: 500px;
  text-align: center;
  background: #000
}
<div class="circle">Hello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A CircleHello I am A Circle</div>

Hao
źródło
To jest prosta kopia innej odpowiedzi. Wstyd. -1
Tim Gautier
0

Byłem łącząc kilka odpowiedzi od innych osób oraz ze floati relativeona dała mi wynik potrzebne.

W HTML używam div. Używam go wewnątrz a lijako pasek nawigacyjny.

.large-list-style {
    float: left;
    position: relative;
    top: -8px;

    border-radius: 50%;

    margin-right: 8px;

    background-color: rgb(34, 198, 200);

    font-size: 18px;
    color: white;
}
    .large-list-style:before,
    .large-list-style:after {
        content: '\200B';
        display:inline-block;
        line-height:0;

        padding-top: 50%;
        padding-bottom: 50%;
    }
    .large-list-style:before {
        padding-left: 16px;
    }
    .large-list-style:after {
        padding-right: 16px;
    }
Halfacht
źródło