css: orta metin ile daire çizmek nasıl?

Stackoverflow bu örneği buldum:

Yalnızca css kullanarak Circle çizin

Hangi harika. Ama dairenin ortasına metin ekleyebilmem için bu örneği nasıl değiştireceğimi bilmek isterim?

Bunu da buldum: Metni CSS'deki daire içinde dikey ve yatay olarak merkezleme (iphone bildirim rozeti gibi)

ama nedense benim için çalışmıyor. Aşağıdaki test kodunu oluşturduğumda:

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

bir daire yerine, oval bir şekil alıyorum. Ben işe nasıl alabilirim görmek için kod ile oynamaya çalışıyorum.

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>

İçeriğiniz sarılıp bilinmeyen yükseklikte olacaksa, bu sizin en iyi seçeneğinizdir:

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>

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

Bu, dikey ve yatay olarak ortaya hizalanmış tek satır ve çok satırlı metinlere sahip olmanızı sağlar.

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>

Sanırım oval veya daire şeklinde metin yazmak istiyor musunuz? neden bu değil?

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

Son zamanlarda bir web tasarımı için, sabit bir daire sorununda ortalanmış ve bilinmeyen metin miktarını çözmek zorunda kaldım ve burada daire / metin kombinasyonlarına bakan diğer insanlar için çözümü paylaşacağımı düşündüm.

Asıl mesele metinti, genellikle dairenin sınırlarını kıracaktı. Bunu çözmek için 4 div kullandım. Dairenin maksimum (sabit) sınırlarını belirten bir dikdörtgen konteyner. İçinde genişliği ve yüksekliği% 100 olarak ayarlanmış daireyi çizen div olurdu, böylece ebeveynin boyutunu değiştirmek gerçek dairenin boyutunu değiştirir. Bunun içinde,% 'leri kullanarak herhangi bir metnin daireden çıkmasını önleyen bir metin sınır alanı oluşturacak olan başka bir dikdörtgen div olurdu (çoğunlukla) Son olarak metin ve dikey merkezleme için gerçek div.

Kod olarak daha mantıklı:

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

Nasıl kısıtlandığını görmek için konteyner div'lerindeki kenarlık renklerini açabilirsiniz.

Dikkat edilmesi gerekenler: Çok fazla metin koyarsanız veya çok uzun sözcükler / kesintisiz metinler kullanırsanız dairenin sınırlarını yine de kırabilirsiniz. Tamamen bilinmeyen metinler (kullanıcı girişi gibi) için hala iyi bir seçim değildir, ancak depolamanız gereken en büyük metnin ne olduğunu ve daire boyutunuzu ve yazı tipi boyutlarınızı buna göre ayarladığınız zaman en iyi sonucu verir. Metin konteyneri div'ı herhangi bir taşmayı gizleyecek şekilde ayarlayabilirsiniz, ancak bu sadece "kırık" görünebilir ve tasarımınızda gerçekte maksimum boyutu hesaplamanın yerini tutmaz.

Umarım bu birisi için yararlıdır! HTML / CSS benim ana disiplinim değil, bu yüzden geliştirilebileceğinden eminim!

HTML Etiketi ile ve CSS'siz metnin ortasında bir daire çizin

Bunun için SVG etiketine sahip HTML. CSS'ye gitmek istemiyorsanız bu standart yaklaşımı takip edebilirsiniz.

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

Yalnızca bir metin satırıysa, satır yüksekliği özelliğini, öğe yüksekliğiyle aynı değere sahip kullanabilirsiniz:

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

Metin birden çok satıra sahipse veya içerik değişkendirse dolgu alanını kullanabilirsiniz:

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

Örnek: http://jsfiddle.net/2GUFL/

Tabii ki, bunu yapmak için etiketlere kullanmanız gerekir. Biri daire oluşturmak için, diğeri metin için.

Burada bazı kodlar size yardımcı olabilir

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

Canlı örnek burada http://jsbin.com/apumik/1/edit

Güncelleme

Burada birkaç değişiklikle daha küçük

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

Benim için sadece bu çözüm çok satırlı metinler için çalıştı:

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

Foundation 5 ve Compass çerçevesini kullanıyorsanız, bunu deneyebilirsiniz.

.sass girişi

$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 çıkışı

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

Bunu gerçekten basit bir kurulumu olan YouTube sayfasından aldım. Kesinlikle bakımı yapılabilir ve tekrar kullanılabilir.

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

Buradaki bazı çözümler benim için küçük çevrelerde işe yaramadı. Bu yüzden bu çözümü ol mutlak pozisyon kullanarak yaptım.

SASS kullanmak şu şekilde görünecektir:

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

Ve gibi kullanılabilir

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

Demoyu https://codepen.io/matheusrufca/project/editor/DnYPMK adresinde görebilirsiniz.

Çıktı CSS'sini görüntülemek için snippet'e bakın

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

Bunu yapmanın bir yolu, metni ortada hizalamak için flexbox kullanmaktır. Bunu bulduğum yol şudur:

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

İşte plnkr: https://plnkr.co/edit/EvWYLNfTb1B7igoc3TZx?p=preview

Bu kodu kullandığınızda da duyarlı olacaktır.

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

Başkalarının cevaplarını birleştiriyordum floatve relativebana ihtiyacım olan sonucu verdi.

HTML'de bir div kullanıyorum. liBir gezinti çubuğu için a içinde kullanıyorum .

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

  span.circle {
  background: #010101;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  color: #f1f1f1;
  display: inline-block;
  font-weight: bold;
  line-height: 40px;
  margin-right: 5px;
  text-align: center;
  width: 40px;
}

 <span class="circle">1</span>