CSS: Wie zeichnet man einen Kreis mit Text in der Mitte?

155

Ich habe dieses Beispiel bei stackoverflow gefunden:

Zeichnen Sie den Kreis nur mit CSS

Was toll ist. Aber ich möchte wissen, wie ich dieses Beispiel so ändern kann, dass ich Text in die Mitte des Kreises einfügen kann?

Ich fand auch folgendes: Vertikales und horizontales Zentrieren von Text im Kreis in CSS (wie iPhone-Benachrichtigungsabzeichen)

aber aus irgendeinem Grund funktioniert es nicht für mich. Wenn ich folgenden Testcode erstelle:

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

Anstelle eines Kreises bekomme ich eine ovale Form. Ich versuche, mit dem Code herumzuspielen, um zu sehen, wie ich ihn zum Laufen bringen kann.

Punkt
quelle

Antworten:

327

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
quelle
8
@ Punkt: Nicht wirklich mein Tun - bryanhadaway.com/how-to-create-circles-with-css
Jawad
3
Wenn Sie dies schaffen können border-radius:50%;, wird Ihr
Codeereignis
14
Persönlich würde ich das Zeilenhöhenattribut entfernen und vertikal ausrichten: Mitte; Anzeige: Tabellenzelle; Auf diese Weise werden Ihre Textzeilen weiterhin zentriert. jsfiddle.net/z9bLtw99
ministe2003
3
Was ist mit mehreren Zeilen?
Henry Zhu
1
@DamjanPavlica Siehe das letzte Update dieser Antwort , in dem weder Breite noch Höhe explizit festgelegt sind. Funktioniert auch für mehrere Zeilen, da Sie live auf der jsfiddle überprüfen können
Jose Rui Santos
57

Wenn Ihr Inhalt verpackt wird und eine unbekannte Höhe hat, ist dies die beste Wahl:

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
quelle
6
Dies erzeugt Ovale, keine perfekten Kreise.
Sophivorus
2
Das ist die wirkliche Lösung. Obwohl ich erwähnen muss, dass display: absolutedas die Alingment bricht - aber einfache Lösung ist es, es in ein anderes div zu wickeln.
Ondřej Želazko
1
erzeugt einen perfekten Kreis (kein Oval). Auch ein Wrapper Div ist in der Tat eine gute Idee, wenn Sie absolute oder feste Positionierung verwenden.
krivar
2
Für die absolute Positionierung würden Sie einen Wrapper verwenden. Aber es gibt ein Oval, da die maximale Breite 180px beträgt. Wenn Sie also die gewünschte Mindestbreite angeben und die Höhe ebenfalls auf diesen Wert festlegen. Sie erhalten einen Kreis. Andernfalls erhalten Sie ein Oval über Breite und Höhe> 180px hinaus.
Mutp
26

Sie können CSS3 verwenden 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;
}

Auf diese Weise können Sie vertikal und horizontal mittig ausgerichteten einzeiligen und mehrzeiligen Text erstellen.

Mohammad Usman
quelle
1
Die beste Lösung in einer idealen Welt. Leider gibt es bei der Implementierung von flexbox noch viele browserübergreifende Fehler: github.com/philipwalton/flexbugs
jimiayler
für IE: `` `display: -ms-flexbox` ``
Michael Guild
11

Ich denke, Sie möchten Text in einem Oval oder Kreis schreiben? warum nicht dieser?

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

mplungjan
quelle
8

Für ein Webdesign, das mir kürzlich gegeben wurde, musste ich die zentrierte und unbekannte Textmenge in einem Problem mit festen Kreisen lösen, und ich dachte, ich würde die Lösung hier für andere Personen teilen, die sich mit Kreis / Text-Kombinationen befassen.

Das Hauptproblem, das ich hatte, war, dass Text oft die Grenzen des Kreises sprengte. Um dies zu lösen, habe ich 4 Divs verwendet. Ein rechteckiger Container, der die maximalen (festen) Grenzen des Kreises angibt. Darin befindet sich das Div, das den Kreis mit einer Breite und Höhe von 100% zeichnet. Wenn Sie also die Größe des übergeordneten Elements ändern, ändert sich auch die Größe des tatsächlichen Kreises. Darin befindet sich ein weiteres rechteckiges Div, das mit% einen Textgrenzbereich erstellt, der verhindert, dass Text (größtenteils) den Kreis verlässt. Dann schließlich das eigentliche Div für den Text und die vertikale Zentrierung.

Als Code macht es mehr Sinn:

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

Sie können die Rahmenfarben in den Container-Divs auskommentieren, um zu sehen, wie sie eingeschränkt werden.

