如何垂直对齐内部文字行数不同的inline-block布局盒子

• 你使用display: inline-block的.col元素默认vertical-align属性值为baseline，会以元素内文本的基线作为对齐参考，所以当不同列内的文本行数不一致时，就会出现列错位的情况。

你只需要给.col类添加vertical-align: top属性即可，修改后的完整CSS代码如下：

.col {
  display: inline-block;
  width: 31%;
  padding: 2px 5px;
  vertical-align: top; /* 新增这行规则即可修复对齐问题 */
}

.box {
  height: 80px;
  margin: 0 auto;
  display: flex;
  background-color: #f4f4f4;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  text-decoration: none;
  font-weight: normal;
}

修改后所有列会统一沿顶部对齐，不管内部.box内的文本行数多少，都不会出现错位问题。如果需要列整体垂直居中对齐，也可以把vertical-align的值改为middle，可根据你的布局需求选择。

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