如何实现icon内部的图片与文本横向并排展示？

方案1：Flex布局（推荐，无需修改原有DOM结构） #

直接给两类元素的共同父容器添加flex属性即可，适配性强，调整灵活：

• 找到两类元素的共同父级（也就是你提到的.messagecontent类），添加如下CSS规则：

.messagecontent {
  display: flex;
  /* 实现图片和文本垂直方向居中对齐，避免上下错位 */
  align-items: center;
  /* 可根据视觉需求自定义图片和文本之间的间距 */
  gap: 6px 10px;
}

• 如果.messagecontent下还有其他不需要参与横向排列的元素，你可以单独给目标图片和文本对应的子类套一层自定义的父容器，再给这个新增的父容器加上述flex样式即可。

方案2：inline-block兼容方案（适合需要兼容低版本浏览器的场景） #

如果业务需要兼容IE9及以下版本，可以用这个方案：

• 给图片和文本对应的子类分别添加inline-block属性，示例代码如下（把类名替换成你实际的子类名即可）：

/* 示例类名：.icon-png为图片对应的子类，.icon-text为文本对应的子类 */
.messagecontent .icon-png,
.messagecontent .icon-text {
  display: inline-block;
  /* 实现垂直居中对齐 */
  vertical-align: middle;
}
/* 调整图片和文本的间距 */
.messagecontent .icon-png {
  margin-right: 8px;
}

注意：如果原有样式中给图片或者文本元素设置了display: block属性，需要先覆盖掉该属性，否则上述两种方案都无法生效。

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