Как центрировать текст под блоком с данными времени?

Рейтинг: 0Ответов: 2Опубликовано: 29.01.2023

День бодрый, как можно выставить "дней / часов / минут / секунд" под нулями ровно, как в макете. Макет

Я сделал это так: HTML:

<div class="stock"><span class="stock_text"><b>До конца акции осталось</span>
            <p class="stock_time">00 : 00 : 00 : 00</p></b>
            <p class="stock_data">дней часов минут секунд</p>
        </div>

CSS:

.stock_time {
    margin-top: 20px;
    font-size: 55px;
    word-spacing: 10px;
}

.stock_data {
    text-align: center;
    font-size: 20px;
    word-spacing: 55px;
}

Как результат: Моё

css html веб-программирование
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Один из вариантов:

  .times {
    display: flex;
    font-size: 100px;
  }
  .times > div > div:nth-child(2) {
    font-size: 20px;
    text-align: center;
  }
  .times > div > div:nth-child(1) {
    font-weight: bold;
  }
  .times > div {
    padding: 5px;
  }
<div class="times">
  <div>
    <div>00</div>
    <div>дней</div>
  </div>
  <div> : </div>
  <div><div>00</div><div>часов</div></div>
  <div> : </div>
  <div><div>00</div><div>минут</div></div>
  <div> : </div>
  <div><div>00</div><div>секунд</div></div>
</div>

▲ 0

Можно Вот так:

body {
  display: flex;
  height: 100vh;
  margin: 0;
  color: white;
  background-color: #283D46;
}

.title {
  font-size: 32px;
}

.wrapper {
  text-align: center;
  margin: auto;
}

.date>td {
  font-size: 86px;
  font-weight: bold;
}
<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th colspan="7" class="title">До конца акции осталось</th>
      </tr>
      <thead>
        <tbody>
          <tr class="date">
            <td>00</td>
            <td>:</td>
            <td>00</td>
            <td>:</td>
            <td>00</td>
            <td>:</td>
            <td>00</td>
          </tr>
          <tr>
            <td>Дней</td>
            <td></td>
            <td>Часов</td>
            <td></td>
            <td>Минут</td>
            <td></td>
            <td>Секунд</td>
          </tr>
        </tbody>
  </table>
</div>