为何含文本与无文本的div位置不同？如何实现垂直对齐？

嘿，这个问题我太熟悉了！你碰到的是inline-block元素默认的基线对齐在搞鬼——浏览器会把有文本的子元素的文本基线作为对齐基准，而空的子元素则会把自身的底部当作基线，两边基准不一样，自然就出现高低错位的情况了。

最简单的修复方法 #

只需要给.child类添加vertical-align属性，把对齐方式从默认的baseline改成top、middle或者bottom都能解决，推荐用top或者middle，效果更符合预期：

.child {
  display: inline-block;
  width: 20%;
  height: 50px;
  border: 2px solid #00f;
  vertical-align: top; /* 关键修复代码 */
}

原理说明 #

inline-block元素默认的vertical-align值是baseline，这个基线的位置会根据元素内的内容变化：有文本的子元素，基线是文本的底部（比如字母"x"的底部）；空的子元素，基线就是元素的底部边缘。强制设置统一的垂直对齐方式后，所有子元素就会按照同一个基准线对齐，自然就整齐了。

修改后的完整代码 #

<html>
<head>
  <style>
    .parent {
      background-color: #fff;
      width: 80%;
      border: 2px solid #f00;
    }
    .child {
      display: inline-block;
      width: 20%;
      height: 50px;
      border: 2px solid #00f;
      vertical-align: top;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child">Text1</div>
    <div class="child"></div>
    <div class="child">Text2</div>
  </div>
</body>
</html>

你也可以试试vertical-align: middle，会让元素在垂直方向居中对齐，效果也不错，看你的需求选择就行~

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