Bir sayıyı daire ile çevrelemek için CSS nasıl kullanılır?

Bu görüntüdeki gibi bir dairenin içindeki bir sayıyı çevrelemek istiyorum:

Bu mümkün mü ve nasıl başarılıyor?

JSFiddle ve snippet hakkında bir demo :

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

<div class="numberCircle">30</div>

Cevabım iyi bir başlangıç ​​noktası, diğer cevapların bazıları farklı durumlar için esneklik sağlıyor. IE8'i önemsiyorsanız, cevabımın eski sürümüne bakın .

Buradaki diğer cevapların çoğundaki sorun, dış kabın boyutunu ayarlamanız ve böylece yazı tipi boyutuna ve görüntülenecek karakter sayısına göre mükemmel bir boyut olması gerekiyor. 1 basamaklı sayıları ve 4 basamaklı sayıları karıştırıyorsanız, çalışmaz. Yazı tipi boyutu ile daire boyutu arasındaki oran mükemmel değilse, oval veya büyük bir dairenin üstüne dikey olarak hizalanmış küçük bir sayı ile sonuçlanırsınız. Bu, herhangi bir metin ve boyut çemberi için iyi çalışmalıdır. widthVe öğesini line-heightaynı değere ayarlamanız yeterlidir:

.numberCircle {
    width: 120px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    font-size: 32px;
    border: 2px solid #666;
}

<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>

İçeriği daha uzun veya daha kısa hale getirmeniz gerekiyorsa, daha iyi uyum sağlamak için tek yapmanız gereken kabın genişliğini ayarlamaktır.

JSFiddle'da görün .

20 veya daha düşükse, sadece unicode karakterleri kullanabilirsiniz ① ② ... ⑳

http://www.alanwood.net/unicode/enclosed_alphanumerics.html

İçeriğe göre değişen daire boyutları için bunun çalışması gerekir:

http://jsfiddle.net/nzsnw55s/

<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>

.numberCircle {
  display:inline-block;
  line-height:0px;

  border-radius:50%;
  border:2px solid;

  font-size:32px;
}

.numberCircle span {
  display:inline-block;

  padding-top:50%;
  padding-bottom:50%;

  margin-left:8px;
  margin-right:8px;
}

margin-Yarıçapı belirlemek için içeriğin genişliği artı ' slarına dayanır , ardından yüksekliği padding-' s ile eşleşecek şekilde genişletir . margin-'Nin font-boyutuna göre ayarlanması gerekir.

İç elemanı kaldırmak için güncelleme:

<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>

<style type="text/css">
.numberCircle {
    display:inline-block;

    border-radius:50%;
    border:2px solid;

    font-size:32px;
}

.numberCircle:before,
.numberCircle:after {
    content:'\200B';
    display:inline-block;
    line-height:0px;

    padding-top:50%;
    padding-bottom:50%;
}

.numberCircle:before {
    padding-left:8px;
}
.numberCircle:after {
    padding-right:8px;
}
</style>

Yüksekliği zorlamak için sözde elemanlar kullanır. Dikey hizalama için sıfır genişlik alanına ihtiyaç duyar. line-height:0pxIE8 için bozulurken en azından görünür olacak şekilde dıştan sözde'ye taşındı .

en kolay yol bootstrap ve badge sınıfını kullanmaktır

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

Bu sürüm sabit kodlanmış, sabit değerlere değil font-size,div .

http://jsfiddle.net/qod1vstv/

CSS:

.numberCircle {
    font: 32px Arial, sans-serif;

    width: 2em;
    height: 2em;
    box-sizing: initial;

    background: #fff;
    border: 0.1em solid #666;
    color: #666;
    text-align: center;
    border-radius: 50%;    

    line-height: 2em;
    box-sizing: content-box;   
}

HTML:

<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>

Bunun için kenarlık yarıçapını kullanabilirsiniz:

<html>
  <head>
    <style type="text/css">

    .round
    {
        -moz-border-radius: 15px;
        border-radius: 15px;
        padding: 5px;
        border: 1px solid #000;
    }

  </style>
  </head>  
  <body>   
    <span class="round">30</span>
  </body>
</html>  

Sonuçtan memnun kalana kadar kenarlık yarıçapı ve dolgu değerleri ile oynayın.

Ancak bu tüm tarayıcılarda çalışmaz. IE hala yuvarlatılmış köşeleri desteklemiyor sanırım.

Buradaki çözümüm - bu, farklı boyut ve renklere izin verir ve editoryal kontrol için bir CMS'ye bağlanır. IE karelere indirgemek için.

HTML :

<div class="circular-label label-outer label-size-large label-color-pink">
    <div class="label-inner"> 
        <span>Fashion & Beauty</span>
    </div>
</div>

CSS :

