एक चक्र के साथ एक संख्या को घेरने के लिए सीएसएस का उपयोग कैसे करें?

Question

मैं इस छवि की तरह एक चक्र में एक संख्या को घेरना चाहता हूं:

क्या यह संभव है और यह कैसे प्राप्त किया जाता है?

Answer 1

यहाँ 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 के बारे में परवाह करते हैं, तो पुराने संस्करण को देखें मेरे उत्तर को देखें।

Comments

इंटरनेट एक्सप्लोरर, 9 का वर्तमान नवीनतम संस्करण, वास्तव में सीमा-त्रिज्या का समर्थन करता है। ... और div इसके लिए एक बढ़िया विकल्प नहीं है। :)

— reisio

प्रदर्शन: इनलाइन-ब्लॉक;

— कर्कलैंड

@KyleMit: यह एक अच्छा विचार है, सिद्धांत रूप में। दुर्भाग्य से, CSS3 PIE में एक ही-डोमेन सीमा है ।

— ९

सीएसएस में गणित करने से बचने के लिए जब भी आप फ़ॉन्ट-आकार बदलते हैं (एक परेशानी यदि आप उदाहरण के लिए उत्तरदायी डिजाइन कर रहे हैं), तो आप तीसवाँ के jsfiddle के इस अनुकूलन का उपयोग कर सकते हैं जो केवल फ़ॉन्ट-आकार: jscript का वर्णन करने के लिए पिक्सेल का उपयोग करता है । net / dQR9T / 7058

— स्टीवन

@ यह सुनिश्चित करें कि सर्कल हमेशा संख्या के आसपास कैसे हो , या क्या हम सर्कल को बड़ा बना सकते हैं यदि संख्या 24928 है, यह अभी ओवरफ्लो होता है

— ट्रांसफॉर्मर

Answer 2

यहां अन्य अधिकांश उत्तरों के साथ समस्या यह है कि आपको बाहरी कंटेनर के आकार को मोड़ने की आवश्यकता है ताकि यह फ़ॉन्ट आकार और प्रदर्शित होने वाले वर्णों की संख्या के आधार पर सही आकार हो। यदि आप 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 पर देखें ।

Comments

ठीक यही समस्या मुझे हो रही थी, जो एक प्रतिशत दिखाती थी कि '1', '10' या '100' हो सकती है। यह सही काम करता है, धन्यवाद!

— फेलिप कास्त्रो

ध्यान दें कि इस सुझाव को संपादित करने से इनकार किया गया था, लेकिन परिवर्तन वास्तव में पाठ को थोड़ा बेहतर रूप से केंद्र में रखते हैं, इसलिए मैंने उन्हें मैन्युअल रूप से उत्तर में जोड़ दिया है।

— माइक

यह बेहतर उत्तर है। मैं नकारात्मक शीर्ष मार्जिन के बजाय TranslY (-50%) का उपयोग करूंगा

— टोबियास

@Tobias महान विचार के लिए धन्यवाद। मैंने अपना उत्तर अपडेट कर दिया है।

— माइक

यह बहुत क्लीनर अवधि को हटाने और जोड़ने के लिए किया जाएगा text-alignऔर line-heightdiv करने के लिए। फिर भी शायद सबसे अच्छा जवाब।

— dlsso

Answer 3

यदि यह 20 और कम है, तो आप यूनिकोड वर्ण ① ⑳ ..., का उपयोग कर सकते हैं

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

Comments

एक अच्छा विचार है लेकिन सावधान रहें कि आप शब्दार्थ को तोड़ रहे हैं यदि सर्कल केवल प्रदर्शन उद्देश्यों के लिए है

— क्यूबिट

Answer 4

सामग्री के आधार पर अलग-अलग आकार के लिए यह काम करना चाहिए:

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-'s' का उपयोग करके मिलान करने के लिए ऊँचाई बढ़ाता है । margin-के font-size के आधार पर समायोजित करने की आवश्यकता होगी।

आंतरिक तत्व को हटाने के लिए अपडेट करें:

<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 के लिए अपमानित करते समय यह कम से कम दिखाई दे।

Comments

मेरे लिए, यह सबसे अच्छा समाधान था। यह बड़ी संख्या की अनुमति देता है, और सबसे अधिक स्केलेबल है। अन्य सभी समाधानों में आकार के बहुत कठिन कोडिंग का तरीका है। यह कम से कम है। इसे तोड़े बिना फ़ॉन्ट-आकार को उचित मात्रा में बदला जा सकता है। यदि काफी बदल गया है, तो मार्जिन को समायोजित करने की आवश्यकता है, लेकिन यह बहुत क्षमाशील है। एक नेस्टेड तत्व का उपयोग करना कुछ हद तक नकारात्मक है।

— नेकरेक्स

@Necreaux उस संस्करण के साथ उत्तर को अपडेट करता है जो स्पष्ट आंतरिक तत्व को छद्म तत्वों के साथ बदलता है।

— रयजा

सबसे अच्छा समाधान वास्तव में। मैंने सिर्फ 8px (अपडेटेड सॉल्यूशन में पैडिंग) के बजाय मार्जिन-लेफ्ट और मार्जिन-राइट साइज को 0.35em से बदल दिया है। ताकि आप संख्या फ़ॉन्ट-आकार बदल सकें और एक अनुकूल मार्जिन रख सकें।

— जिबाटो

Answer 5

