Issue
the circle tend be oval, what I want is perfect circle. border-radius 100% isn't work I wonder why..
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: lighter !important;
line-height: 1;
color: #fff !important;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #d73d33;
border-radius: 50px;
position: relative;
top: -3px;
}
Solution
Here is a JSfiddle with some changes:
The main changes are:
padding: 0px;
width: 50px;
height: 50px;
line-height: 50px;
Having a line-height equal to the container height will center the text vertically. This only works if the text fits on a single line.
Edit: (copied code from JSFiddle)
.badge {
display: inline-block;
padding: 0;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 12px;
font-weight: lighter !important;
color: #fff !important;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #d73d33;
border-radius:50px;
position: relative;
top: -3px;
}
<span class="badge badge-success">8</span>
Answered By - R. Schifini
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.