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

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.

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>

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

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

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

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.

body {
  margin: 0;
}
.circles {
  display: flex;
}
.circle-with-text {
  background: linear-gradient(orange, red);
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  margin: 5px 20px;
  font-size: 15px;
  padding: 15px;
  display: flex;
  height: 180px;
  width: 180px;
  color: #fff;
}
.multi-line-text {
  font-size: 20px;
}

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

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>

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!

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>

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/

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

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

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

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>

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

.circle-text {
  position: relative;
  display: block;
  border-radius: 50%;
  text-align: center;
  min-width: 50px;
  min-height: 50px;
}

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

<div id="red-circle" class="circle-text">
  <span class="inner-text center-align">Hey</span>
</div>

<div id="green-circle" class="circle-text">
  <span class="inner-text center-align">Big size circle</span>
  <div>
    <style>
      #red-circle {
        background-color: red;
        border: 1px solid black;
        width: 60px;
        height: 60px;
      }
      
      #green-circle {
        background-color: green;
        border: 1px solid black;
        width: 150px;
        height: 150px;
      }
    </style>

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

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

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