Codelab: Центрирование в CSS

Адам Аргайл

В этой лабораторной работе вы сможете поделиться своим любимым способом центрирования в CSS и продемонстрировать его.

Ознакомьтесь с моей публикацией в блоге «Центрирование в CSS», чтобы узнать о пяти моих любимых способах центрирования в CSS. Или посмотрите это видео!

Настраивать

  1. Нажмите «Ремикс для редактирования», чтобы сделать проект редактируемым.
  2. Открыть app/index.html
  3. В line 23 замените /* your centering CSS here /* на ваш CSS
  4. (необязательно) Назовите свой метод центрирования и замените текст в <h1>

Стили

  1. Создайте новый файл в папке app/css/
  2. Создайте селектор для хранения вашего решения по центрированию, например .turbo-center или [floaty-mcfloat]
  3. В этом новом селекторе напишите свой метод центрирования (в качестве примеров вы можете посмотреть на другие методы в app/css/ )
  4. (необязательно) напишите несколько «стилей поддержки», чтобы мы могли увидеть, каким детям нужны стили для поддержки центрирования
  5. Откройте app/css/index.css и импортируйте новый файл внизу.

Свяжите все это вместе

  1. Откройте app/index.html еще раз.
  2. Найдите <article> и присвойте ему пользовательский селектор, созданный вами на шаге 2 предыдущего раздела.
  3. Напишите мне в Твиттере о вашем глюке, и я размещу его в блоге!