IE 浏览器下文字无法垂直居中于图标，如何解决？

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《IE 浏览器下文字无法垂直居中于图标，如何解决？ 》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

CSS 兼容 IE 问题：文字在 IE 中无法垂直居中

在 IE 浏览器下，使用 <p><br></p><p> 标签来换行会导致文字无法垂直居中于图标旁边的情况。解决这个问题需要兼容修改 CSS。

兼容修改方法：

不要使用 top 属性进行对齐。改为将图标和文字都设置为 display: inline-block，然后为文字设置 vertical-align: middle; 居中即可。

修改后的 CSS 代码如下：

/* 图标 */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}

/* 文本 */
p {
  display: inline-block;
  vertical-align: middle;
}

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《IE 浏览器下文字无法垂直居中于图标，如何解决？ 》文章吧，也可关注golang学习网公众号了解相关技术文章。