如何实现HTML中图标与下方h4标题正对齐 消除文本左侧缩进

问题原因 #

你当前只给h4标签设置了水平居中，而图标对应的<i>标签是行内元素，默认继承父容器的左对齐属性，所以出现图标靠左、文字居中的错位效果。

修改方案 #

只需调整CSS代码，给包裹图标和标题的列容器统一设置水平居中即可：

/* 给每个列容器设置水平居中，内部行内元素会自动居中 */
#noo .w3-col {
  text-align: center;
}
#noo i {
  font-size: 48px;
  /* 下方为可选属性，用来调整图标和文字的间距，可根据需要修改数值 */
  margin-bottom: 8px;
}
/* 原有h4的text-align: center可以保留也可以删除，父级居中后会自动继承 */
#noo h4 {
  margin: 0; /* 可选，用来消除h4默认边距，调整排版间距 */
}

修改完成后，图标和下方的标题都会在列容器内水平居中，实现你预期的上下对齐效果。

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