如何将加号图标与h3标签横向对齐？已尝试边距等方法无效

我帮你搞定这个对齐问题！你的加号图标和h3文字不在同一行，主要是因为inline-block元素的默认垂直对齐规则，或者没有用合适的布局方式来控制垂直居中。这里有两个简单且有效的解决方案：

方案一：使用vertical-align调整对齐 #

这是针对inline-block元素的经典解决方案，通过设置垂直对齐方式让图标和文字对齐：

修改你的CSS代码：

.second-section-right-part-h3 {
  margin-top: 30px;
  color: #262262;
  font-weight: bold;
  /* 让h3的行高匹配图标的高度（50px），确保文字垂直居中 */
  line-height: 50px;
}

.plus.alt {
  /* 让图标和文字的中线对齐 */
  vertical-align: middle;
  /* 可选：给图标和文字之间加个间距，视觉更美观 */
  margin-right: 10px;
}

方案二：使用Flex布局（更推荐） #

Flex布局是现代CSS布局的首选方案，能更直观地控制元素的对齐方式：

修改你的CSS代码：

.second-section-right-part-h3 {
  margin-top: 30px;
  color: #262262;
  font-weight: bold;
  /* 开启Flex布局 */
  display: flex;
  /* 让子元素在垂直方向居中 */
  align-items: center;
  /* 可选：设置图标和文字的间距 */
  gap: 10px;
}

为什么之前的设置没生效？ #

你尝试的margin、padding-top单独加在图标上时，因为inline-block元素的默认垂直对齐是基线对齐，这些属性无法直接改变它和文字的垂直位置关系；而单独调整line-height如果没有匹配图标的高度，也无法让两者居中对齐。Flex布局则直接通过align-items: center让所有子元素在垂直方向居中，彻底解决对齐问题。

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