Ćwiczenia z programowania: wyśrodkowanie w CSS

Adam Argyle

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak udostępniać i prezentować swój ulubiony sposób centrowania danych w CSS.

Przeczytaj posta na blogu Centering in CSS, aby poznać 5 moich ulubionych sposobów wyśrodkowania w CSS. Albo obejrzyj ten film!

Konfiguracja

1. Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
2. Otwórz aplikację app/index.html
3. Na stronie line 23 zastąp /* your centering CSS here /* swoją usługą porównywania cen
4. (opcjonalnie) Nazwij technikę środkowania i zastąp tekst w polu <h1>

Style

1. Utwórz nowy plik w folderze app/css/
2. Utwórz selektor rozwiązania środkowego, np. .turbo-center lub [floaty-mcfloat]
3. W nowym selektorze wpisz technikę środkowania (możesz porównać metodę środkową z drugim w app/css/ jako przykłady).
4. (opcjonalnie) napisz „Style pomocy”, abyśmy mogli zobaczyć, które dzieci potrzebują stylu
5. Otwórz aplikację app/css/index.css i zaimportuj nowy plik u dołu

Łącz wszystko

1. Otwórz ponownie aplikację app/index.html
2. Znajdź atrybut <article> i wybierz dla niego selektor niestandardowy utworzony w kroku nr 2 poprzedniej sekcji.
3. Zamieść mi tweeta na temat swojego problemu. Zaprezentuję go w poście na blogu.