จะใช้ CSS เพื่อล้อมรอบตัวเลขด้วยวงกลมได้อย่างไร?

250

ฉันต้องการล้อมรอบตัวเลขในวงกลมเช่นในภาพนี้:

ตัวเลขในภาพวงกลม

เป็นไปได้หรือไม่และเป็นไปได้อย่างไร

html css css-shapes

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 ลองดูคำตอบเก่าของฉัน

— thirtydot
แหล่งที่มา

Internet Explorer เวอร์ชันล่าสุดในปัจจุบันรองรับการใช้เส้นขอบรัศมี ... และ div ไม่ใช่ตัวเลือกที่ยอดเยี่ยมสำหรับสิ่งนี้ :)

— reisio

7

จอแสดงผล: บล็อกแบบอินไลน์;

— Kirkland

1

@ KyleMit: เป็นความคิดที่ดีในทางทฤษฎี น่าเสียดายที่ CSS3 PIE มีข้อ จำกัด โดเมนเดียวกัน

— สามสิบ

3

เพื่อหลีกเลี่ยงการทำคณิตศาสตร์ใน CSS เมื่อใดก็ตามที่คุณเปลี่ยนขนาดตัวอักษร (ยุ่งยากหากคุณกำลังออกแบบแบบตอบสนอง) คุณสามารถใช้การปรับตัวของ jsfiddle ของสามสิบdotที่ใช้พิกเซลเพื่ออธิบายขนาดตัวอักษร: jsfiddle net / dQR9T / 7058

— Steven

1

@ วิธีการตรวจสอบให้แน่ใจวงกลมอยู่เสมอจำนวนหรือเราสามารถทำให้วงกลมใหญ่ขึ้นถ้าจำนวน 24928 มันล้นในขณะนี้

— หม้อแปลง

109

ปัญหาของคำตอบอื่น ๆ ส่วนใหญ่ที่นี่คือคุณต้องปรับขนาดของคอนเทนเนอร์ด้านนอกเพื่อให้มีขนาดที่สมบูรณ์แบบตามขนาดตัวอักษรและจำนวนตัวอักษรที่จะแสดง หากคุณกำลังผสมตัวเลข 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

— ไมค์
แหล่งที่มา

นั่นคือปัญหาที่ฉันมีโดยแสดงเปอร์เซ็นต์ภายในที่อาจเป็น '1', '10' หรือ '100' มันใช้งานได้ดีขอบคุณ!

— เฟลิเป้คาสโตร

โปรดทราบว่าการแก้ไขที่แนะนำนี้ถูกปฏิเสธ แต่การเปลี่ยนแปลงทำให้ข้อความอยู่ตรงกลางแนวตั้งได้ดีขึ้นเล็กน้อยดังนั้นฉันจึงเพิ่มคำตอบลงไปด้วยตนเอง

— Mike

นี่คือคำตอบที่ดีกว่า ฉันจะใช้ TranslateY (-50%) แทนการลบขอบบนสุด

— Tobias

@Tobias ขอขอบคุณสำหรับความคิดที่ยอดเยี่ยม ฉันอัพเดตคำตอบแล้ว

— Mike

มันจะสะอาดกว่ามากในการลบการขยายและเพิ่มtext-alignและline-heightการหาร ยังคงเป็นคำตอบที่ดีที่สุด

— dlsso

51

หากเป็น 20 และต่ำกว่าคุณสามารถใช้อักขระ Unicode ①② ... ⑳

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

— ทอมเอ็น
แหล่งที่มา

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-'s เพื่อกำหนดรัศมีจากนั้นขยายความสูงเพื่อให้ตรงกับการใช้padding-ของ margin-'s จะต้องมีการปรับขึ้นอยู่กับขนาดตัวอักษร

อัปเดตเพื่อลบองค์ประกอบภายใน:

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

ใช้องค์ประกอบหลอกเพื่อบังคับให้สูง ต้องการพื้นที่กว้างเป็นศูนย์สำหรับการจัดตำแหน่งแนวตั้ง ย้ายline-height:0pxจากด้านนอกไปยังหลอกเพื่อให้มองเห็นได้เป็นอย่างน้อยเมื่อทำการลดระดับลงสำหรับ IE8

— ryachza
แหล่งที่มา

5

สำหรับฉันนี่เป็นทางออกที่ดีที่สุด จะช่วยให้ตัวเลขที่มีขนาดใหญ่ขึ้นและสามารถปรับขนาดได้มากที่สุด โซลูชันอื่น ๆ ทั้งหมดมีวิธีเข้ารหัสขนาดที่หนักเกินไป สิ่งนี้มีน้อย ขนาดแบบอักษรสามารถเปลี่ยนแปลงได้ในจำนวนที่เหมาะสมโดยไม่ทำลาย หากมีการเปลี่ยนแปลงอย่างมากจำเป็นต้องปรับระยะขอบ แต่ก็เป็นการให้อภัยอย่างมาก ต้องใช้องค์ประกอบที่ซ้อนกันค่อนข้างเป็นลบ

