Как сделать выравнивание?

Question

Полина Титова @poly-titova

Как сделать выравнивание?

Вёрстка выглядит таким образом. Выравнивание по центру текста реализована с помощью text-align: center;. По этому же принципу были сделаны input'ы, но в ответ ничего. Что же не так, и как это исправить?

Вопрос задан более трёх лет назад
120 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

Решения вопроса 4

Комментировать

5 комментариев

Полина Титова @poly-titova Автор вопроса
z80b Хотела бы задать похожий вопрос, если понадобиться выравнивание по центру элементы класса items, то суть не меняется? Тогда код будет выглядеть так
.items { border: 2px black; width: 100%; text-align: center; }
?
Написано более трёх лет назад
Александр @z80b

Полина Титова, text-align влияет только на inline элементы, т.е. если вы зададите .items { text-align: center }, то сами div-ы никуда не подвинутся, только текст внутри них. Div по умолчанию display: block.

Написано более трёх лет назад
Полина Титова @poly-titova Автор вопроса

z80b сделала display: inline и text-align: center, но подвинулись текста - код

Написано более трёх лет назад

Александр @z80b

Вам тут уже посоветовали использовать flex, т.е. будет примерно так:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      .top .down {
        width: 100%;
        border: 2px black;
      }

      .top {
        top: 50%;
        background: #C4C4C4;
      }

      .top-el {
        border: 2px black;
        text-align: center;
      }

      .items {
        border: 2px black;
        display: flex;
        justify-content: center;
      }

      .grid-item {
        text-align: center;
        border: 2px black;
        width: 380px;
        padding-top: 50px;
        padding-left: 20px;
      }

      .img {
        width: 100%;
        height: 200px;
        background: #C4C4C4;
      }

      .controls {
        text-align: center;
      }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="top">
        <h3 class="top-el">Тестовое задание ione</h3>
        <h1 class="top-el">Заголовок</h1>
        <h3 class="top-el">Подзаголовок</h3>
        <div class="controls">
          <input class="top-el" type="text" placeholder="Ваш телефон">
          <button class="top-el">Push me</button>
        </div>
    </div>
    <div class="down">
        <div class="items">
            <div class="grid-item">
                <div class="img"></div>
                <h2>Заголовок</h5>
                <p>Важный текст поясняющий суть тезиса</p>
            </div>
            <div class="grid-item">
                <div class="img"></div>
                <h2>Заголовок</h5>
                <p>Важный текст поясняющий суть тезиса</p>
            </div>
            <div class="grid-item">
                <div class="img"></div>
                <h2>Заголовок</h5>
                <p>Важный текст поясняющий суть тезиса</p>
            </div>
        </div>
    </div>
</body>
</html>

Написано более трёх лет назад

Александр @z80b

либо по старинке на inline-block:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      .top .down {
        width: 100%;
        border: 2px black;
      }

      .top {
        top: 50%;
        background: #C4C4C4;
      }

      .top-el {
        border: 2px black;
        text-align: center;
      }

      .items {
        border: 2px black;
        text-align: center;
      }

      .grid-item {
        display: inline-block;
        text-align: center;
        border: 2px black;
        width: 380px;
        padding-top: 50px;
        padding-left: 20px;
      }

      .img {
        width: 100%;
        height: 200px;
        background: #C4C4C4;
      }

      .controls {
        text-align: center;
      }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="top">
        <h3 class="top-el">Тестовое задание ione</h3>
        <h1 class="top-el">Заголовок</h1>
        <h3 class="top-el">Подзаголовок</h3>
        <div class="controls">
          <input class="top-el" type="text" placeholder="Ваш телефон">
          <button class="top-el">Push me</button>
        </div>
    </div>
    <div class="down">
        <div class="items">
            <div class="grid-item">
                <div class="img"></div>
                <h2>Заголовок</h5>
                <p>Важный текст поясняющий суть тезиса</p>
            </div>
            <div class="grid-item">
                <div class="img"></div>
                <h2>Заголовок</h5>
                <p>Важный текст поясняющий суть тезиса</p>
            </div>
            <div class="grid-item">
                <div class="img"></div>
                <h2>Заголовок</h5>
                <p>Важный текст поясняющий суть тезиса</p>
            </div>
        </div>
    </div>
</body>
</html>

Написано более трёх лет назад

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 4 часа назад
- 49 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- 19 часов назад
- 63 просмотра
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 54 просмотра
1

ответ
Вёрстка

+1 ещё

Простой
Как правильно должна масштабироватся верстка сайта на десктопе?
- 1 подписчик
- вчера
- 86 просмотров
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 30 просмотров
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 67 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 95 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 83 просмотра
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 85 просмотров
2

ответа
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 103 просмотра
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Разработать дизайн приложений

22 дек. 2024, в 19:03

60000 руб./за проект

Веб-дизайн клининговой компании

22 дек. 2024, в 17:54

10000 руб./за проект

Нарисовать UX/UI дизайн для игры. Нарисовать несколько иконок для игры

22 дек. 2024, в 17:45

10000 руб./за проект

Полина Титова дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

Answer 1 · 2020-10-06 17:41:13

FeST1VaL @FeST1VaL

Тихий

Оберните блок кнопки и input в div и дайте ему 100% ширину и text-align: center

Ответ написан более трёх лет назад

Комментировать

Answer 2 · 2020-10-06 17:44:13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      .top .down {
        width: 100%;
        border: 2px black;
      }

      .top {
        top: 50%;
        background: #C4C4C4;
      }

      .top-el {
        border: 2px black;
        text-align: center;
      }

      .items {
        border: 2px black;
      }

      .grid-item {
        border: 2px black;
        width: 380px;
        float: left;
        padding-top: 50px;
        padding-left: 20px;
        float: left;
      }

      .img {
        width: 100%;
        height: 200px;
        background: #C4C4C4;
      }

      .controls {
        text-align: center;
      }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="top">
        <h3 class="top-el">Тестовое задание ione</h3>
        <h1 class="top-el">Заголовок</h1>
        <h3 class="top-el">Подзаголовок</h3>
        <div class="controls">
          <input class="top-el" type="text" placeholder="Ваш телефон">
          <button class="top-el">Push me</button>
        </div>
    </div>
    <div class="down">
        <div class="items">
            <div class="grid-item">
                <div class="img"></div>
                <h2>Заголовок</h5>
                <p>Важный текст поясняющий суть тезиса</p>
            </div>
            <div class="grid-item">
                <div class="img"></div>
                <h2>Заголовок</h5>
                <p>Важный текст поясняющий суть тезиса</p>
            </div>
            <div class="grid-item">
                <div class="img"></div>
                <h2>Заголовок</h5>
                <p>Важный текст поясняющий суть тезиса</p>
            </div>
        </div>
    </div>
</body>
</html>

Answer 3 · 2020-10-06 17:45:44

Eugen @malente

Полное руководство по Flexbox

Ответ написан более трёх лет назад

Комментировать

Answer 4 · 2020-10-06 18:04:59

Икотий Айтишевич @ikoit

Web Developer

Всю интересующую информацию вы найдёте тут, если внимательно прочитаете: https://developer.mozilla.org/ru/

Ответ написан более трёх лет назад

Комментировать

Как сделать выравнивание?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт