CSS中如何让无序列表居中同时保持项目符号垂直对齐？

问题根因 #

父容器#welcome-section设置的text-align: center仅作用于容器内的文本、行内元素，无序列表默认的项目符号渲染在<li>元素外侧，不受该居中属性控制，因此停留在容器最左侧，仅<li>内部文字居中，最终出现符号和文字错位的效果。

最优解决方法 #

无需修改原有HTML结构，仅需给无序列表补充CSS规则即可实现需求：将整个列表作为行内块元素跟随父容器居中，同时列表内部保持左对齐，保证项目符号和文字垂直对齐。
补充的CSS代码如下：

#welcome-section ul {
  /* 让列表整体作为行内块跟随父级text-align:center居中 */
  display: inline-block;
  /* 列表内部内容左对齐，保证项目符号和文字对齐 */
  text-align: left;
  /* 可根据需求调整上下间距 */
  margin: 1rem 0;
}

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