Текст html центрировать: Как выровнять текст по центру?

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

Задать вопрос

Вопрос задан 1 месяц назад

Изменён 1 месяц назад

Просмотрен 32 раза

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

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

<div><span><b>До конца акции осталось</span>
            <p>00 : 00 : 00 : 00</p></b>
            <p>дней часов минут секунд</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;
}

Как результат:

• html
• css
• веб-программирование

4

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

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

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

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>
  <table>
    <thead>
      <tr>
        <th colspan="7">До конца акции осталось</th>
      </tr>
      <thead>
        <tbody>
          <tr>
            <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>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

Интернет-агентство BINN » Как центрировать текст с помощью div? Часть 1

Основная проблема создания макетов сайтов — это расположение и стилизация элементов на странице. Здесь есть огромное поле для экспериментов — вы можете расположить элементы так, чтобы они перекрывались между собой или наоборот создать между ними пространство. 

Вы можете расположить часть текста на странице по центру, а остальную часть выровнять по левому краю. В этих вопросах на помощь вам придет элемент div. 

Вы этой статье мы рассмотрим несколько методов центрирования элементов, а также более подробно рассмотрим, что такое div.

Div (Content Division Elements) — это общий HTML-элемент блочного уровня, который помогает разбивать веб-страницы на разделы. Div — это универсальный контейнер для потокового контента, который не влияет на макет до тех пор, пока не будет стилизован с помощью CSS. 

Элемент div, например, поможет вам, если вы хотите включить блочную цитату в окно блога, которое будет выравниваться по центру, а не по левому краю, как основной текст. В этом случае вы можете поместить текст в элемент div и применить CSS к конкретному элементу. Остальной текст на странице останется без изменений.

Понимание того, как центрировать элементы div и текст в элементах div — это один из самых важных и базовых навыков начинающих веб-разработчиков и людей, кто так или иначе связан с веб-сайтами. Этот элемент помогает предотвратить наложение элементов и растягивание содержимого на странице.

С помощью CSS вы можете центрировать текст в div несколькими способами. Самый распространенный способ — использовать свойство text-align для горизонтального центрирования. 

Другой способ — использовать свойства line-height и vertical-align. Этот способ применяется исключительно к flex-элементам и требует свойства justify-content и align-items. Используя этот метод, вы можете центрировать текст по горизонтали, вертикали или по обоим направлениям. Ниже мы подробно рассмотрим каждый метод.

Есть два способа центрировать текст в div по горизонтали. Давайте рассмотрим каждый способ на примере ниже: 

Удобнее всего центрировать текст по горизонтали в div с помощью свойства text-align со значением center. Допустим, вы хотите создать div с коротким абзацем внутри. В вашем HTML вы можете присвоить div класс center. Затем вы можете использовать селектор CSS.center, чтобы стилизовать его с помощью свойства text-align.

Есть одно исключение из правила выше: если вы используете свойство display для определения вашего div как контейнера flex, то вы не можете использовать свойство text-align для горизонтального центрирования текста внутри div. Вместо этого вы должны использовать свойство justify-content с центром значений.

Давайте создадим тот же элемент div, но на этот раз определим свойство display как flex, чтобы сделать div контейнером flex, и определим свойство justify-content как center.

Центрировать текст внутри div по вертикали немного сложнее, чем по горизонтали, ниже мы рассмотрим каждый доступный метод:

Вы можете центрировать текст по вертикали в div с помощью свойства padding. В этом способе заполнение будет принимать два значения. Первое значение установит верхний и нижний отступы, а второе — правое и левое заполнение. 

Так как мы хотим центрировать текст по вертикали, первое значение может быть любой положительной длиной или процентным значением. Второе значение должно быть 0.

Вы также можете центрировать текст по вертикали внутри div с помощью свойства line-height. Добавьте в HTML элемент абзаца внутри div, затем установите свойство line-height равным высоте div.

Чтобы центрировать абзац с несколькими строками, установите для отображения абзаца значение inline-block, для line-height значение normal и для vertical-align значение middle. Таким образом текст внутри div будет центрирован по вертикали, будь то одна строка или несколько строк текста.

^{Источник: hubspot.com}

 
Текст
 

 
<тип стиля="текст/CSS">



<тело>
...
  
Текст

 

 <голова>


 

 
 
 Текст здесь