Làm cách nào để sử dụng CSS để bao quanh một số bằng một vòng tròn?

Tôi muốn bao quanh một số trong một vòng tròn như trong hình ảnh này:

Điều này là có thể và làm thế nào nó đạt được?

Đây là bản demo trên JSFiddle và đoạn trích:

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

Câu trả lời của tôi là một điểm khởi đầu tốt, một số câu trả lời khác cung cấp sự linh hoạt cho các tình huống khác nhau. Nếu bạn quan tâm đến IE8, hãy xem phiên bản cũ của câu trả lời của tôi.

Vấn đề với hầu hết các câu trả lời khác ở đây là bạn cần điều chỉnh kích thước của thùng chứa bên ngoài để nó có kích thước hoàn hảo dựa trên kích thước phông chữ và số lượng ký tự được hiển thị. Nếu bạn trộn các số có 1 chữ số và số có 4 chữ số, nó sẽ không hoạt động. Nếu tỷ lệ giữa kích thước phông chữ và kích thước vòng tròn không hoàn hảo, bạn sẽ kết thúc bằng một hình bầu dục hoặc một số nhỏ được sắp xếp theo chiều dọc ở đầu một vòng tròn lớn. Điều này sẽ hoạt động tốt cho bất kỳ số lượng văn bản và bất kỳ vòng tròn kích thước. Chỉ cần đặt widthvà line-heightcùng một giá trị:

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

Nếu bạn cần làm cho nội dung dài hơn hoặc ngắn hơn, tất cả những gì bạn cần làm là điều chỉnh độ rộng của thùng chứa cho phù hợp hơn.

Xem nó trên JSFiddle .

Nếu là 20 và thấp hơn, bạn chỉ có thể sử dụng các ký tự unicode ① ② ...

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

Đối với kích thước vòng tròn khác nhau dựa trên nội dung, điều này sẽ hoạt động:

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

Nó dựa vào chiều rộng của nội dung cộng với margin-'s để xác định bán kính, sau đó mở rộng chiều cao cho phù hợp bằng cách sử dụng padding-' s. Cácmargin- 's sẽ cần phải được điều chỉnh dựa trên font-size.

Cập nhật để loại bỏ yếu tố bên trong:

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

Sử dụng các yếu tố giả để buộc chiều cao. Cần không gian chiều rộng bằng không để căn chỉnh dọc. Đã chuyển line-height:0pxtừ bên ngoài sang giả để nó ít nhất có thể nhìn thấy khi xuống cấp cho IE8.

cách dễ nhất là sử dụng lớp bootstrap và huy hiệu

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

Phiên bản này không dựa trên các giá trị mã hóa cứng, cố định nhưng kích thước tương đối so với font-sizecácdiv .

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>

Bạn có thể sử dụng bán kính đường viền cho việc này:

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

Chơi với bán kính đường viền và các giá trị đệm cho đến khi bạn hài lòng với kết quả.

Nhưng điều này sẽ không hoạt động trong tất cả các trình duyệt. Tôi đoán IE vẫn không hỗ trợ các góc tròn.

Giải pháp của tôi ở đây - điều này dễ dàng cho phép các kích cỡ và màu sắc khác nhau và liên kết vào một CMS để kiểm soát biên tập. Đối với IE xuống cấp thành hình vuông.

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

Không quá khó để thấy cách làm điều này. Câu hỏi lớn hơn là liệu có thể làm cho kích thước của tỷ lệ vòng tròn thành nội dung.

Hiện tại tôi không nghĩ rằng nó có thể. Bất kỳ ai?

Đi dự tiệc muộn, nhưng đây là một giải pháp chỉ dành cho bootstrap đã làm việc cho tôi. Tôi đang sử dụng 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>

Về cơ bản, bạn thêm bg-dark text-white rounded-circle px-3 py-1 mx-2 h3các lớp vào<span> phần tử (hoặc bất cứ thứ gì) và bạn đã hoàn thành.

Lưu ý rằng bạn có thể cần điều chỉnh các lớp ký quỹ và lớp đệm nếu nội dung của bạn có nhiều hơn một chữ số.

Bạn làm việc như với một khối tiêu chuẩn, đó là một hình vuông

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

Đây là tính năng của CSS 3 và nó không được cung cấp nhiều lắm, bạn có thể tin tưởng vào firefox và safari.

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

VÍ DỤ HTML

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

MÃ

    .numberCircle { 

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

}

Đến bữa tiệc muộn nhưng đây là giải pháp tôi đã đi với 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>

Yêu cầu không có việc làm thêm. Cảm ơn John Noel Bruno

Làm một cái gì đó như thế này trong css của bạn

 div {
    chiều rộng: 10em; chiều cao: 10em;
    -webkit-Border-radius: 5em; -moz-viền-bán kính: 5em;
  }
  p {
    văn bản-align: trung tâm; lề trên: 4,5em;
  }

Sử dụng thẻ đoạn văn để viết văn bản. Mong rằng sẽ giúp

Một cái gì đó giống như những gì tôi đã làm ở đây có thể hoạt động (cho các số từ 0 đến 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>

Cải thiện câu trả lời đầu tiên chỉ cần thoát khỏi phần đệm và thêm line-heightvà 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;
}

Đây là cách của tôi để làm điều đó, sử dụng phương pháp vuông. Ưu điểm là nó hoạt động với các giá trị khác nhau, nhưng bạn cần 2 nhịp.

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

Câu trả lời của ba mươi là đúng nhưng thiếu một chút điểm. Bạn cần thêm vị trí: tương đối , nếu bạn muốn có giá trị trung tâm trong vòng tròn và bao gồm cả phạm vi số khác nhau. Ví dụ 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;
}

nhưng một giải pháp đơn giản nhất là sử dụng Bootstrap

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