如何将指定HTML代码的展示效果从页面左对齐调整为居中对齐

你当前使用的<span>为行内元素，仅声明class="center"但无对应样式规则的情况下无法实现居中效果，要让这段内容在页面居中对齐，可参考以下两种常用方案：

方案1：添加父容器设置内联样式（改动最小，直接生效） #

给所有span套一个块级父容器，给父容器设置text-align: center属性即可让内部行内内容整体居中：

<div style="text-align: center;">
  <span class="center"> <u>Weekly : 392K</u> </span>, &nbsp;&nbsp;&nbsp; <span class="center"> Monthly : 408K </span>, &nbsp;&nbsp;&nbsp; <span class="center"> Yearly : 605.6K </span>
</div>

方案2：补充CSS规则复用样式 #

如果需要全局复用居中样式，可以在样式表中添加对应规则：

/* 父容器类，控制内部行内内容居中 */
.center-wrap {
  text-align: center;
}
/* 可选：给span.center补充样式，适配其他需要单独居中的场景 */
span.center {
  display: inline-block;
  text-align: center;
  margin: 0 1em; /* 可以替代原有 实现间距，更易维护 */
}

对应HTML调整为：

<div class="center-wrap">
  <span class="center"> <u>Weekly : 392K</u> </span>, <span class="center"> Monthly : 408K </span>, <span class="center"> Yearly : 605.6K </span>
</div>

提示：不建议使用已废弃的<center>标签实现居中，兼容性和可维护性都较差

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