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

Вёрстка выглядит таким образом. Выравнивание по центру текста реализована с помощью text-align: center;. По этому же принципу были сделаны input'ы, но в ответ ничего. Что же не так, и как это исправить?
  • Вопрос задан
  • 111 просмотров
Решения вопроса 4
FeST1VaL
@FeST1VaL
Тихий
Оберните блок кнопки и input в div и дайте ему 100% ширину и text-align: center
Ответ написан
z80b
@z80b
Frontend
<!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>
Ответ написан
ikoit
@ikoit
Веб–разработчик
Всю интересующую информацию вы найдёте тут, если внимательно прочитаете: https://developer.mozilla.org/ru/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы