programing

CSS를 사용하여 숫자를 원으로 둘러싸는 방법은 무엇입니까?

css3 2023. 8. 23. 21:56

CSS를 사용하여 숫자를 원으로 둘러싸는 방법은 무엇입니까?

다음 이미지와 같이 숫자를 원으로 둘러싸려고 합니다.

Number in Circle Image

이것이 가능하며 어떻게 달성됩니까?

다음은 JSFiddle에 대한 데모와 스니펫입니다.

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

제 대답은 좋은 출발점입니다. 다른 대답 중 일부는 다양한 상황에 유연성을 제공합니다.IE8이 마음에 든다면, 제 대답의 이전 버전을 보세요.

여기에 나와 있는 대부분의 다른 답변의 문제는 표시할 글꼴 크기와 문자 수에 따라 완벽한 크기가 되도록 외부 컨테이너의 크기를 조정해야 한다는 것입니다.1자리 숫자와 4자리 숫자를 섞으면 작동하지 않습니다.글꼴 크기와 원 크기의 비율이 완벽하지 않으면 타원형 또는 작은 숫자가 큰 원의 맨 위에 수직으로 정렬됩니다.텍스트의 양과 크기에 관계없이 모든 크기의 원에 적합합니다.설정만 하면 됩니다.width그리고.line-height동일한 값으로:

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

내용물을 더 길게 또는 더 짧게 만들어야 할 경우, 더 잘 맞도록 용기의 너비를 조정하기만 하면 됩니다.

JSFiddle에서 확인하십시오.

내용에 따라 다른 원 크기의 경우 다음과 같이 작동해야 합니다.

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

컨텐츠의 폭과 추가에 의존합니다.margin-는 반지름을 결정한 다음, 다음을 사용하여 일치하도록 높이를 확장합니다.padding- s. margin-글꼴 크기에 따라 를 조정해야 합니다.

내부 요소를 제거하기 위한 업데이트:

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

유사 요소를 사용하여 높이를 적용합니다.수직 정렬을 위해 0 너비 공간이 필요합니다.이동했습니다.line-height:0px적어도 IE8에 대해 저하될 때 볼 수 있도록 외부에서 유사까지.

20 이하의 경우 유니코드 문자 ① ... ⑳를 사용하면 됩니다.

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

가장 쉬운 방법은 부트스트랩 및 배지 클래스를 사용하는 것입니다.

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

이 버전은 하드 코딩되고 고정된 값에 의존하지 않고 상대적인 크기에 의존합니다.font-size의 시대의div.

http://jsfiddle.net/qod1vstv/

enter image description here

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>

다음에 테두리 반지름을 사용할 수 있습니다.

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

결과가 만족스러울 때까지 테두리 반지름과 패딩 값을 사용합니다.

하지만 모든 브라우저에서 이 기능이 작동하지는 않습니다.IE는 여전히 둥근 모서리를 지원하지 않는 것 같습니다.

아무도 사용하지 않은 것이 놀랍습니다.flex이 더하기 쉽기 저는 여기에 : 해이하기쉽때기문에다더, 저는여제답넣었습니변을버전의에기다▁which▁here니더넣습었▁of▁version.

  1. 원을 작성하려면 다음과 같이 하십시오.widthheight
  2. font-size안에 에서 원에있숫사용의자를 합니다.empx
  3. 사용합니다.justify-content: center; align-items: center;
  4. 들어 보다 많음), (▁the예▁1000들, 1000다),큼보),width그리고.height

다음은 예입니다.

.circled-number {
  color: #666;
  border: 2px solid #666;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em; 
  height: 2em;
}

.circled-number--big {
  color: #666;
  border: 2px solid #666;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4em; 
  height: 4em;
}
<div class="circled-number">
  30
</div>

<div class="circled-number--big">
  3000000
</div>

파티에 늦었지만, 여기 부트스트랩 전용 솔루션이 있습니다.부트스트랩 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>

으로 기적으추다니합가를 합니다.bg-dark text-white rounded-circle px-3 py-1 mx-2 h3의 의스래에 .<span>(혹은 무엇이든) 요소만 있으면 당신은 끝입니다.

내용에 두 자리 이상의 숫자가 있는 경우 여백 및 패딩 클래스를 조정해야 할 수 있습니다.

여기서 저의 해결책은 다양한 크기와 색상을 쉽게 허용하고 편집 제어를 위해 CMS에 연결할 수 있습니다.사각형으로 분해되는 IE에 대해.

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

이것을 어떻게 하는지 보는 것은 그리 어렵지 않습니다.더 큰 문제는 원의 치수를 내용에 맞게 축척할 수 있는지 여부입니다.

현재는 불가능하다고 생각합니다.누구라도 있나요?

enter image description here

다음은 JSFiddle에 대한 데모와 스니펫입니다.

/* Creating a number within a circle using CSS */
.numberCircle {
    font-family: "OpenSans-Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 0px;
    border-radius: 50%;
    font-size: 12px;
    min-width: 38px;
    min-height: 38px;
}

.numberCircle span {
    display: inline-block;
    padding-top: 50%;
    padding-bottom: 50%;
    margin-left: 1px;
    margin-right: 1px;
}

/* Some Back Ground Colors */
.clrGreen {
    background: #51a529;
}
.clrRose {
    background: #e6568b;
}
.clrOrange {
    background: #ec8234;
}
.clrBlueciel {
    background: #21adfc;
}
.clrMauve {
    background: #7b5d99;
}
<span class="numberCircle clrGreen"><span>8</span></span>
<span class="numberCircle clrRose"><span>80</span></span>
<span class="numberCircle clrOrange"><span>800</span></span>
<span class="numberCircle clrMauve"><span>8000</span></span>

.numberCircle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: block;
  float: left;
  border: 2px solid #000000;
  color: #000000;
  text-align: center;
  margin-right: 5px;
}
<h3><span class="numberCircle">1</span> Regiones del Interior</h3>

당신의 CSS에서 이와 같은 것을 하라.

디브 {폭: 10em, 높이: 10em;-webkit-border-border-border: 5em; -webkit-border-border-border;}p {텍스트 정렬: 가운데; 여백 맨 위: 4.5em;}

문단 태그를 사용하여 텍스트를 작성합니다.도움이 되길 바랍니다.

번째 을 개선하는 첫 번 개 는 것 은 패 것 다 입 니 고 추 는 하 가 하 제 거 을 딩 째 답 변 하 을 선 ▁improving 다 니 ▁get ▁just 것 입 ▁the ▁and ▁add ▁answer ▁first ▁padding ▁rid 첫line-height그리고.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;
}

30도트의 답은 맞지만 약간의 요점이 빠져 있습니다.원에 중심 값을 포함하고 다른 범위의 숫자도 포함하려면 상대 위치를 추가해야 합니다.예를 들어 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;
}

하지만 가장 쉬운 해결책은 부트스트랩을 사용하는 것입니다.

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

여기에 제곱법을 사용한 저의 방법이 있습니다.다른 값으로 작동하지만 2개의 스팬이 필요합니다.

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

파티에 늦었지만 제가 https://codepen.io/jnbruno/pen/vNpPpW 과 함께 한 해결책은 다음과 같습니다.

추가 작업이 필요 없습니다.존 노엘 브루노에게 감사합니다.

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

다음과 같은 방법으로 작동할 수 있습니다(숫자 0 ~ 99).

.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;
}
<body>
  <div class="circle">
    <p>30</p>
  </div>
</body>

사용할 수 있습니다.

span.red {
    background: red;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.grey {
    background: #cccccc;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.green {
    background: #5EA226;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.blue {
    background: #5178D0;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.pink {
    background: #EF0BD8;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}
    <h1><span class="grey">1</span>A grey circle with number inside</h1>
    <h1><span class="red">2</span>A red circle with number inside</h1>
    <h1><span class="blue">3</span>A blue circle with number inside</h1>
    <h1><span class="green">4</span>A green circle with number inside</h1>
    <h1><span class="pink">5</span>A pink circle with number inside</h1>

https://wpsites.net/web-design/colored-numbered-circles-using-pure-css-html/ 에 감사드립니다.

당신은 표준 블록을 사용하는 것처럼, 그것은 정사각형입니다.

이것은 CSS 3의 기능이며 잘 지원되지 않습니다. 파이어폭스와 사파리에 의존할 수 있습니다.

.circle {
  width: 10em;
  height: 10em;
  -webkit-border-radius: 5em;
  -moz-border-radius: 5em;
  border: 1px solid black;
}
<div class="circle"><span>1234</span></div>

언급URL : https://stackoverflow.com/questions/4861224/how-to-use-css-to-surround-a-number-with-a-circle

'programing' 카테고리의 다른 글

Android 에뮬레이터의 실행 속도 향상  (0) 2023.08.23
IE 11을 위한 CSS 해킹을 작성하는 방법은 무엇입니까?  (0) 2023.08.23
Swift에서 단추 제목 정렬을 변경하는 방법은 무엇입니까?  (0) 2023.08.23
CSS를 사용하여 오른쪽에서 배경 이미지 오프셋  (0) 2023.08.23
git 원격 태그와 이름이 같은 로컬 분기 푸시  (0) 2023.08.23

'programing'의 다른글

  • 현재글CSS를 사용하여 숫자를 원으로 둘러싸는 방법은 무엇입니까?

관련글

댓글

티스토리툴바