类似垂直对齐功能的 CSS 按钮答案

【问题标题】：CSS button like vertical align feature类似垂直对齐功能的 CSS 按钮
【发布时间】：2025-12-20 01:30:06
【问题描述】：

前历史

我正在构建 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 内部按钮不会中断/扭曲到新行。 p.s 环境测试，谷歌浏览器，Safari

【问题讨论】：

你能提供你的代码的jsfiddle吗？
看起来像XY problem，如果您需要复制它的功能，为什么不直接使用button？
按钮jsfiddle.net/s1dqtmLs，标签jsfiddle.net/7vegryym/1
@LazarLjubenović 我正在制作 html 表单，我在其中使用多个选择输入，但外观将是按钮而不是选项，而不是按钮，我将使用带标签的输入复选框，复选框将被隐藏
<button>s 不能包含 div...这是无效的 HTMl。

标签： html css button flexbox

【解决方案1】：

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

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

JS Fiddle Demo

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：