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

250

이 이미지와 같이 원 안에 숫자를 둘러싸고 싶습니다.

원 이미지의 숫자

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

html css css-shapes

— 펜티엄 10
소스

442

.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에 관심이 있다면 이전 버전 의 대답을보십시오.

— 서른 점
소스

현재 최신 버전의 Internet Explorer 9는 실제로 경계 반경을 지원합니다. ... 그리고 div는 이것을위한 좋은 선택이 아닙니다. :)

— reisio

7

디스플레이 : 인라인 블록;

— 커클랜드

1

@KyleMit : 이론적으로는 좋은 생각입니다. 불행히도 CSS3 PIE는 같은 도메인 제한이 있습니다.

— thirtydot

3

글꼴 크기 (예 : 반응 형 디자인을 수행하는 경우 번거 로움)를 변경할 때마다 CSS에서 수학을 수행하지 않으려면 픽셀 만 사용하여 글꼴 크기를 설명하는 thirtydot의 jsfiddle을 사용할 수 있습니다. jsfiddle. net / dQR9T / 7058

— Steven

1

어떻게 확인하는 @steven 원 숫자의 주위에 항상 번호가 24928 인 경우, 또는 우리가 원 더 큰 수 는 지금 오버 플로우

— 변압기

108

여기에있는 다른 답변의 대부분의 문제는 표시 할 글꼴 크기와 문자 수에 따라 완벽한 크기가되도록 외부 컨테이너의 크기를 조정해야한다는 것입니다. 1 자리 숫자와 4 자리 숫자를 혼합하면 작동하지 않습니다. 글꼴 크기와 원 크기의 비율이 완벽하지 않으면 큰 원의 상단에 타원이나 작은 숫자가 세로로 정렬됩니다. 이것은 많은 양의 텍스트와 크기 원에 잘 작동합니다. widthand 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에를 참조하십시오 .

— 마이크
소스

그것은 내가 겪고있는 문제이며, 그 안에 백분율이 '1', '10'또는 '100'일 수 있습니다. 이것은 완벽하게 작동합니다, 감사합니다!

— Felipe Castro

참고 이 제안 편집 거부되었습니다,하지만 난 수동 대답에 추가했습니다 있도록 변경 사항이 실제로 수직으로 조금 더 나은 텍스트를 중심으로.

— Mike

이것이 더 나은 대답입니다. 음수 상단 마진 대신 translateY (-50 %)를 사용합니다

— Tobias

@Tobias 좋은 생각 감사합니다. 내 답변을 업데이트했습니다.

— Mike

범위를 제거하고 추가하는 많은 청소기 것 text-align및 line-height사업부에. 아마도 가장 좋은 대답 일 것입니다.

— dlsso

51

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

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

— 톰 N
소스

11

좋은 생각이지만 원이 표시 목적으로 만 사용되는 경우 시맨틱을 깨뜨리는 것에주의하십시오.

— cubabit

41

내용에 따라 달라지는 원 크기의 경우 다음과 같이 작동합니다.

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-의를 사용하여 일치하도록 높이를 확장합니다 padding-. 의 margin-글꼴 크기에 따라를 조정해야합니다.

내부 요소를 제거하도록 업데이트하십시오.

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

의사 요소를 사용하여 높이를 강제합니다. 수직 정렬을 위해 폭이 0 인 공간이 필요합니다. line-height:0pxIE8에 대해 저하 될 때 적어도 보이도록 바깥 쪽에서 의사 로 옮겼습니다 .

— 랴 치자
소스

5

나에게 이것은 최고의 해결책이었다. 더 큰 숫자를 허용하며 가장 확장 가능합니다. 다른 모든 솔루션에는 너무 많은 하드 코딩 크기가 있습니다. 이것은 가장 적습니다. 이것을 깨지 않고 서체 크기를 상당히 변경할 수 있습니다. 대폭 변경되면 마진을 조정해야하지만 매우 용서합니다. 중첩 된 요소를 사용해야하는 것은 다소 부정적인 것입니다.

— Necreaux

@Necreaux 명시적인 내부 요소를 의사 요소로 대체하는 버전으로 답변을 업데이트했습니다.

— ryachza

1

