CSS调整形状内文本对齐问题：文本始终左偏如何解决？

嘿，我一眼就发现问题啦！你这个自定义圆形元素里的文本一直靠左，是因为你用了inline-flex把它变成弹性容器，但没配置水平方向的居中对齐属性。你已经通过line-height:22px搞定了垂直居中，差最后一步就能让文本完美居中啦！

具体修改方案 #

在你的bala样式里添加justify-content: center——这个属性专门控制flex容器内元素在主轴（默认是水平方向）的对齐方式，加上它之后文本就会乖乖居中了。修改后的完整代码如下：

bala { 
  display: inline-flex; 
  vertical-align: middle; 
  height: 22px; 
  width: 22px; 
  line-height: 22px; 
  -moz-border-radius: 30px; 
  border-radius: 30px; 
  background-color: black; 
  color: white; 
  font-size: 14px;
  /* 新增：让文本水平居中 */
  justify-content: center;
}

<p> <bala>21</bala> Done <MdError color='#fcb51b' /> In Progress:{inProgress} </p>

额外小提示 #

原生HTML其实不支持bala这种自定义标签哦，如果是在纯HTML环境开发，建议换成<span>或者<div>这类标准标签；要是你用的是React/Vue之类的框架写自定义组件，那完全没问题～

内容的提问来源于stack exchange，提问作者zemmsoares