.circular-label {
    overflow: hidden;
    z-index: 100;
    vertical-align: middle;
    font-size: 11px;
    -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.label-inner {
    width: 85%;
    height: 85%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px dotted white;
    vertical-align: middle;
    margin: auto;
    top: 5%;
    position: relative;
    overflow: hidden;
}
.label-inner > span {
    display: table;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    position: absolute;
    margin: auto;
    margin-top: 38%;
    font-family:'ProximaNovaLtSemibold';
    font-size: 13px;
    line-height: 1.0em;
}
.circular-label.label-size-large {
    width: 110px;
    height: 110px;
    -moz-border-radius: 55px;
    -webkit-border-radius: 55px;
    border-radius: 55px;
    margin-top:-55px;
}
.circular-label.label-size-med {
    width: 76px;
    height: 76px;
    -moz-border-radius: 38px;
    -webkit-border-radius: 38px;
    border-radius: 38px;
    margin-top:-38px;
}
.circular-label.label-size-med .label-inner > span {
    margin-top: 33%;
}
.circular-label.label-size-small {
    width: 66px;
    height: 66px;
    -moz-border-radius: 33px;
    -webkit-border-radius: 33px;
    border-radius: 33px;
    margin-top:-33px;
}

Bunu nasıl yapacağınızı görmek çok zor değil. Daha büyük soru, daire ölçeğinin boyutlarının içeriğe dönüştürülmesinin mümkün olup olmadığıdır.

Şu anda bunun mümkün olduğunu düşünmüyorum. Kimse?

Partiye geç, ama işte benim için işe yarayan sadece bir bootstrap çözümü. Bootstrap 4 kullanıyorum:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>

Temelde bg-dark text-white rounded-circle px-3 py-1 mx-2 h3sınıfınıza<span> (veya herhangi bir şekilde) öğenize ve işiniz biter.

İçeriğinizde birden fazla basamak varsa kenar boşluğu ve dolgu sınıflarını ayarlamanız gerekebileceğini unutmayın.

Standart bir blok gibi çalışıyorsunuz, bu bir kare

.circle {
    width: 10em; height: 10em; 
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }

Bu CSS 3'ün özelliğidir ve çok iyi denetlenmez, kesinlikle firefox ve safari'ye güvenebilirsiniz.

<div class="circle"><span>1234</span></div>

HTML ÖRNEĞİ

<h3><span class="numberCircle">1</span> Regiones del Interior</h3>

KOD

    .numberCircle { 

    border-radius:50%;
    width:40px;
    height:40px;
    display:block;
    float:left;
    border:2px solid #000000;
    color:#000000;
    text-align:center;
    margin-right:5px;

}

Partiye geç kaldım ama işte gittiğim çözüm https://codepen.io/jnbruno/pen/vNpPpW

css:

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

html:

<div class="panel-body">
                            <h4>Normal Circle Buttons</h4>
                            <button type="button" class="btn btn-default btn-circle"><i class="fa fa-check"></i>
                            </button>
                            <button type="button" class="btn btn-primary btn-circle"><i class="fa fa-list"></i>
                            </button>
</div>

Ekstra çalışma gerektirmez. Teşekkürler John Noel Bruno

CSS'nizde böyle bir şey yapın

 div {
    genişlik: 10em; yükseklik: 10em;
    -webkit-sınır-yarıçapı: 5em; -moz-sınır-yarıçapı: 5em;
  }
  p {
    metin hizalama: merkez; kenar boşluğu: 4.5em;
  }

Metni yazmak için paragraf etiketini kullanın. umarım yardımcı olur

Burada yaptığım gibi bir şey işe yarayabilir (0 ila 99 numaraları için):

CSS:

.circle {
    border: 0.1em solid grey;
    border-radius: 100%;
    height: 2em;
    width: 2em;
    text-align: center;
}

.circle p {
    margin-top: 0.10em;
    font-size: 1.5em;
    font-weight: bold;
    font-family: sans-serif;
    color: grey;
}

HTML:

<body>
    <div class="circle"><p>30</p></div>
</body>

İlk cevabı geliştirmek sadece dolgudan kurtulun ve ekleyin line-heightve vertical-align:

.numberCircle {
   border-radius: 50%;       

   width: 36px;
   height: 36px;
   line-height: 36px;
   vertical-align:middle;

   background: #fff;
   border: 2px solid #666;
   color: #666;

   text-align: center;
   font: 32px Arial, sans-serif;
}

Heres benim kare yöntemini kullanarak benim yolum. tersi, farklı değerlerle çalışır, ancak 2 açıklığa ihtiyacınız vardır.

.circle {
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  padding: 5px;
}
.circle::after {
  content: '';
  display: block;
  padding-bottom: 100%;
  height: 0;
  opacity: 0;
}
.num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.width_holder {
  display: block;
  height: 0;
  overflow: hidden;
}

<div class="circle">
  <span class="width_holder">1</span>
  <span class="num">1</span>
</div>
<div class="circle">
  <span class="width_holder">11</span>
  <span class="num">11</span>
</div>
<div class="circle">
  <span class="width_holder">11111</span>
  <span class="num">11111</span>
</div>
<div class="circle">
  <span class="width_holder">11111111</span>
  <span class="num">11111111</span>
</div>

Otuzdot'un cevabı doğrudur, ancak küçük bir noktası yoktur. Çemberde ortalanmış bir değere sahip olmak ve farklı sayı aralıkları eklemek istiyorsanız, konum: göreli eklemeniz gerekir . Örneğin 123;

HTML:

<div class="numberCircle">30</div>

CSS:

.numberCircle {    

border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
position: relative;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;

font: 32px Arial, sans-serif;
}

ancak en kolay çözüm Bootstrap kullanmaktır

<span class="badge" style ="float:right">123</span>