Middle css: CSS Layout — Horizontal & Vertical Align

Leave a Comment / Css / By /

Посередине с элементом — CSS-LIVE

Недавно я написал пост в твиттере, чем озадачил некоторых людей. Они, возможно, подумали, что это был троллинг или сарказм!

Элемент <center> — это потрясающе. Почему я избегал его все эти годы?

Это легче

Допустим, я собираюсь отцентрировать некий текст. В процессе поиска решения мой мозг сталкивается с «вилкой»:

  1. Я использую элемент <center>.
  2. Я не использую элемент <center>, а выбираю решение из множества вариантов на базе CSS.

Допустим, мы выбрали вариант 2. Вот код:

<p>The witch had a cat and a very tall hat,</p>
<p>And long ginger hair which she wore in a plait.</p>
<p>By: Julia Donaldson and Axel Sheffler</p>

Я хочу выровнять по центру информацию об авторах. Вот какова цена второго варианта:

  1. Добавляем класс к последнему элементу
    <p>
  2. Придумываем подходящее название класса, возможно «credit»
  3. Создаём новый стиль в CSS-файле
  4. Добавляем элемент <link> в раздел <head> моего документа
  5. Не забываем добавить rel=«stylesheet», иначе это не будет работать
  6. Добавляем 3 строки в CSS.

Вот такие вот:

.credit {
  text-align: center;
}

Не очень много работы.

А теперь сравним с использованием элемента <center>

  1. Добавляем элемент <center> вокруг содержимого.
  2. Нет, второго шага нету. Вы на секунду попались, верно?

Но… но… семантика!

Хорошо. Семантика. Давайте оставим в стороне серьёзные разговоры, но вот какие утверждения я видел: элемент <center> не имеет никакого семантического значения.

Поэтому вместо него мы можем использовать элементы <span> или <div> (кстати, я уверен, что если вы собирались просто отцентрировать абзац, вы бы использовали элемент <p> и приведённый выше CSS.)

Но теперь вы используете элемент без какого-либо семантического значения, а затем добавляете CSS (и возможно классы), чтобы выровнять его по центру.

И почему же вместо этого не использовать элемент <center>, который «не имеет семантического значения», и не извлечь выгоду от поведения браузерных стилей по умолчанию, которые достаются вам просто так. Точно так же, как вы делаете в случае с разными уровнями заголовков. Или с элементами <sup> или <small>?

Да, но этот элемент считается устаревшим!

На самом деле, согласно W3C-валидатору, элемент является выведенным из употребления — звучит немного строже.

С другой стороны, ну и что с того? Красота HTML в том, что он работает, даже если вы его совсем перекорежите, браузер заставит его работать.

Старые страницы, написанные на элементах <font> и <big> всё ещё работают, и хорошо описаны в спецификаци для браузеров, которые поддерживают HTML4 и которые прекрасно знают, как должны быть застилизованы элементы эти элементы. HTML4 достиг статуса рекомендации в 1999 году, а HTML5 (на 31 июля 2014) всё ещё находился в статусе кандидата в рекомендации.

Моё мнение: браузеры будут поддерживать элементы HTML4 ещё очень долгое… долгое время. Я готов держать пари, что HTML4 и стили элемента <center> будут поддерживаться дольше, чем будет существоватть этот блог (и другие мои сайты).

Итак, этот элемент устарел. Но он работает. И этим, в принципе, можно подытожить практически весь веб: но ведь это работает.

Больше элемента <center>?

Да, лично я убедил себя в том, что буду использовать элемент <center> чуточку чаще (чем вообще никогда, как раньше). Возможно, вы задумаетесь о том, чтобы вернуть этот элемент и в ваш инструментарий.

Оригинал статьи и автор

P.S. Это тоже может быть интересно:
  • перевод

Как центрировать форму с помощью пользовательского CSS с помощью WPForms

Документация разработчика WPForms

Настройка и расширение WPForms с помощью кода

Внимание!

Эта статья содержит код CSS и предназначена для разработчиков. Мы предлагаем этот код в качестве любезности, но не предоставляем поддержку для настройки кода или разработки сторонних разработчиков.

Дополнительные рекомендации см. в руководстве WPBeginner по добавлению пользовательского CSS.

Закрыть

Введение

Вы хотите центрировать свои формы на WPForms? По умолчанию все WPForms настроены на 100% ширины контейнера, в который они помещены, однако вы можете легко добавить простой CSS на свой сайт, чтобы форма располагалась в центре страницы WordPress. В этом уроке мы проведем вас через каждый шаг, чтобы настроить центрирование формы с помощью CSS.

Создание формы

Сначала вам нужно создать форму. Если вам нужна помощь с этим, вы всегда можете просмотреть эту документацию для получения помощи.

После того, как вы создали форму и добавили поля, вам необходимо установить для каждого Размер поля значение Большой . Чтобы установить размер поля , просто щелкните вкладку Advanced и выберите Large из раскрывающегося списка Field Size .

