设置display:inline-block的两个div为何未垂直对齐？如何解决？

现象原因 #

inline-block元素的默认垂直对齐方式是baseline（基线对齐），这是CSS针对行内/行内块元素的默认排版规则：

• 包含文本的.name元素，其基线为文本的基准线（通常是小写字母的底部位置）
• 包含图片的.image元素，作为行内块，其基线为内部img元素的底部边缘
  两者按基线对齐时，就会出现视觉上的错位，和预期的顶部/底部对齐不符。

实现对齐的方法 #

方法1：修改vertical-align属性 #

直接给两个子元素设置vertical-align属性，指定顶部或底部对齐：

.image, .name {
  vertical-align: top; /* 顶部对齐，换成bottom则为底部对齐 */
}

也可以只给其中一个元素设置，因为对齐是相对的，只要两者的对齐基准统一即可。

方法2：使用Flexbox布局（推荐） #

给父元素.icon设置Flexbox布局，通过align-items控制垂直对齐方式，这种方式更灵活，还能解决inline-block元素间的默认间隙问题：

.icon {
  display: flex;
  align-items: flex-start; /* 顶部对齐 */
  /* align-items: flex-end; 底部对齐 */
}

设置后子元素的display: inline-block可以保留或移除，Flexbox会自动处理元素的排列。

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