— Necreaux

@Necreaux อัปเดตคำตอบด้วยรุ่นที่แทนที่องค์ประกอบภายในอย่างชัดเจนด้วยองค์ประกอบหลอก

— ryachza

1

ทางออกที่ดีที่สุดแน่นอน ฉันเพิ่งเปลี่ยนมาร์จิ้นซ้ายและขนาดมาร์จิ้นขวา 0.35em แทนที่จะเป็น 8px (padding ในโซลูชันที่อัปเดต) เพื่อให้คุณสามารถเปลี่ยนขนาดแบบอักษรจำนวนและรักษาระยะห่างที่เหมาะสม

— Jibato

25

วิธีที่ง่ายที่สุดคือใช้ bootstrap และคลาส badge

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

— Navid
แหล่งที่มา

4

มันเยี่ยมมาก! ฉันกำลังใช้ bootstrap อยู่ฉันไม่ทราบว่ามีคลาสนี้อยู่

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

— Wolfgang Ziegler
แหล่งที่มา

1

สวัสดีนี่เป็นสิ่งที่ดีมาก แต่ถ้าจำนวนมีขนาดใหญ่แม้ใน 100 หรือ 1,000 ก็เลื่อนออกจากวงกลม นอกจากนี้เป็นไปได้ไหมที่จะใช้ขนาดของแบบอักษรเพื่อสร้างสีพื้นหลังใหม่

— หม้อแปลง

1

ทางออกที่สวยงาม!

— jomofrodo

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 ยังไม่รองรับมุมโค้งมน

— kayahr
แหล่งที่มา

อย่าลืม `-webkit-border-radius: 15px;` ยังมีการแก้ไขสำหรับเช่นhtmlremix.com/css/curved-corner-border-radius-cross-browserแต่คิดว่าสองครั้งเกี่ยวกับการใช้มัน

— ฮานเนส

+1 อาจเป็นวิธีที่ง่ายที่สุด ... ทางเลือกสำหรับ IE ก็โอเคเช่นกัน (ตาราง) wordpress ทำแบบนี้ถ้าฉันจำได้

— 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

ไปงานปาร์ตี้สาย แต่นี่เป็นวิธีการบูตอย่างเดียวที่เหมาะกับฉัน ฉันใช้ 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>

ขยายตัวอย่างข้อมูล

โดยทั่วไปคุณจะเพิ่มbg-dark text-white rounded-circle px-3 py-1 mx-2 h3คลาสให้กับ<span>องค์ประกอบ (หรืออะไรก็ตาม) และคุณก็ทำเสร็จแล้ว

โปรดทราบว่าคุณอาจต้องปรับระดับมาร์จิ้นและคลาสเสริมหากเนื้อหาของคุณมีมากกว่าหนึ่งหลัก

— DotNet
แหล่งที่มา

2

คุณทำงานเหมือนกับบล็อกมาตรฐานนั่นคือสี่เหลี่ยมจัตุรัส

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

นี่เป็นคุณสมบัติของ CSS 3 และมันก็ไม่ได้ยอดเยี่ยมนักคุณสามารถไว้วางใจใน Firefox และซาฟารีได้อย่างแน่นอน

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

— Damian Leszczyński - Vash
แหล่งที่มา

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;

}

— Leonardo Vega
แหล่งที่มา

ในขณะที่รหัสนี้มีประโยชน์มันจะดีที่จะให้คำอธิบายบางอย่าง

— 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
แหล่งที่มา

John Noel Bruno คือใคร หากได้รับจากบล็อกหรือบทช่วยสอนการเชื่อมโยงจะเป็น

— Dush

1

ทำอะไรแบบนี้ใน CSS ของคุณ

 div {
    ความกว้าง: 10em; ความสูง: 10em;
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    จัดเรียงข้อความ: กึ่งกลาง; margin-top: 4.5em;
  }

ใช้แท็กย่อหน้าเพื่อเขียนข้อความ หวังว่าจะช่วย

— 1000Suns
แหล่งที่มา

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

การปรับปรุงคำตอบแรกให้กำจัด padding และเพิ่ม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;
}

— Hubyx Reds
แหล่งที่มา

1

นี่คือวิธีของฉันในการทำมันโดยใช้วิธีกำลังสอง กลับหัวกลับหางเป็นมันทำงานได้กับค่าที่แตกต่างกัน แต่คุณต้องมี 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>

ขยายตัวอย่างข้อมูล

— คริสหลี่
แหล่งที่มา

0

คำตอบของสามสิบไม่ถูกต้อง แต่หายไปเล็กน้อย คุณต้องเพิ่มตำแหน่ง: สัมพัทธ์ถ้าคุณต้องการให้มีค่ากึ่งกลางในวงกลมและรวมถึงช่วงที่แตกต่างกันของจำนวน ตัวอย่างเช่น 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;
}

แต่ทางออกที่ง่ายที่สุดคือการใช้ Bootstrap

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

— Marco Maggiotti
แหล่งที่มา