Question

我正在开发一个Ionic应用程序，我在圆角区域显示一些info，但我需要将数字放在第二个区域的心脏图标中。我需要它们垂直和水平对齐，并且数字看起来像心脏内部。我一直在尝试一些事情，但我无法立刻实现所有目标。我怎样才能做到这一点？感谢。

注意：文字是动态的，是百分比，可以是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>

Answer 1

您可以将图标设置为文本的容器，方法是为图标设置位置relative，并将文本放在:before peseudo中，位置为绝对值

https://jsfiddle.net/Ljquqtrv/

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>

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

Answer 4

您无法将文字放入图标中。使图标成为div的背景图像。然后将数字放在div中。

CSS：如何将文本放入图标中？

4 个答案: