line-height为何影响inline-flex布局？求可行解决方案

问题说明 #

使用inline-flex实现按钮内内容居中时，包含单行文本与不同line-height多行文本的按钮出现垂直位置错位的情况，仅单行文本时无此问题。已尝试调整height、min-height及display属性，均未解决。

解决方案 #

核心问题是inline-flex元素默认以基线对齐，多行文本的元素基线位置会因line-height变化而偏移。只需将按钮的父容器.juego_respuesta_botones改为flex布局，即可统一所有按钮的垂直对齐方式，无需依赖float：

• 给.juego_respuesta_botones添加flex布局属性，实现按钮的自动换行与居中对齐
• 保持按钮的inline-flex或改为flex均可，父容器的flex布局会统一子元素的对齐规则

修改后的代码 #

CSS #

#juego {
  text-align: center;
  background-color: red;
  margin: 0 auto;
  padding: 20px 20px 40px;
  width: 100%;
  max-width: 320px;
  font-size: 20px;
  line-height: 22px;
  font-family: Arial, sans-serif;
}

.juego_respuesta {
  padding: 40px 0;
  display: block;
}

.juego_respuesta_botones {
  margin-bottom: 30px;
  /* 新增flex布局 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.juego_respuesta_buton {
  display: inline-flex;
  width: 120px;
  height: 40px;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 11px;
  color: #000000;
  background-color: #ffffff;
  border: 1px solid #000000;
  margin: 10px 5px;
  transition: 0.5s all;
  cursor: pointer;
}

.juego_respuesta_buton span {
  font-size: 7px;
}

.juego_respuesta_buton:hover {
  color: #ffffff;
  background-color: #000000;
}

.juego_respuesta_buton.activo {
  color: #ffffff;
  background-color: #000000;
  cursor: default;
}

HTML（无需修改） #

<div id="juego">
  <div class="juego_respuesta">
    <div class="juego_respuesta_botones">
      <div class="juego_respuesta_buton activo">
        <div>TEST 1</div>
      </div>
      <div class="juego_respuesta_buton">
        <div>TEST 2</div>
      </div>
      <div class="juego_respuesta_buton">
        <div>TEST 3<br> TEST 3</div>
      </div>
      <div class="juego_respuesta_buton">
        <div>TEST 4<br>
          <span>(TEST 4)</span></div>
      </div>
      <div class="juego_respuesta_buton">
        <div>TEST 5<br>
          <span>(TEST 5)</span></div>
      </div>
      <div class="juego_respuesta_buton">
        <div>TEST 6</div>
      </div>
      <div class="juego_respuesta_buton">
        <div>TEST 7</div>
      </div>
      <div class="juego_respuesta_buton">
        <div>TEST 8<br>
          <span>(TEST 8)</span></div>
      </div>
      <div class="juego_respuesta_buton">
        <div>TEST 9</div>
      </div>
    </div>
  </div>
</div>

原理说明 #

原来的inline-flex元素属于行内级元素，默认按照**基线（baseline）**对齐，多行文本元素的基线位置会受内部line-height影响而改变，导致整体错位。父容器改为flex布局后，子元素默认以stretch方式对齐（或可显式设置align-items: center），所有按钮会统一基于flex容器的垂直规则对齐，彻底解决错位问题。

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