CSS按钮就像垂直对齐功能一样

Question

历史记录

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

问题

我需要label（或anchor或div）标记的行为与button标签完全相同，没有任何额外的包装标签，我google了所有变体都没有提供相同的结果作为本机标签按钮。

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

解决方案不起作用

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

Mustery 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

Answer 2

这可以胜任吗？

＆＃13;

＆＃13;

div.button {
  align-items: center;
  text-align: center;
  display: inline-block;
  border: 1px solid black;
}

div.button div {
  clear: both;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

Ghost元素技巧看起来效果很好。

＆＃13;

＆＃13;

.wrap {
  text-align: center;
  background: #ededed;
  margin: 20px;
}
 
.wrap:before {
  content: '\200B';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
 }
 
.centered-guy {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #777 dotted 2px;
  background: #666;
  color: #fff;
 }

＆＃13;

<div class="wrap" style="height: 512px;"> 
    <div class="centered-guy">
        <h1>Some text</h1>
        <p>Bool!<br>Look at me, mama!</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;