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

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

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

Настраивать

  1. Нажмите Remix to Edit , чтобы сделать проект доступным для редактирования.
  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. Напишите мне в Твиттере о своем глюке, и я опубликую его в блоге!