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

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 ещё

Средний
Как правильно вставлять изображения при наличии двух тем оформления сайта?
- 1 подписчик
- 39 минут назад
- 36 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- 2 часа назад
- 56 просмотров
1

ответ
CSS

Простой
Как уместить кроссбраузерную поддержку в одну строку?
- 1 подписчик
- 2 часа назад
- 60 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 16 часов назад
- 73 просмотра
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 16 часов назад
- 63 просмотра
2

ответа
JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 18 часов назад
- 66 просмотров
1

ответ
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 20 часов назад
- 51 просмотр
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 20 часов назад
- 66 просмотров
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- 23 часа назад
- 57 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- вчера
- 79 просмотров
0

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

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Нужен директолог с опытом работы

19 апр. 2024, в 10:02

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

Помощь с парсингом XML файла яндекс товаров

19 апр. 2024, в 09:46

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

Обработать массив фотографий

19 апр. 2024, в 08:46

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

Полина Титова дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 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/

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

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

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

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

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

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