如何垂直居中对齐:before伪元素？多种vertical-align方案无效求解决

嘿，我来帮你搞定这个头疼的垂直对齐问题！你之前尝试各种vertical-align值都没用，核心问题其实出在你给:before伪元素加了float: left——浮动元素会脱离正常的文档流，而vertical-align只对行内元素、行内块元素或表格单元格生效，所以不管你设什么值都白搭。

下面给你两个靠谱的解决方案，选一个适合你的就行：

方案1：移除浮动，改用inline-block配合vertical-align #

把伪元素改成inline-block，去掉float，再用vertical-align: middle就能让图标和文本对齐。记得给伪元素设置宽高，让背景图能正确显示：

.infoTitles {
  color: #2E393F;
  font-family: 'Muli', sans-serif;
  font-size: 1.5rem;
  line-height: 1.5em;
}

.infoTitles:before {
  content: '';
  /* 删掉float: left */
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 20px; /* 根据你的图标尺寸调整 */
  height: 20px;
  background-image: url(...);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

如果图标和文本的对齐还是有点偏差，可以微调vertical-align的数值，比如vertical-align: -2px，根据实际情况调整。

方案2：用Flex布局一键居中（更省心） #

直接给父元素.infoTitles设置flex布局，利用align-items: center让所有子元素（包括伪元素和文本）自动垂直居中，这个方法不用纠结行高和元素尺寸，兼容性也很好：

.infoTitles {
  color: #2E393F;
  font-family: 'Muli', sans-serif;
  font-size: 1.5rem;
  line-height: 1.5em;
  display: flex;
  align-items: center; /* 关键属性，垂直居中子元素 */
}

.infoTitles:before {
  content: '';
  margin-right: 8px;
  width: 20px;
  height: 20px;
  background-image: url(...);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

为什么之前的方法失效？ #

• float: left让伪元素脱离了行内流，vertical-align对浮动元素完全不起作用；
• vertical-align: super是用来实现上标效果的，本来就不是居中的选项；
• vertical-align: -50%是相对于元素自身的行高计算的，但因为浮动的存在，这个规则根本没被应用。

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