CSS：如何将文本放在图标内？

Question

我正在制作一个Ionic应用程序，显示一些信息在圆角区域中，但我需要把数字放到第二个区域的心形图标中。我需要它们垂直和水平对齐，并且数字看起来像在心脏内部。我已经尝试了一些方法，但无法同时实现所有目标。我该如何做呢？谢谢。

注意：文本是动态的，是一个0%到100%的百分比。

这是该区域的代码。

<link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet"/>
<div class="post-info">
  <span class="charity">
    <i class="ion-ios-heart-outline"></i><span style="font-size: 13px">45</span>
  </span>
</div>

- Julián Bonilla

Answer 1

您可以通过将图标设置为relative位置，并将文本放在带有绝对位置的:before伪元素中，使其成为文本的容器。

https://jsfiddle.net/Ljquqtrv/

- user6213434

---

哎呀，我喜欢这个答案，但是文本是动态的。:( - Julián Bonilla

我会尽力为此找到解决方案。 - user6213434

Answer 2

你可以像这样做

<link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet"/>
<div class="post-info">
  <span class="charity">
      <span style="font-size: 13px;position:absolute;text-align:center;width:26px;padding-top:3px">55</span>
      <i style="font-size:30px" class="ion-ios-heart-outline"></i>
  </span>
</div>

- Simon Schüpbach

Answer 3

根据值对文本进行居中，即使是单个数字和两个数字也能居中。 您可以使用'position:absolute;'将数字绝对定位在图标上方。 另外，您可以使用css/javascript/jquery通过'top:XXpx;left:XXpx;'将其居中。 jsfiddle 待跟进。 JSFiddle

.charity > .inner-num {
  position:absolute;  
  left:10px;
  top:10px;
  width:20px;
  text-align:center;
}

- tmcc

Answer 4

你不能把文本放到图标中。将图标作为div的背景图像。然后将数字放在div内部。

- Rachel S