CSS: выравнивание текста кнопок внутри контейнера - PullRequest
Новая
       34

CSS: выравнивание текста кнопок внутри контейнера

2 голосов
/ 11 октября 2019

Изначально я хочу создать одну кнопку, подобную этой:

enter image description here

Я не мог понять, как поместить их все в одну кнопку, поэтомуЯ создаю две кнопки для выполнения одинаковых функций внутри одного контейнера.

Но текст не выровнен по вертикали, как здесь.

enter image description here

Я пробовал внутриблочный блок и выравнивание текста, но они просто не работают хорошо.

Мой 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>

Есть идеи, как выровнять кнопки и текст внутри?

Спасибо!

Ответы [ 3 ]

4 голосов
/ 11 октября 2019

enter image description here

<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>
2 голосов
/ 11 октября 2019 

<!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>
2 голосов
/ 11 октября 2019

Вот, пожалуйста! 

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