为何行内块#abc文本默认在#wrapper底部，如何实现其垂直居顶/居中？

为什么文本默认没有定位在#wrapper的左上角 #

#abc和#buttons都设置为inline-block类型，这类元素默认的vertical-align属性值为baseline（基线对齐）。右侧#buttons包含高度为75px的图片，整体高度远高于左侧仅含单行文本的#abc，两个元素按默认规则对齐时，左侧文本的基线会匹配右侧元素的基线，因此文本会显示在黄色容器的底部。

文本垂直居顶/居中的设置方法 #

方案1：调整inline-block对齐属性 #

给两个inline-block子元素统一设置vertical-align值即可：

• 垂直居顶

#abc, #buttons { 
  display: inline-block;
  vertical-align: top;
}

• 垂直居中

#abc, #buttons { 
  display: inline-block;
  vertical-align: middle;
}

方案2：使用Flex布局（更简洁） #

直接给父容器#wrapper设置Flex相关属性，不需要额外修改子元素配置：

• 垂直居顶

#wrapper {
  background-color: yellow;
  display: flex;
  align-items: flex-start;
}

• 垂直居中

#wrapper {
  background-color: yellow;
  display: flex;
  align-items: center;
}

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