একটি চেনাশোনা দিয়ে কোনও সংখ্যাকে ঘিরে কীভাবে CSS ব্যবহার করবেন?

Question

আমি এই চিত্রটির মতো একটি বৃত্তে একটি সংখ্যা ঘিরে রাখতে চাই:

এটি কি সম্ভব এবং কীভাবে এটি অর্জিত হয়?

Answer 1

এখানে জেএসফিডেলের একটি ডেমো এবং একটি স্নিপেট রয়েছে:

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

আমার উত্তরটি একটি ভাল সূচনা পয়েন্ট, অন্য কয়েকটি উত্তর বিভিন্ন পরিস্থিতিতে নমনীয়তা সরবরাহ করে। আপনি যদি আই 8 সম্পর্কে যত্নশীল হন তবে আমার উত্তরটির পুরানো সংস্করণটি দেখুন ।

Comments

ইন্টারনেট এক্সপ্লোরারের বর্তমান সর্বশেষ সংস্করণ, 9, আসলে সীমানা ব্যাসার্ধকে সমর্থন করে। ... এবং ডিভ এটির জন্য দুর্দান্ত পছন্দ নয়। :)

— রিসিও

প্রদর্শন: ইনলাইন-ব্লক;

— কির্কল্যান্ড

@ কাইলমিট: তাত্ত্বিকভাবে এটি একটি ভাল ধারণা। দুর্ভাগ্যক্রমে, CSS3 PIE এর একই ডোমেন সীমাবদ্ধতা রয়েছে ।

— ত্রিশডট

আপনি যখনই ফন্ট-আকার পরিবর্তন করেন (CSS উদাহরণস্বরূপ প্রতিক্রিয়াশীল নকশা করছেন তবে কোনও ঝামেলা) সিএসএসে গণিত না করা এড়াতে আপনি ত্রিশডটের জেসফিলের এই অ্যাডাপশনটি ব্যবহার করতে পারেন যা ফন্টের আকার: jsfiddle

— স্টিভেন

@ কীভাবে সার্কেলটি সর্বদা সংখ্যার আশেপাশে থাকে তা নিশ্চিত করার জন্য বা সংখ্যাটি 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>

আপনার যদি সামগ্রীটি আরও দীর্ঘ বা সংক্ষিপ্ত করে তোলা দরকার, তবে আপনাকে আরও ভাল ফিট করার জন্য ধারকটির প্রস্থ সামঞ্জস্য করতে হবে।

এটি জেএসফিডেলে দেখুন ।

Comments

আমার ঠিক সেই সমস্যাটিই ছিল, তার ভিতরে শতকরা শতাংশ দেখাচ্ছে যা '1', '10' বা '100' হতে পারে। এটি নিখুঁতভাবে কাজ করে, ধন্যবাদ!

— ফিলিপ কাস্ত্রো

মনে রাখবেন এই প্রস্তাবিত সম্পাদনাটি অস্বীকার করা হয়েছিল, তবে পরিবর্তনগুলি প্রকৃতপক্ষে পাঠ্যটিকে আরও উল্লম্বভাবে কেন্দ্র করে, তাই আমি নিজেই উত্তরে সেগুলিতে যুক্ত করেছি।

— মাইক

এটি আরও ভাল উত্তর। আমি নেতিবাচক শীর্ষের মার্জিনের পরিবর্তে অনুবাদ Y (-50%) ব্যবহার করব

— টোবিয়াস

@ তোবিয়াস দুর্দান্ত ধারণাটির জন্য আপনাকে ধন্যবাদ। আমি আমার উত্তর আপডেট করেছি।

— মাইক

এটা অনেক ক্লিনার বিঘত মুছে ফেলুন এবং যোগ করার জন্য হবে text-alignএবং line-heightDIV আছে হবে। এখনও সম্ভবত সেরা উত্তর।

— dlsso

Answer 3

যদি এটি 20 এবং এর চেয়ে কম হয় তবে আপনি কেবল ইউনিকোড অক্ষর ② ② ... use ব্যবহার করতে পারেন ⑳

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-এর। 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>

উচ্চতা জোর করার জন্য সিউডো-উপাদান ব্যবহার করে। উল্লম্ব সারিবদ্ধকরণের জন্য শূন্য প্রস্থের স্থান প্রয়োজন। line-height:0pxবাইরের থেকে সিউডোতে সরানো হয়েছে যাতে আই 8 এর অবনমন করার সময় এটি কমপক্ষে দৃশ্যমান হয়।

Comments

