Bagaimana cara menggunakan CSS untuk mengelilingi angka dengan lingkaran?

Saya ingin mengelilingi angka dalam lingkaran seperti pada gambar ini:

Apakah ini mungkin dan bagaimana cara dicapai?

Berikut ini demo tentang JSFiddle dan cuplikan:

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

Jawaban saya adalah titik awal yang baik, beberapa jawaban lain memberikan fleksibilitas untuk situasi yang berbeda. Jika Anda peduli tentang IE8, lihat versi lama jawaban saya.

Masalah dengan sebagian besar jawaban lain di sini adalah Anda perlu mengubah ukuran wadah luar sehingga ukurannya sempurna berdasarkan ukuran font dan jumlah karakter yang akan ditampilkan. Jika Anda mencampur 1 angka dan 4 angka, itu tidak akan berfungsi. Jika rasio antara ukuran font dan ukuran lingkaran tidak sempurna, Anda akan berakhir dengan oval atau angka kecil yang disejajarkan secara vertikal di bagian atas lingkaran besar. Ini akan berfungsi dengan baik untuk jumlah teks dan lingkaran ukuran berapa pun. Cukup atur widthdan line-heightke nilai yang sama:

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

Jika Anda perlu membuat konten lebih panjang atau lebih pendek, yang perlu Anda lakukan adalah menyesuaikan lebar wadah agar lebih pas.

Lihat di JSFiddle .

Jika 20 dan lebih rendah, Anda bisa menggunakan karakter unicode ① ② ... ⑳

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

Untuk ukuran lingkaran bervariasi berdasarkan konten, ini harus berfungsi:

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

Ini bergantung pada lebar konten plus margin-'s untuk menentukan jari-jari, kemudian memperpanjang tinggi untuk mencocokkan menggunakan padding-' s. Itu margin-perlu disesuaikan berdasarkan ukuran font.

Perbarui untuk menghapus elemen dalam:

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

Menggunakan elemen semu untuk memaksa ketinggian. Perlu ruang lebar nol untuk perataan vertikal. Pindahkan line-height:0pxdari luar ke pseudo sehingga setidaknya terlihat ketika mendegradasi untuk IE8.

cara termudah adalah menggunakan bootstrap dan kelas lencana

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

Versi ini tidak bergantung pada nilai-nilai dikodekan keras, tetap tetapi ukuran relatif terhadap font-sizesatu 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>

Anda dapat menggunakan radius batas untuk ini:

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

Mainkan dengan radius batas dan nilai padding hingga Anda puas dengan hasilnya.

Tetapi ini tidak akan bekerja di semua browser. Saya kira IE masih tidak mendukung sudut membulat.

Solusi saya di sini - ini dengan mudah memungkinkan untuk berbagai ukuran dan warna dan ikatan menjadi CMS untuk kontrol editorial. Untuk IE menurunkan ke kotak.

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

Tidak terlalu sulit untuk melihat bagaimana melakukan ini. Pertanyaan yang lebih besar adalah apakah mungkin untuk membuat dimensi skala lingkaran menjadi konten.

Saat ini saya tidak berpikir itu mungkin. Siapa saja?

Terlambat ke pesta, tapi di sini ada solusi bootstrap-only yang bekerja untuk saya. Saya menggunakan Bootstrap 4:

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

Anda pada dasarnya menambahkan bg-dark text-white rounded-circle px-3 py-1 mx-2 h3kelas ke <span>elemen (atau apa pun) Anda dan selesai.

Perhatikan bahwa Anda mungkin perlu menyesuaikan kelas margin dan padding jika konten Anda memiliki lebih dari satu digit.

Anda bekerja seperti dengan blok standar, yaitu persegi

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

Ini adalah fitur CSS 3 dan tidak didukung dengan sangat baik, Anda dapat mengandalkan firefox dan safari pasti.

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

CONTOH HTML

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

KODE

    .numberCircle { 

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

}

Terlambat ke pesta tapi inilah solusinya aku pergi dengan 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>

Tidak diperlukan kerja ekstra. Terima kasih John Noel Bruno

Lakukan sesuatu seperti ini di css Anda

 div {
    lebar: 10em; tinggi: 10em;
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    perataan teks: tengah; margin-top: 4.5em;
  }

Gunakan tag paragraf untuk menulis teks. Semoga itu bisa membantu

Sesuatu seperti apa yang saya lakukan di sini dapat berfungsi (untuk angka 0 hingga 99):

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>

Meningkatkan jawaban pertama, cukup singkirkan bantalan dan tambahkan line-heightdan 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;
}

Inilah cara saya melakukannya, menggunakan metode persegi. Kelebihannya, ia bekerja dengan nilai yang berbeda, tetapi Anda membutuhkan 2 bentang.

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

Jawaban tiga puluh titik benar tetapi tidak ada gunanya. Anda perlu menambahkan posisi: relatif , jika Anda ingin memiliki nilai terpusat dalam lingkaran dan memasukkan juga rentang angka yang berbeda. Misalnya 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;
}

tetapi solusi termudah adalah menggunakan Bootstrap

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