सबसे आसान तरीका बूटस्ट्रैप और बैज क्लास का उपयोग करना है

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

Comments

यह भी खूब रही! मैं पहले से ही बूटस्ट्रैप का उपयोग कर रहा हूं, मुझे अभी पता नहीं था कि यह वर्ग अस्तित्व में है।

— जस्टिन

अच्छा जवाब!

— सय्यदोपायो सोफबफ

Answer 6

यह संस्करण हार्ड-कोडित, निश्चित मूल्यों पर निर्भर नहीं है, लेकिन इसके सापेक्ष आकार पर निर्भर करता है font-size की div।

http://jsfiddle.net/qod1vstv/

सीएसएस:

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

Comments

नमस्ते यह बहुत अच्छा है, लेकिन अगर संख्या बड़ी है, तो भी 100 या 1000 में यह सर्कल से बाहर स्क्रॉल करता है। इसके अलावा,

— ट्रांसफॉर्मर

सुंदर समाधान!

— 19

Answer 7

आप इसके लिए सीमा-त्रिज्या का उपयोग कर सकते हैं:

<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 अभी भी गोल कोनों का समर्थन नहीं करता है।

Comments

मत भूलना `-webkit- सीमा-त्रिज्या: 15px;` भी IE htmlremix.com/css/curved-corner-border-radius-cross-browser के लिए एक तय है, लेकिन इसे लागू करने के बारे में दो बार सोचते हैं

— हेंस

+1 शायद सबसे आसान तरीका ... IE के लिए फ़ॉलबैक ठीक दिखता है साथ ही (चौकोर)। वर्डप्रेस इसे इस तरह से करता है अगर मुझे याद है

— रॉस

Answer 8

यहाँ मेरा समाधान - यह आसानी से विभिन्न आकारों और रंगों और संपादकीय नियंत्रण के लिए एक सीएमएस में अनुमति देता है। IE के लिए वर्गों को नीचा दिखाना।

HTML :

<div class="circular-label label-outer label-size-large label-color-pink">
    <div class="label-inner"> 
        <span>Fashion & Beauty</span>
    </div>
</div>

सीएसएस :

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

यह देखना बहुत मुश्किल नहीं है कि यह कैसे करना है। इससे भी बड़ा सवाल यह है कि क्या सर्कल स्केल के आयामों को सामग्री बनाना संभव है।

वर्तमान में मुझे नहीं लगता कि यह संभव है। किसी को?

Answer 9

पार्टी के लिए देर हो चुकी है, लेकिन यहां एक बूटस्ट्रैप-एकमात्र समाधान है जो मेरे लिए काम करता है। मैं बूटस्ट्रैप 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> (या जो भी) तत्व में और आप कर रहे हैं।

ध्यान दें कि यदि आपकी सामग्री में एक से अधिक अंक हैं, तो आपको मार्जिन और पेडिंग वर्गों को समायोजित करने की आवश्यकता हो सकती है।

Answer 10

आप एक मानक ब्लॉक के साथ काम करते हैं, वह एक वर्ग है

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

यह सीएसएस 3 की विशेषता है और यह बहुत अच्छी तरह से सुपरकोरेटेड नहीं है, आप फायरफॉक्स और सफारी पर भरोसा कर सकते हैं।

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

Answer 11

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;

}

Comments

जबकि यह कोड उपयोगी है, यह कुछ स्पष्टीकरण प्रदान करना अच्छा होगा

— mhatch

Answer 12

पार्टी के लिए देर हो रही है लेकिन यहाँ समाधान मैं 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>

कोई अतिरिक्त काम नहीं चाहिए। धन्यवाद जॉन नोएल ब्रूनो

Comments

कौन हैं जॉन नोएल ब्रूनो? अगर इसे ब्लॉग या ट्यूटोरियल से प्राप्त करें, तो लिंक प्रदान करना एक प्लस होगा

— Dush

Answer 13

अपने सीएसएस में कुछ ऐसा करें

 div {
    चौड़ाई: 10em; ऊंचाई: 10em;
    -वेबकिट-बॉर्डर-त्रिज्या: 5em; -मोज़-बॉर्डर-रेडियस: 5em;
  }
  पी {
    पाठ-संरेखित करें: केंद्र; मार्जिन-टॉप: 4.5em;
  }

पाठ लिखने के लिए अनुच्छेद टैग का उपयोग करें। उम्मीद है की वो मदद करदे

Answer 14

कुछ ऐसा जो मैंने यहाँ किया है, काम कर सकता है (संख्या 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;
}

HTML:

<body>
    <div class="circle"><p>30</p></div>
</body>

Answer 15

पहले उत्तर को बेहतर बनाते हुए केवल पैडिंग से छुटकारा पाएं और जोड़ें 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;
}

Answer 16

वर्ग विधि का उपयोग करते हुए, इसे करने का मेरा तरीका है। उल्टा यह विभिन्न मूल्यों के साथ काम करता है, लेकिन आपको 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>

Answer 17

तीसवाँ उत्तर सही है लेकिन थोड़ा बिंदु याद आ रहा है। आपको स्थिति जोड़ने की आवश्यकता है : यदि आप सर्कल में केंद्रित मूल्य रखना चाहते हैं और संख्या की अलग-अलग सीमाएं भी शामिल करना चाहते हैं। उदाहरण के लिए 123;

HTML:

<div class="numberCircle">30</div>

सीएसएस:

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