CSS：对齐容器内按钮的文本答案

【问题标题】：CSS: aligning text of buttons inside a containerCSS：对齐容器内按钮的文本
【发布时间】：2020-02-08 13:14:00
【问题描述】：

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

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

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

我尝试了行内块和文本对齐，但它们效果不佳。

我的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
}

我的 html 看起来像这样：

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

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

谢谢！

【问题讨论】：

标签： html css button alignment

【解决方案1】：

给你！

.button_wrapper {
  background-color: #252c3e;
  padding: 0.5em;
  display: inline-block;
}

.button_tab {
  background-color: #313f5c;
  border: none;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 3em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.button {
  color: rgba(240, 167, 54, 1);
  display: flex;
  align-items: center;
}

.button span:first-child {
  margin-right: 0.5em;
}

.button span:last-child {
  font-size: 3em;
}

<div class="button_wrapper">
  <div class="button_tab">
    <div class="button">
      <span>
        <b>Tue</b>
        <br>
        Jun
      </span>
      <span>
        24
      </span>
    </div>
  </div>
</div>

【讨论】：

答案很棒！但是有可能一键搞定吗？
嗯，非常感谢。我实际上想要一个可以点击的按钮。我将您的 div 替换为按钮并淡出背景。有用。这里唯一的问题是Pad中有足够的空间无法点击，但这只是一个小问题，非常感谢您的帮助。接受！
哦，不。我将包装器 div 替换为按钮，整个东西都是可点击的。我太新手了。== 非常感谢！

【解决方案2】：

<!doctype html>
<html>
	<head>
		<title></title>
		<style>
.date {
	display: block;
	background: midnightblue;
	color: orange;
	font-family: monospace;
	overflow: auto;
	width: 240px;
	height: calc(90px / 6 * 4);
	padding: calc(90px / 6) 0;
}
.date span {
	overflow: hidden;
	display: block;
	width: 40%;
	height: calc(90px / 6 * 2);
	font-size: calc(90px / 6 * 2);
	vertical-align: middle;
	text-align: right;
	float: left;
	clear: left;
}
.date span span { display: none; }
.date > span:last-child {
	float: right;
	margin: calc(-90px / 6 * 4) 0 0;
	height: calc(90px / 6 * 4);
	font-size: calc(90px / 6 * 4);
	text-align: left;
	width: 50%;
}
		</style>
	</head>
	<body>
		<div style="width: 240px; height: 90px; background: url(https://i.stack.imgur.com/X6ioZ.jpg) 50% 50%;"></div>
		<a href="#foo" title="bar" class="date"><span>Tue<span>sday,</span></span> <span>Jun<span>e</span></span> <span>24<span>th</span></span></a>
	</body>
</html>

【讨论】：

【解决方案3】：

<button class="button_tab"  onclick="alert();">
    <div class="button">Tue<br>Jun</div>
    <div class="button day">24</div>
</button>

下面的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>

【讨论】：