为何按钮内align-items会引发偏移？如何解决选项换行位移问题

我正在搭建带测验和调查功能的网站，做了通用HTML布局，还差最后5%。问答内容通过JS插入，用按钮形式展示，用户选完点独立按钮确认。但选项文本过长换行时，按钮会下移约5px。这些按钮是flex元素，嵌套在inline-block类型的div里。想知道位移原因，还要保留align-items:center（保证文本居中）的前提下解决问题，移除这个属性虽然能阻止位移，但会破坏文本排版，不符合需求。

原因分析 #

问题出在inline-block元素的默认对齐方式上：inline-block元素默认基于内容的基线（baseline）对齐。当label里的文本换行后，flex容器内部的文本布局改变，导致整个inline-block容器的基线位置下移，和旁边未换行的容器基线对齐时，就出现了视觉上的位移。

解决方案 #

给包裹label的inline-block div添加vertical-align: top属性，强制所有容器顶端对齐，不管内部内容如何变化，都能保持整齐，同时完全保留align-items:center来维持文本居中效果。

修改后的CSS代码 #

.surveyOptions {
  padding-top: 10px;
  max-height: 80px;
}

.surveyOptions div {
  width: 49.5%;
  height: 80px;
  display: inline-block;
  padding-bottom: 5px;
  vertical-align: top; /* 新增属性，解决位移问题 */
}

input[type="radio"] {
  display: none;
}

label {
  background-color: #f0f4fa;
  border-radius: 15px;
  border: 2px solid #2867ae;
  font-size: 20px;
  font-weight: bold; /* 修正原代码错误：font-weight无单位，去掉px */
  width: 100%;
  height: 100%;
  padding: 10px;
  color: #2867ae;
  margin: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: visible;
}

input[type="radio"]:hover+label {
  background-color: #CEDDEF;
}

input[type="radio"]:checked+label {
  background-color: #2867ae;
  color: #f0f4fa;
}

.nextButton {
  background-color: #2867ae;
  border: none;
  color: #f0f4fa;
  border-radius: 15px;
  font-size: 20px;
  font-weight: bold; /* 修正原代码错误：font-weight无单位，去掉px */
  width: 100%;
  max-width: 600px;
  height: 90px;
  display: block;
  margin: auto;
  text-align: center;
  cursor: pointer;
}

.nextButton:hover {
  background-color: #164B86;
}

补充说明 #

原代码中font-weight: 400px属于错误写法，font-weight属性值为无单位数值（如400）或关键字（如bold），已在修改后的代码中修正，避免额外样式问题。

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