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

概述我正在开发一个Ionic应用程序,我在圆形区域显示了一些 info,但是我需要将数字放在第二个区域的心脏图标中.我需要它们垂直和水平对齐,并且数字看起来像心脏内部.我一直在尝试一些事情,但我无法立刻实现所有目标.我怎样才能做到这一点？谢谢. 注意：文本是动态的,它是一个百分比,可以是0％到100％ 这是该区域的代码 <link href="http://code.ionicframework.co 我正在开发一个Ionic应用程序,我在圆形区域显示了一些 info,但是我需要将数字放在第二个区域的心脏图标中.我需要它们垂直和水平对齐,并且数字看起来像心脏内部.我一直在尝试一些事情,但我无法立刻实现所有目标.我怎样才能做到这一点？谢谢.

注意：文本是动态的,它是一个百分比,可以是0％到100％

这是该区域的代码

<link href="http://code.ionicframework.com/1.3.0/CSS/ionic.min.CSS" rel="stylesheet"/><div >  <span >    <i ></i><span >45</span>  </span></div>

解决方法 您可以通过为图标设置相对位置并将文本放入：beforepeseudo with position absolute来使图标成为文本容器

https://jsfiddle.net/Ljquqtrv/

总结

以上是内存溢出为你收集整理的html – CSS：如何将文本放入图标中？全部内容，希望文章能够帮你解决html – CSS：如何将文本放入图标中？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。