如何对齐盒布局内元素，解决单行/双行文本导致的按钮位置错位问题

多个按钮包含单行、双行文本时出现的位置错位问题，可通过以下几种方案实现统一对齐：

方案1：Flex布局（首选，适配绝大多数场景） #

• 给按钮父容器设置display: flex + align-items: stretch，强制所有按钮高度与最高的双行文本按钮保持一致
• 给按钮自身设置display: inline-flex + align-items: center + justify-content: center，保证按钮内部的文本不管行数多少都垂直水平居中
• 代码示例：

/* 按钮父容器样式 */
.btn-group {
  display: flex;
  gap: 12px; /* 可自定义按钮间距 */
  align-items: stretch;
}

/* 按钮通用样式 */
.custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #2385bb;
  color: #fff;
  /* 可选：设置最小高度兼容极端场景 */
  min-height: 44px;
}

方案2：Grid布局（适合多列批量按钮排列） #

• 父容器设置display: grid + grid-auto-flow: column，默认所有按钮单元格高度自动统一
• 按钮同样设置内部flex居中样式即可
• 代码片段：

.btn-group {
  display: grid;
  grid-auto-flow: column;
  gap: 12px;
}

方案3：固定最小高度（适配老项目兼容场景） #

• 如果项目历史代码无法调整布局模式，可以给所有按钮统一设置min-height，数值参考双行文本的实际高度，同时设置vertical-align: middle避免行内元素默认的基线对齐错位
• 代码片段：

.custom-btn {
  min-height: 48px; /* 可根据实际文本字号、行高调整 */
  vertical-align: middle;
  line-height: 1.4;
  padding: 6px 16px;
}

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