Question

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

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

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

我尝试了行内块和文本对齐，但是它们不能很好地工作。

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

关于如何对齐内部按钮和文本的任何想法？

谢谢！

Answer 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>

Answer 2

<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>

Answer 3

<!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>

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

3 个答案: