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