আমার জন্য, এটি সেরা সমাধান ছিল। এটি বৃহত্তর সংখ্যার অনুমতি দেয় এবং এটি সর্বাধিক পরিমাপযোগ্য। অন্যান্য সমস্ত সমাধানের আকারগুলি খুব বেশি শক্ত কোডিং রয়েছে। এই কমপক্ষে আছে। হরফ না করে ফন্টের আকারকে ন্যায্য পরিমাণে পরিবর্তন করা যেতে পারে। যদি তীব্রভাবে পরিবর্তিত হয় তবে মার্জিনটি সামঞ্জস্য করা দরকার তবে এটি খুব ক্ষমাশীল। নেস্টেড উপাদান ব্যবহার করা কিছুটা হলেও নেতিবাচক।

— Necreaux

@ নেক্রাউক্স উত্তরটিকে এমন সংস্করণ দিয়ে আপডেট করেছে যা স্পষ্ট অভ্যন্তরীণ উপাদানকে ছদ্ম-উপাদানগুলির সাথে প্রতিস্থাপন করে।

— ryachza

প্রকৃতপক্ষে সেরা সমাধান। আমি সবেমাত্র মার্জিন-বাম এবং মার্জিন-ডান আকারটি 8px (আপডেট দ্রষ্ট্রে প্যাডিং) এর পরিবর্তে 0.35 মিম দ্বারা প্রতিস্থাপন করেছি। যাতে আপনি নম্বর ফন্ট-আকার পরিবর্তন করতে এবং একটি উপযুক্ত মার্জিন রাখতে পারেন।

— জিবাটো

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

এইচটিএমএল:

<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 এর মধ্যেও এটি বৃত্তের বাইরে স্ক্রোল করে। এছাড়াও, নতুন পটভূমির রঙ তৈরি করার জন্য ফন্টের আকারটি ব্যবহার করা কি সম্ভব হবে

— ট্রান্সফর্মার

সুন্দর সমাধান!

— jomofrodo

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

ভুলে যাবেন না - ওয়েবেকিট-সীমানা-ব্যাসার্ধ: 15px; IE IE htmlremix.com/css/curved-corner-border-radius-cross- ব্রাউজারের জন্য একটি স্থিরতা রয়েছে তবে এটি প্রয়োগের জন্য দুবার ভাবেন

— হ্যানস

+1 সম্ভবত সবচেয়ে সহজ পদ্ধতি ... IE এর জন্য ফ্যালব্যাকটি ঠিক (বর্গক্ষেত্র) দেখাচ্ছে looks ওয়ার্ডপ্রেস এটির মতো করে যদি আমি মনে করি

— রস

Answer 8

আমার সমাধান এখানে - এটি সম্পাদকীয় নিয়ন্ত্রণের জন্য সহজেই বিভিন্ন আকার এবং রঙ এবং সিএমএসের সাথে সম্পর্ক স্থাপনের অনুমতি দেয়। IE এর জন্য স্কোয়ারে অবনতি।

এইচটিএমএল :

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

এটি কীভাবে করা যায় তা দেখা খুব কঠিন নয়। বড় প্রশ্নটি চেনাশোনাতে বৃত্ত স্কেলের মাত্রা তৈরি করা সম্ভব কিনা is

বর্তমানে আমি এটি সম্ভব বলে মনে করি না। যে কেউ?

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

এইচটিএমএল উদাহরণ

<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

যদিও এই কোডটি কার্যকর, কিছু ব্যাখ্যা প্রদান করা ভাল হবে

— hat

Answer 12

পার্টিতে দেরীতে হলেও সমাধানটি আমি এখানে নিয়েছি 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;
}

এইচটিএমএল:

<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

জন নোয়েল ব্রুনো কে? এটি যদি কোনও ব্লগ বা টিউটোরিয়াল থেকে পাওয়া যায়, লিঙ্ক সরবরাহ করা একটি

— উপকার

Answer 13

আপনার CSS তে এরকম কিছু করুন

 ডিভি {
    প্রস্থ: 10 মিম; উচ্চতা: 10 মিমি;
    -ওয়েবকিট-বর্ডার-ব্যাসার্ধ: 5 এম; -মোজ-বর্ডার-ব্যাসার্ধ: 5 এম;
  }
  পি
    পাঠ্য-সারিবদ্ধ: কেন্দ্র; মার্জিন-শীর্ষ: 4.5 মিমি;
  }

পাঠ্যটি লেখার জন্য অনুচ্ছেদে ট্যাগটি ব্যবহার করুন। আশা করি এইটি কাজ করবে

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

এইচটিএমএল:

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

এইচটিএমএল:

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