CODEWITHSUNDEEP
htmlcssposition
Simon M.
Simon M.

Reputation: 2482

Center number with 1 and 2 digit

I have a shape which is a heart and I have a number inside. The problem is that I can have a number with 1 digit and a number with 2 digit and I am not able to center them into the heart.

https://jsfiddle.net/b7ggddqy/

.description{
    position:relative;
    height:100px;
}
.heart{
    z-index:-500;
    position: absolute;
    top:70%;
    right:20%;
    width: 30px;
    height: 30px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #BF4139;
}
.heart:before,
.heart:after{
    position: absolute;
    width: 30px;
    height: 30px;
    content: '';
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: #BF4139;
}
.heart:before{
    bottom: 0px;
    left: -15px;
}
.heart:after{
    top: -15px;
    right: 0px;
}
.heart p{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position:absolute;
    z-index: 800;
    left:10px;
    top:-15px;
    font-size:18px;
    color:white;}
<div class="description">
 <div class="heart">
         <p>11</p>
 </div>
</div>     
<div class="description">
 <div class="heart">
         <p>3</p>
 </div>
</div>

Upvotes: 1

Views: 167

Answers (3)

Maheswaran S
Maheswaran S

Reputation: 525

Set p width to 100% and text-align:center.

Upvotes: 2

K K
K K

Reputation: 18099

Just give a width to the paragraph and text-align:center

.heart p {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position:absolute;
    z-index: 800;
    left:3px;
    top:0px;
    font-size:18px;
    color:white;
    width:20px;
    text-align:center;
}

Demo: https://jsfiddle.net/lotusgodkk/b7ggddqy/3/

Upvotes: 2

freewheeler
freewheeler

Reputation: 1356

Is this what you are looking for?

.heart p{
    position:absolute;
    text-align:center;
    width:20px;
    margin-left:-13px;
    }

JSFiddle

Upvotes: 0

Related Questions