Кнопка CSS, как функция вертикального выравнивания

Question

Пред история

Я создаю HTML-форму, с элементами, имеющими несколько вариантов...., но вместо того, чтобы показывать их как выпадающий список, я хотел бы показать их как кнопки без использования js, я удалил кнопки с меткой, указывающей на флажок ввода.

проблема

я нуждаюсь label (или же anchor или же div) тег ведет себя так же, как button тег без каких-либо дополнительных тегов-оберток, я гуглил, что все варианты не дают такой же результат, как кнопка родного тега.

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

Решения не работают

line-height, padding не обеспечивает одинаковую функциональность, поскольку высота / ширина кнопки и длина текста могут различаться. Я попробовал специальный стиль webkit -webkit-appearance: button; без изменений.

Mustery Flex

Я пробовал прогибаться

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

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

но ребенок div внутренняя кнопка не ломается / деформируется на новую строку. ps среда проверена, Google Chrome, 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

Это делает работу?

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

div.button div {
  clear: both;
}

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

Answer 3

Трюк с призрачными элементами выглядит хорошо.

.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;
 }

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