html - 像垂直对齐功能一样的 CSS 按钮

Question

前史

我正在构建 html 表单，元素有多个选项....，但我不想将其显示为下拉列表，而是想在不使用任何 js 的情况下将它们显示为按钮，我删除了带有指向输入复选框的标签的按钮。

问题

我需要 label(或 anchor 或 div)标签的行为与 button 标签完全一样，无需任何额外包装标签，我用谷歌搜索了所有变体，结果与原生标签按钮不一样。

<button class="button">
  Text
  <div>Small Text</div>
</button>

解决方案无效

line-height, padding 不提供相同的功能，因为按钮高度/宽度和文本长度可能不同。我尝试了特殊的 webkit 样式 -webkit-appearance: button; 没有变化。

flex flex

我试过 flex

.button {
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  display: inline-flex;
}

 <div class="button">
   Text
   <div>Small Text</div>
 </div>

但按钮内的子 div 不会中断/变形到新行。p.s 环境测试，谷歌浏览器，Safari

Answer 1

我找到了使用 flex 和 flex-direction: column; 的解决方案，所以 text 和 div 就像列项一样对待，这里是代码

label.button {
    flex-direction: column;
    justify-content: center; /* <-- actual veertical align */
    display: inline-flex;
    text-align:center;
}

JS Fiddle Demo