[分享]css中 图标和文字水平对齐

CSS中，图标和文字都是常用的元素，经常用到的样式之一就是图标和文字的水平对齐。首先，需要确保图标和文字都处于同一行内。可以使用display:inlineblock实现。例如：.icon { dis...

CSS中，图标和文字都是常用的元素，经常用到的样式之一就是图标和文字的水平对齐。

首先，需要确保图标和文字都处于同一行内。可以使用display:inline-block实现。例如：

.icon {
  display: inline-block;
  vertical-align: middle; /* 可选：让图标垂直居中 */
}

.text {
  display: inline-block;
  vertical-align: middle; /* 可选：让文字垂直居中 */
} 

其中，vertical-align属性可以让元素垂直对齐，这里用到中间对齐的效果。

接下来，需要让图标和文字水平对齐。这可以使用line-height属性来实现。具体做法是给元素设置相同的line-height，这里可以使用单位为像素的具体数值，也可以使用百分数。

.icon, .text {
  line-height: 24px; /* 设置相同的行高 */
} 

这样，就可以实现图标和文字的水平对齐了。

同时，如果要让多个图标和文字都水平对齐，可以使用伪元素:after，给其设置display: inline-block，并设置相同的line-height和vertical-align属性。

.icon, .text {
  position: relative; /* 让父元素position:relative */
  line-height: 24px; /* 设置相同的行高 */
}

.icon:after, .text:after {
  content: ';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle; /* 让伪元素垂直居中 */
} 

以上就是关于CSS中图标和文字水平对齐的方法，希望对大家有所帮助。