Добавление класса CSS

В конструкторе форм вам нужно перейти в Настройки » Общие . В поле Form CSS Class добавьте wpf-center .

Важно не пропустить этот шаг. Без добавления имени класса CSS, примененный к сайту на следующем шаге, применяться не будет.

Добавление CSS для центрирования формы

И, наконец, теперь нам просто нужно добавить CSS на наш сайт, который будет центрировать форму.

Чтобы получить помощь в добавлении CSS на свой сайт, ознакомьтесь с этим руководством.

 .wpforms-контейнер.wpf-центр {
    поле: 0 авто !важно;
    максимальная ширина: 500px !важно;
    ширина: 500px !важно;
}

CSS использует максимальную ширину из 500px для формы, это означает, что форма никогда не будет шире 500px . Вы, безусловно, можете играть с этой суммой, пока не найдете ту, которая соответствует вашим потребностям.

Приведенное выше правило CSS для отступов является стандартным, если вы хотите центрировать любой блочный элемент на странице с помощью CSS.

Это стилизует только элементы формы. Если вы хотите стилизовать такие вещи, как кнопка отправки, метки, заголовки форм, описания и т. д., используйте этот полный CSS.

 /* Это стилизует только элементы формы */
.wpforms-контейнер.wpf-центр {
    поле: 0 авто !важно;
    максимальная ширина: 500px !важно;
    ширина: 500px !важно;
}

/* Это стиль кнопки отправки */
.wpf-центр .wpforms-отправить-контейнер {
    отображение: встроенный блок;
    выравнивание текста: по центру;
    ширина: 100% !важно;
}

/* Это стилизует все элементы разрыва страницы */
.wpf-center .wpforms-field-pagebreak {
    отображение: встроенный блок;
    выравнивание текста: по центру;
    ширина: 100% !важно;
}

.wpf-center .wpforms-pagebreak-left .wpforms-page-button:before,.wpf-center .wpforms-pagebreak-left .wpforms-page-button:after {
содержание: нет;
}

/* Это стилизует все метки, описания полей, заголовки и описания форм */
.
  wpf-центр .wpforms-название,
.wpf-центр .wpforms-описание,
.wpf-center .wpforms-метка поля,
.wpf-center .wpforms-field-sublabel,
.wpf-center .wpforms-поле-описание {
    выравнивание текста: по центру;
}

И это все, что вам нужно для центрирования формы. Хотели бы вы иметь возможность изменить цвет кнопки отправки в ваших формах? Взгляните на нашу статью о том, как изменить цвет кнопки отправки.

Часто задаваемые вопросы

В: Почему у меня не работает CSS?

A: Убедитесь, что вы добавили имя класса CSS, как указано выше. Без выполнения этого шага CSS не будет применен и форма не будет центрирована.

Метки:CSS

Была ли эта статья полезной?

Спасибо за отзыв!

Все еще застряли? Как мы можем помочь?

Последнее обновление: 08 сентября 2022 г.

CSS-сетка — кратчайший путь к центрированию элементов 0103

Время чтения
2 минуты

Сегодня я твитнул о новое свойство CSS, которое я обнаружил: мест-предметов . Это просто сокращение для align-items и justify-content – по крайней мере я так думал . Оказывается, элементов размещения — это сокращение для элементов выравнивания и элементов выравнивания (спасибо Бенджамину за указание на это).

Поначалу это открытие меня огорчило, потому что это означало, что я не мог избавиться от одного объявления CSS в своих классах на основе flexbox для центрирования элементов.

 /* этот класс центрирует элементы с помощью flexbox
   и останется ли здесь */
.центр {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  выравнивание содержимого: по центру;
}

Поделившись своим разочарованием, Бенджамин упомянул кое-что, о чем я раньше не подумал. place-items отлично работает с display: grid .

Как центрировать элементы с помощью сетки CSS

Должен признать, что даже когда CSS сетка в настоящее время поддерживается в разных браузерах, я еще мало ей пользовался. Оказывается, вы можете использовать 9Отображение 0045: сетка для центрирования элементов так же быстро, как при использовании flexbox.

Определите display: grid

на элементе (см. этот CodePen в качестве примера), соедините grid-declaration с align-items и justify-items , и все готово! Вы только что центрировали дочерний элемент этого элемента.

 
  <тело>
    привет из центрального диапазона
  

 
 .center-using-grid {
  отображение: сетка;
  выравнивание элементов: по центру;
  элементы выравнивания: центр;
}

align-items и justify-items определяют свойства align-self и justify-self для всех дочерних элементов прямой сетки. Взгляните на таблицу ниже, чтобы узнать об этих свойствах CSS.

DevSheet, объясняющий размещение элементов в CSS

Хорошая вещь в этом подходе; вы можете объединить элементов выравнивания и элементов выравнивания в одно объявление — элементов места .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *