Ćwiczenia z programowania: wyśrodkowanie w CSS

Adam Argyle

W tym Codelab możesz udostępnić i przedstawić swój ulubiony sposób wyśrodkowywania w CSS.

Przeczytaj mój post na blogu Centering in CSS, aby poznać 5 ulubionych sposobów na wyśrodkowanie w CSS. Możesz też obejrzeć ten film.

Konfiguracja

  1. Kliknij Remixuj do edycji, aby umożliwić edytowanie projektu.
  2. Otwórz: app/index.html
  3. W miejscu line 23 zastąp /* your centering CSS here /* swoim kodem CSS.
  4. (opcjonalnie) nadaj nazwę technice wyśrodkowania i zastąp tekst w polu <h1>

Style

  1. Utwórz nowy plik w folderze app/css/
  2. Utwórz selektor, który będzie zawierał rozwiązanie do wyśrodkowania, np. .turbo-center lub [floaty-mcfloat]
  3. W nowym selektorze wpisz technikę wyśrodkowania (jako przykład możesz spojrzeć na inne selektory w app/css/).
  4. (opcjonalnie) wpisz „style do obsługi”, abyśmy mogli zobaczyć, które style potrzebują obsługi wyśrodkowania
  5. Otwórz app/css/index.css i na dole zaimportuj nowy plik.

Podsumowanie

  1. Otwórz ponownie app/index.html
  2. Znajdź element <article> i nadaj mu niestandardowy selektor utworzony w kroku 2 poprzedniej sekcji.
  3. Wyślij mi tweeta ze swoim Glitchem, a opublikuję go w postach na blogu.