1

.posts-item__date {
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius: 3px 3px 0 0;
  background-color: #c7b299;
  width: 50px;
  height: 35px;
  color: #ffffff;
  font-family: Montserrat-Light;
  font-size: 24px;
  line-height: 20px;
}
<div class="posts-item__date">30</div>

Как расположить текст по центру горизонтально и вертикально? Пробовал text-align: center;, но текст лишь горизонтально встает по центру, вертикально прилип к верху

2 ответа 2

2

Единицу измерения line-height- можно указывать и без каких либо мер: line-height: 1.5, более того, возможность указывать,- ту или иную единицу измерения внесли относительно недавно. Скажу откровенно, уже не помню, что и откуда и с каких данных парсер высчитывает, если не указывать единицу измерения.

.posts-item__date {
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius: 3px 3px 0 0;
  background-color: #c7b299;
  width: 50px;
  height: 35px;
  color: #ffffff;
  font-family: Montserrat-Light;
  font-size: 24px;
  line-height: 1.5;
  /*изменения тут*/
  text-align: center;
}
<div class="posts-item__date">30</div>

Вариант второй, если контент многострочный

.posts-item__date {
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius: 3px 3px 0 0;
  background-color: #c7b299;
  width: 150px;
  height: 75px;
  color: #ffffff;
  font-family: Montserrat-Light;
  font-size: 24px;
  text-align: center;
  /*все делает данный кусок кода*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*естественно можно и не flex использовать*/
}

.posts-item__date>span {
  background-color: green;
}

.posts-item__date_1 {
  position: absolute;
  top: 120px;
  left: 20px;
  border-radius: 3px 3px 0 0;
  background-color: #c7b299;
  width: 150px;
  height: 75px;
  color: #ffffff;
  font-family: Montserrat-Light;
  font-size: 24px;
  text-align: center;
  /* обрати внимание, как line-height воздействует на span */
  line-height: 5;
}

.posts-item__date_1>span {
  background-color: green;
}
<div class="posts-item__date">
  <span>30</span>
  <span>сентябрь</span>
</div>

<div class="posts-item__date_1">
  <span>30</span>
</div>

0
0

<div class="posts-item__date" style="background:blue;">
  <div style="display:table;height:100%; background:red;">
    <div style="display:table-cell;text-align:center;vertical-align:middle; background:green;">Текст</div>
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.