如何实现question与answer-text垂直居中对齐，且不与submit-answer-button对齐

要实现id为question的元素与id为answer-text的元素垂直居中对齐，同时让id为submit-answer-button的元素不参与该垂直居中，可通过调整Flex布局的对齐属性实现：

修改后的CSS代码 #

.question-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 让question和输入区域整体水平居中 */
}

.answer-container {
  display: flex;
  align-items: center; /* 使输入框与上方question保持垂直居中对齐 */
}

#submit-answer-button {
  align-self: flex-start; /* 单独设置按钮的垂直对齐方式，脱离输入框的居中逻辑 */
  /* 若希望按钮与输入框底部对齐，可替换为 align-self: flex-end; */
}

完整HTML代码 #

<div class="question-container">
  <div id="question">6 x 2</div>
  <div class="answer-container">
    <input type="text" id="answer-text">
    <button id="submit-answer-button" onclick="submitAnswer()">Submit</button>
  </div>
</div>

说明 #

• question-container保持垂直列布局并水平居中内部元素，确保question和输入区域整体处于页面居中位置。
• answer-container设置align-items: center，让输入框与上方的question元素垂直对齐。
• 通过align-self属性单独控制按钮的垂直对齐，使其不跟随输入框的居中规则。

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