Dinge, die Sie beachten sollten: Sie können immer noch die Grenzen des Kreises überschreiten, wenn Sie zu viel Text einfügen oder zu lange Wörter / ungebrochenen Text verwenden. Es passt immer noch nicht zu völlig unbekanntem Text (z. B. Benutzereingaben), funktioniert jedoch am besten, wenn Sie vage wissen, wie viel Text Sie am meisten speichern müssen, und Ihre Kreisgröße und Schriftgröße entsprechend einstellen. Sie können den Textcontainer div so einstellen, dass ein Überlauf natürlich ausgeblendet wird, aber das sieht möglicherweise nur "kaputt" aus und ist kein Ersatz für die tatsächliche Berücksichtigung der maximalen Größe in Ihrem Design.

Hoffe das ist nützlich für jemanden! HTML / CSS ist nicht meine Hauptdisziplin, daher bin ich sicher, dass es verbessert werden kann!

David Burford
quelle
8

Zeichnen Sie einen Kreis mit Text in der Mitte mit HTML-Tag und ohne CSS

HTML mit SVG-Tag dafür. Sie können diesem Standardansatz folgen, wenn Sie sich nicht für CSS entscheiden möchten.

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

Geben Sie hier die Bildbeschreibung ein

Ashish
quelle
Für zukünftige Referenz für Gelegenheits Leser: Wie im Code und Bild zu sehen ist, wird der Text nur , weil die zentriert font-size, font-family, x, und yin einer Reihe aufstellen. Für jeden, der Verdana nicht installiert hat, wird es nicht zentriert. Die Verwendung x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"löst das Problem ebenfalls nicht.
LosManos
6

Wenn es sich nur um eine Textzeile handelt, können Sie die Eigenschaft Zeilenhöhe mit demselben Wert wie die Elementhöhe verwenden:

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

Wenn der Text mehrere Zeilen enthält oder der Inhalt variabel ist, können Sie das Padding-Top verwenden:

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

Beispiel: http://jsfiddle.net/2GUFL/

Bruno Gomes
quelle
6

Natürlich müssen Sie dazu Tags verwenden. Eine zum Erstellen des Kreises und eine für den Text.

Hier kann Ihnen ein Code helfen

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

Live Beispiel hier http://jsbin.com/apumik/1/edit

Aktualisieren

Hier mit ein paar Änderungen weniger kleiner

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

Ligth
quelle
Vielen Dank! Ich verstehe Ihr Beispiel besser als das im Beitrag ( stackoverflow.com/questions/4801181/… ), aber ich möchte verstehen, warum dieses Beispiel für mich nicht funktioniert ...
Punkt
es sieht so aus, als hätten sie das gleiche getan wie du, aber nur in einer Klasse in der CSS zusammengefasst ...?
Punkt
Ja, ich habe gerade bemerkt, dass ich das Gleiche getan habe.
Ligth
Geben Sie eine zweite, ich werde meinen Beitrag und meinen Code aktualisieren, um ihn besser zu machen: D
Ligth
3

Für mich funktionierte nur diese Lösung für mehrzeiligen Text:

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

Wenn Sie Foundation 5 und Compass Framework verwenden, können Sie dies versuchen.

.sass Eingabe

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

.css Ausgabe

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

Ich habe dies von der YouTube-Seite erhalten, die wirklich einfach eingerichtet ist. Absolut wartbar und wiederverwendbar.

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

Entwickler für Benutzeroberflächen
quelle
2

Einige der Lösungen hier haben in kleinen Kreisen für mich nicht gut funktioniert. Also habe ich diese Lösung unter Verwendung der absoluten Position gemacht.

Die Verwendung von SASS sieht folgendermaßen aus:

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

Und kann wie verwendet werden

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

Siehe Demo auf https://codepen.io/matheusrufca/project/editor/DnYPMK

Informationen zum Anzeigen von Ausgabe-CSS finden Sie im Snippet

m.rufca
quelle
0

Eine Möglichkeit besteht darin, die Flexbox zu verwenden, um den Text in der Mitte auszurichten. Ich habe folgende Vorgehensweise gefunden:

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

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

PennyBirman
quelle
0

Mit diesem Code reagiert es auch.

<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
quelle
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
quelle
Dies ist eine direkte Kopie einer anderen Antwort. Schande. -1
Tim Gautier
0

Ich habe einige Antworten von anderen Leuten und mit floatund kombiniertrelative es gab mir das Ergebnis, das ich brauchte.

In HTML benutze ich ein div. Ich benutze es in a lifür eine Navigationsleiste.

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