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

Jeśli Twoja treść ma się zawijać i być nieznanej wysokości, to jest najlepsza opcja:

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>

Możesz użyć css3 flexbox.

HTML:

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

CSS:

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

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

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>

Dla projektowania stron internetowych dostałem niedawno musiałem rozwiązać wyśrodkowany i nieznaną ilość tekstu w naprawionym problem koło i pomyślałem, że podzielę się rozwiązaniem tutaj dla innych osób patrząc na combo koło / tekst.

Głównym problemem, który miałem, było to, że tekst często łamie granice okręgu. Aby rozwiązać ten problem, użyłem 4 div. Jeden pojemnik prostokątny, który określał maksymalne (stałe) granice okręgu. W środku byłby div, który rysuje okrąg swoją szerokością i wysokość ustawiona na 100%, więc zmiana rozmiaru rodzica zmienia rozmiar rzeczywistego okręgu. Wewnątrz byłby inny prostokątny div, który przy użyciu % ' s utworzyłby obszar graniczny tekstu, zapobiegając opuszczaniu okręgu (w większości przypadków) Następnie na koniec rzeczywisty div dla tekstu i pionowego centrowania.

To ma 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 obramowania na kontenerze div, aby zobaczyć, jak się ogranicza.

Rzeczy, o których należy pamiętać: Nadal możesz złamać granice okręgu, jeśli umieścisz zbyt dużo tekstu lub użyjesz słów / nieprzerwanego tekstu, które są zbyt długie. Nadal nie pasuje do zupełnie nieznanego tekstu (takiego jak dane wejściowe użytkownika), ale działa najlepiej, gdy wiesz niejasno, jaka jest największa ilość tekstu, którą musisz przechowywać, i odpowiednio ustaw rozmiar okręgu i rozmiary czcionek. Możesz ustawić kontener tekstowy div, aby oczywiście ukryć wszelkie przepełnienia, ale może to wyglądać po prostu "zepsuty" i nie jest zamiennikiem aby właściwie uwzględnić maksymalny rozmiar w Twoim projekcie.

Mam nadzieję, że jest to przydatne dla kogoś! HTML / CSS nie jest moją główną dyscypliną, więc jestem pewien, że można go poprawić!

Myślę, że chcesz pisać tekst w owalu lub okręgu? dlaczego nie ten?

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

Oczywiście, musisz użyć tagów, aby to zrobić. Jeden do utworzenia okręgu, a drugi dla tekstu.

Tutaj jakiś kod może Ci pomóc

#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

Update

Tutaj mniej mniejsze z kilkoma zmianami

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

Jeśli jest to tylko jeden wiersz tekstu, możesz użyć właściwości line-height, o tej samej wartości co Wysokość elementu:

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

Jeśli tekst ma wiele linii lub zawartość jest zmienna, możesz użyć padding-top:

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

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

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

.wejście sass

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

Dla mnie tylko To rozwiązanie zadział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;
}

Niektóre rozwiązania tutaj nie działały dobrze dla mnie na małych kółkach. Zrobiłem więc to rozwiązanie używając pozycji absolutnej ol.

Używanie SASS będzie wyglądało tak:

.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ście CSS

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

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

Dostałem to ze strony YouTube, która ma naprawdę prostą konfigurację. Absolutnie 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>

Jednym ze sposobów jest użycie flexbox 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

Używając tego kodu będzie on również reagował.

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

Łączyłem kilka odpowiedzi od innych ludzi i z float i relative dało mi to wynik, którego potrzebowałem.

W HTML używam div. Używam go wewnątrz li jako paska nawigacyjnego.

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