CODEWITHSUNDEEP
htmlcss
HOU5K4
HOU5K4

Reputation: 23

Numbers centered in a circle

.circle{    
    width: 20px;
    height: 20px;
    border: 1px solid #2d2d2d;
    color: #2d2d2d;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    padding: 10px;
    margin: 0 3px;
    vertical-align: middle;}

.choice .circle{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}
<div class="choice">
<div class="circle" data-attr-val="2000" data-attr-price="59">2000</div>
<div class="circle" data-attr-val="20" data-attr-price="59">20</div>
</div>

In the example you can see my problem, 4 or more numbers looks bad, 1-3 numbers looks good.

How can I center 4 or more numbers?

Thanks for help :)

Upvotes: 2

Views: 117

Answers (3)

Asons
Asons

Reputation: 87191

Here is a version using display: inline-table and a pseudo element.

These circle:before rule's properties will keep the numbers centered what ever size you set for the circle (though too small will look odd), even with two lines of numbers.

vertical-align: middle;
text-align: center;

I also used css attr() to set the numbers from your "data-attr-val" instead of adding them manually.

.circle {
    display: inline-table;
    width: 40px;
    height: 40px;
    border: 1px solid #2d2d2d;
    color: #2d2d2d;
    border-radius: 50%;
    cursor: pointer;
}
.circle:before {
    content: attr(data-attr-val);
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.circle.big {
    width: 80px;
    height: 80px;
}
.circle.big:before {
    content: attr(data-attr-val);
}
<div class="choice">
  <div class="circle" data-attr-val="2000" data-attr-price="59"></div>
  <div class="circle" data-attr-val="20" data-attr-price="59"></div>
</div>

<br />2 lines, still centered<br /><br />

<div class="circle big" data-attr-val="10000 20000" data-attr-price="59"></div>

Upvotes: 0

C3roe
C3roe

Reputation: 96316

Remove the left and right padding, and increase the width instead by an equal amount – then you can get four digits centered in there via text-align. (More digits might still be problematic though.)

.circle{    
    width: 40px;
    height: 20px;
    border: 1px solid #2d2d2d;
    color: #2d2d2d;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    padding: 10px 0;
    margin: 0 3px;
    vertical-align: middle;
    text-align:center;
}

.choice .circle{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}
<div class="choice">
<div class="circle" data-attr-val="2000" data-attr-price="59">2000</div>
<div class="circle" data-attr-val="20" data-attr-price="59">20</div>
</div>

Upvotes: 1

Raviteja
Raviteja

Reputation: 3489

Have a look at this

HTML

<div class="choice">
<div class="circle" data-attr-val="2000" data-attr-price="59">2000</div>
<div class="circle" data-attr-val="20" data-attr-price="59">20</div>

CSS

.circle {
    width:50px;
    height:50px;
    border:1px solid black;
    border-radius:250px;
    line-height:50px;
    text-align:center;
    display:inline-block;
}

Fiddle here

Upvotes: 1

Related Questions