css实现文本末尾数字或图标居中

在CSS中，可以使用::after伪元素来追加内容到文本元素的末尾，同时控制其样式。在本文中，我们就将应用::after伪元素解决数字或图标居中显示的问题。

代码示例

span::after {
  content: "666";
  font-size: 12px;
  display: inline-block;
  vertical-align: middle; /* 实现垂直居中 */
  margin-left: auto; /* 实现水平居中 */
}

分析

• content属性定义伪元素中的内容，这里我们指定为"666"。
• font-size属性控制伪元素的字体大小。
• display属性将伪元素设置为内联块元素，以便我们可以通过内联margin来控制位置。
• vertical-align属性用于垂直居中伪元素的内容。
• margin-left: auto属性将伪元素水平居中。它会将伪元素移动到其容器（span元素）的右侧边界。

结果

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

使用上述CSS代码，"666"将位于span元素的末尾，即使它的高度小于span元素。它还会水平和垂直居中。

补充

• 可以使用CSS变量来自定义字体大小、内容和其他样式。
• 如果希望数字或图标居右但不居中，可以使用margin-right属性。
• 还可以使用flexbox或网格布局来实现更复杂的布局。