CSS: aligning text of buttons inside a container

user_9526787 0
Viewed 589

Initially, I want to build a single button like this

enter image description here

I could not figure out how to put them all inside one button, therefore I create two buttons to perform the same functionality inside a same container.

But the text is not aligned vertically as here.

enter image description here

I tried within-line block and text-align but they just do not work well.

My css is like this:

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

My html looks like this:

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

Any ideas on how to align the buttons and text inside?

Thanks!

alignment button css html
3 Answers

Here you go!

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

user_32896600 

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

user_59215480

enter image description here

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

with below 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>
user_51352490
Related