Html CSS：对齐容器中按钮的文本

最初，我想构建一个这样的按钮

我不知道如何将它们全部放在一个按钮中，因此我创建了两个按钮，在同一个容器中执行相同的功能

但是文本没有像这里那样垂直对齐

我试着在行块和文本对齐，但他们只是不工作得很好

我的css是这样的：

.button_tab {
  overflow: hidden;
  background-color: rgba(49, 63, 92, 1);
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border: none;
}

.button {
  white-space: pre;
  color: rgba(240, 167, 54, 1);
  border: none;
  vertical-align: middle;
  text-align: center;
  background-color: rgba(0, 0, 0, 0);
  display: inline-block
}

<span class="button_tab">
  <button class="button">
    Tue
    Jun</button>
  <button class="button">
    24
    </button>  
</span>

我的html如下所示：

.button_tab {
  overflow: hidden;
  background-color: rgba(49, 63, 92, 1);
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border: none;
}

.button {
  white-space: pre;
  color: rgba(240, 167, 54, 1);
  border: none;
  vertical-align: middle;
  text-align: center;
  background-color: rgba(0, 0, 0, 0);
  display: inline-block
}

<span class="button_tab">
  <button class="button">
    Tue
    Jun</button>
  <button class="button">
    24
    </button>  
</span>

星期二
六月
24

关于如何对齐按钮和里面的文字有什么想法吗

谢谢

给你

.button\u包装器{
背景色：#252c3e；
填充：0.5em；
显示：内联块；
}
.按钮选项卡{
背景色：#313f5c；
边界：无；
文本对齐：居中；
光标：指针；
显示器：flex；
对齐项目：居中；
填充：0.3em；
盒影：0 3px 6px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23）；
}
.按钮{
颜色：rgba（240、167、54、1）；
显示器：flex；
对齐项目：居中；
}
.按钮跨度：第一个孩子{
右边距：0.5em；
}
.按钮跨度：最后一个孩子{
字号：3em；
}

星期二


六月
24

.日期{
显示：块；
背景：午夜蓝；
颜色：橙色；
字体系列：monospace；
溢出：自动；
宽度：240px；
高度：计算（90px/6*4）；
填充：钙（90px/6）0；
}
.日期跨度{
溢出：隐藏；
显示：块；
宽度：40%；
高度：计算（90px/6*2）；
字体大小：calc（90px/6*2）；
垂直对齐：中间对齐；
文本对齐：右对齐；
浮动：左；
清除：左；
}
.date span{显示：无；}
.日期>跨度：最后一个孩子{
浮动：对；
保证金：计算（-90px/6*4）0；
高度：计算（90px/6*4）；
字体大小：calc（90px/6*4）；
文本对齐：左对齐；
宽度：50%；
}

星期二
六月
24

下面是css

<style>
.button_tab {
  height: 120px;
  width: 200px;
  overflow: hidden;
  background-color: rgba(49, 63, 92, 1);
  border: 3px solid rgb(0, 0, 0);
  align-items: center;
}
.button {
  white-space: pre;
  color: rgba(240, 167, 54, 1);
  display: inline-block;
}
.day{
  margin-left: 5px;
  font-size: 200%;
}
</style>

.按钮选项卡{
高度：120px；
宽度：200px；
溢出：隐藏；
背景色：rgba（49,63,92,1）；
边框：3倍实心rgb（0,0,0）；
对齐项目：居中；
}
.按钮{
空白：预处理；
颜色：rgba（240、167、54、1）；
显示：内联块；
}
.天{
左边距：5px；
字体大小：200%；
}

答案很好！但有可能在一个按钮内完成吗？非常感谢。我想要一个可以点击的按钮。我将你的div替换为按钮，然后淡出背景。它起作用了。这里唯一的问题是，Pad中有很多空间无法单击，但这只是一个小问题，非常感谢您的帮助。认可的！哦，不。我将包装器div替换为按钮，整个东西都是可点击的。我太新手了。非常感谢！