Номер центра с 1 и 2 цифрами

У меня есть форма, которая является сердцем, и у меня есть номер внутри. Проблема в том, что у меня может быть число с 1 цифрой и число с 2 цифрами, и я не могу сосредоточить их на сердце.Номер центра с 1 и 2 цифрами

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>

источник

2015-06-01 Simon M.

Просто дайте ширину абзаца и 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; 
}

Демо: https://jsfiddle.net/lotusgodkk/b7ggddqy/3/

источник

2015-06-01 09:27:07

Это то, что вы ищете?

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

JSFiddle

источник

2015-06-01 09:24:12 freewheeler

Да, спасибо, и знаете ли вы, почему, когда я изменяю влево на 0, текст поднимается? –

Набор p шириной до 100% и text-align:center.

источник

2015-06-01 09:35:53

Демонстрация: https://jsfiddle.net/b7ggddqy/ –

Номер центра с 1 и 2 цифрами

ответ

Смежные вопросы