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

Как центрировать блочный элемент?

<section class="main_registration">
        <div class="container">
            <div class="col-md-12">
                <div class="registration">
                    <div class="row">
                        <div class="col-md-12">
                            <h3>Добро пожаловать</h3>
                            <p>Авторизируйтесь</p>
                            <form action="" method="POST">
                                <input type="text" name="login" placeholder="Введите логин">
                                <input type="password" name="password" placeholder="Введите пароль">
                                <button class="submit_login" name="submit_login">Войти</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

body {
	font-family: "RobotoRegular", sans-serif;
	font-size: 16px;
        background-color:#666666;
}
.registration {
    margin-top:300px;
}
.registration h3 , .registration p {
    text-align:center;
    color:#fff;
}
form {
    text-align:center; 
}
.registration input {
    margin:0 0 10px 0;
    display:block;
}
.registration button {
    display:block;
}


Никак не могу понять text-align:center не работает с display:block или в чем-то другом проблема.Хочу центрировать инпуты и кнопку,но text-align:center в этом случае не работает,но если убрать display:block заработает
  • Вопрос задан
  • 266 просмотров
Подписаться 1 Оценить Комментировать
Решения вопроса 2
viphorizon
@viphorizon
body {
  font-family: "RobotoRegular", sans-serif;
  font-size: 16px;
        background-color:#666666;
}
.registration {
    margin-top:300px;
}
.registration h3 , .registration p {
    text-align:center;
    color:#fff;
}
form {
  width: 200px;
  margin: 0 auto;
  background: #f0f0f0;
}
.registration input {
    margin:0 0 10px 0;
    display:block;
}
.registration button {
    display:block;
}
Ответ написан
Комментировать
@archelon
text-align:center применяется только к строчным (inline) элементам.
выровнять блок по центру можно с помощью свойства margin: 0 auto;, как в примере выше (также обязательно надо указать ширину данного элемента в любых единицах).
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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