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

Adam Argyle

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