如何取消button元素内部子元素的垂直居中对齐

我遇到了和常见垂直对齐问题相反的情况：我的button内部元素默认是垂直居中的，但我并不想要这种效果。

我的button是固定尺寸的，希望内部元素像普通<div>那样正常排列，但必须使用button标签以保证可点击性和可访问性。

当前效果与期望效果对比：

当前代码 #

<button>
  <span class="c1">1</span>
  <span class="c2">2</span>
  <span class="c3">3</span>
</button>

button {
  display: inline-block;
  width: 150px;
  height: 100px;
  background-color: #ddd;
  color: black;
  border: 2px solid #aaa;
  text-align: left;
  padding: 5px;
  vertical-align: top;
  font: inherit;
}
  
.c1 {
  display: block;
  font-size: 20px;
  color: gray;
  padding: 0 0 5px 0;
}

.c2, .c3 {
  display: inline-block;
  background-color: purple;
  color: white;
  padding: 0 6px;
  border-radius: 100%;
}

解决方案 #

button元素默认的inline-block布局会让内部元素默认垂直居中，要实现类似div的顶部对齐效果，最直观的方法是使用Flexbox布局：

修改button的CSS属性，将display改为flex，并设置垂直排列和顶部对齐：

button {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 150px;
  height: 100px;
  background-color: #ddd;
  color: black;
  border: 2px solid #aaa;
  text-align: left;
  padding: 5px;
  font: inherit;
}

/* 其余样式保持不变 */
.c1 {
  display: block;
  font-size: 20px;
  color: gray;
  padding: 0 0 5px 0;
}

.c2, .c3 {
  display: inline-block;
  background-color: purple;
  color: white;
  padding: 0 6px;
  border-radius: 100%;
}

这样修改后，button内部的元素会从顶部开始依次排列，和普通div的布局行为一致，同时保留了button的可点击性和可访问性。

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