it-swarm.com.de

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

Ich habe dieses Beispiel bei stackoverflow gefunden:

Zeichne Kreis nur mit CSS

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

Ich habe auch folgendes gefunden: Text in CSS vertikal und horizontal im Kreis zentrieren (wie bei iphone notification badge)

aber aus irgendeinem Grund funktioniert es bei mir nicht. Wenn ich den 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.

134
dot

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

Wenn sich Ihr Inhalt umhüllt 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>
56
cimmanon

Sie können css3 flexbox verwenden.

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 ein- und mehrzeiligen Text vertikal und horizontal in der Mitte ausrichten.

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>
19
Mohammad Usman

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

Für ein Webdesign, das ich kürzlich erhalten habe, musste ich die zentrierte und unbekannte Textmenge in einem Problem mit festen Kreisen lösen und dachte, ich würde die Lösung hier für andere Personen teilen, die sich mit Kreisen/Textkombinationen beschäftigen.

Das Hauptproblem, das ich hatte, war Text, der oft die Grenzen des Kreises sprengte. Um dieses Problem 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 Kreises ändern, ändert sich auch die Größe des tatsächlichen Kreises. Darin befindet sich ein weiteres rechteckiges Div, das unter Verwendung von% einen Textgrenzbereich erzeugt, der verhindert, dass Text (größtenteils) den Kreis verlässt. Anschließend das eigentliche Div für den Text und die vertikale Zentrierung.

Es ist sinnvoller als Code:

/* 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 Randfarben für die Containerdivs auskommentieren, um zu sehen, wie sie eingeschränkt werden.

Zu beachtende Dinge: Sie können die Grenzen des Kreises immer noch sprengen, wenn Sie zu viel Text einfügen oder zu lange Wörter/ungebrochenen Text verwenden. Es eignet sich immer noch nicht für völlig unbekannten Text (z. B. Benutzereingaben), funktioniert jedoch am besten, wenn Sie vage wissen, was die größte zu speichernde Textmenge ist, und Ihre Kreisgröße und Schriftgröße entsprechend festlegen. Sie können den Textcontainer div so einstellen, dass Überläufe natürlich ausgeblendet werden. Dies sieht jedoch möglicherweise nur "kaputt" aus und ersetzt nicht 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!

8
David Burford

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

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

Wenn der Text mehrzeilig ist oder wenn der Inhalt variabel ist, können Sie das Auffüllen verwenden:

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

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

6
Bruno Gomes

Dazu müssen Sie natürlich to tags verwenden. Eine zum Erstellen des Kreises und die andere 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

5
Ligth

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

.sass eingang

$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%;
}
3
MagicJoseph

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

enter image description here

3
Ashish

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

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

Habe dies von der YouTube-Seite bekommen, die eine sehr einfache Einrichtung hat. 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>
2

Einige der Lösungen hier haben in kleinen Kreisen 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 gerne 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>
2
m.rufca
.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>
1
Hao

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;
}
0
Ankit Sinha

Ich habe einige Antworten von anderen Personen kombiniert und mit float und relative das gewünschte Ergebnis erzielt.

In HTML verwende ich ein div. Ich benutze es in einem li fü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;
    }
0
Halfacht

Eine Möglichkeit, dies zu tun, besteht darin, flexbox) zu verwenden, um den Text in der Mitte auszurichten.

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

0
PennyBirman