Просмотров: 3 123

Выравнивание элементов в форме по центру.

Посмотрите на следующий пример.

В этой форме подписки текстовые поля и форма подписки выравниваются по левому краю. Давайте рассмотрим техники, которые позволят выравнять эти элементы по центру.

Сначала давайте займемся элементами <p>. Здесь все довольно просто, для их выравнивание по центру нужно воспользоваться свойством text-align:center.

.mysubform p {color:#fff; text-align:center;}

С кнопкой отправить несколько сложнее, вот стили CSS, которые решают эту проблему.

.mysubform input[type="submit"] {
   padding:7px;
   background:rgba(0, 0, 0, 0);
   color:#FFFC00; border:2px solid #FFFC00;
   border-radius:5px;
   margin:auto;
   width:200px;
}

Нужно присвоить кнопке какое-то конкретное значение свойства width и применить свойство margin:auto.

Смотрим результат здесь:

Все уроки курса «Верстка стильных форм подписки» здесь.