Inicialmente, quiero construir un solo botón como este

enter image description here

No pude encontrar la manera de ponerlos todos dentro de un botón, por lo tanto, creo dos botones para realizar la misma funcionalidad dentro de un mismo contenedor.

Pero el texto no está alineado verticalmente como aquí.

enter image description here

Intenté el bloqueo dentro de la línea y la alineación de texto, pero simplemente no funcionan bien.

Mi CSS es así:

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

Mi html se ve así:

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

¿Alguna idea sobre cómo alinear los botones y el texto dentro?

¡Gracias!

2
Marcus.Aurelianus 11 oct. 2019 a las 06:46

3 respuestas

La mejor respuesta

¡Aqui tienes!

.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>
2
Nidhin Joseph 11 oct. 2019 a las 04:09
<!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>
1
Jan Kyu Peblik 11 oct. 2019 a las 04:32

enter image description here

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

Con abajo 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>
0
Savan 11 oct. 2019 a las 04:45