실제로 최고의 솔루션. 방금 여백 왼쪽과 여백 오른쪽 크기를 8px 대신 0.35em으로 바꿨습니다 (업데이트 된 솔루션의 패딩). 따라서 글꼴 크기를 변경하고 적절한 여백을 유지할 수 있습니다.

— Jibato

25

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

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

— 네이비
소스

4

대단해! 나는 이미 부트 스트랩을 사용하고 있으며,이 클래스가 존재한다는 것을 몰랐습니다.

— Justin

1

좋은 답변 navid!

— SeyedPooya Soofbaf

22

이 버전은 하드 코드, 고정 된 값에 의존하지만, 상대적 크기를하지 않는다 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>

— 볼프강 지글러
소스

1

안녕하세요, 이것은 매우 좋지만 숫자가 큰 경우에도 100 또는 1000에서도 원에서 스크롤됩니다. 또한 글꼴의 크기를 사용하여 새로운 배경색을 만들 수

— 변환기

1

아름다운 해결책!

— jomofrodo 19

8

테두리 반경을 사용할 수 있습니다.

<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가 여전히 둥근 모서리를 지원하지 않는 것 같습니다.

— 카야
소스

`-webkit-border-radius : 15px;`도 잊지 말고 IE htmlremix.com/css/curved-corner-border-radius-cross-browser에 대한 수정이 있지만 구현에 대해 두 번 생각하십시오

— Hannes

아마도 가장 쉬운 방법은 +1 일 것입니다 ... IE의 폴 백도 괜찮습니다 (사각형). 내가 기억하면 워드 프레스는 이것을 좋아합니다

— Ross

4

내 솔루션은 여기-다양한 크기와 색상 및 편집 제어를 위해 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;
}

이 작업을 수행하는 방법을보기가 어렵지 않습니다. 더 큰 문제는 원의 크기를 내용에 맞게 조정할 수 있는지 여부입니다.

현재는 가능하지 않다고 생각합니다. 누군가?

— Bearinthewoods
소스

3

파티에 늦었지만 여기에 부트 스트랩 전용 솔루션이 있습니다. 부트 스트랩 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> (또는 무엇이든) 요소 하면 완료됩니다.

콘텐츠에 두 자리 이상이있는 경우 여백 및 패딩 클래스를 조정해야 할 수도 있습니다.

— 닷넷
소스

2

표준 블록과 같은 방식으로 작동합니다.

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

이것은 CSS 3의 기능이며 잘 지원되지 않습니다. 파이어 폭스와 사파리를 확실히 믿을 수 있습니다.

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

— Damian Leszczyński-배쉬
소스

2

HTML 예

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

암호

    .numberCircle { 

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

}

— 레오나르도 베가
소스

이 코드는 유용하지만 몇 가지 설명을 제공하는 것이 좋습니다

— mhatch

2

파티에 늦었지만 여기에 내가 가진 해결책이 있습니다. 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>

추가 작업이 필요하지 않았습니다. 감사합니다 John Noel Bruno

— Dt23
소스

존 노엘 브루노는 누구입니까? 블로그 나 튜토리얼을 통해 얻을 수 있다면 링크를 제공하는 것이

— Dush

1

CSS에서 이와 같은 작업을 수행하십시오.

 div {
    폭 : 10em; 높이 : 10em;
    -웹킷 경계 반경 : 5em; -경계-반경 : 5em;
  }
  p {
    텍스트 정렬 : 가운데; 마진 상단 : 4.5em;
  }

단락 태그를 사용하여 텍스트를 작성하십시오. 희망이 도움이

— 1000 일
소스

1

내가 여기에서 한 것과 같은 것이 작동 할 수 있습니다 (0에서 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>

— jstol
소스

1

첫 번째 답변을 개선하면 패딩을 제거하고 추가 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;
}

— 후 빅스 레즈
소스

1

여기 제곱 방법을 사용하여 내 방식을 수행합니다. 거꾸로 다른 값으로 작동하지만 두 범위가 필요합니다.

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

스 니펫 확장

— 크리스 리
소스

0

thirtydot의 대답은 옳지 만 약간의 요점이 없습니다. 원에 중심 값을 설정하고 다른 숫자 범위를 포함하려면 position : relative 을 추가해야합니다 . 예를 들어 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>

— 마르코 마지 오티
소스