Ćwiczenia z programowania: wyśrodkowanie w CSS

Adam Argyle

W tym laboratorium kodu dowiesz się, jak udostępniać i prezentować ulubiony sposób wyśrodkowywania elementów w CSS.

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

Konfiguracja

  1. Kliknij Remiksuj, aby edytować, aby umożliwić edycję projektu.
  2. Otwórz aplikację app/index.html
  3. W miejscu line 23 zastąp /* your centering CSS here /* nazwą swojej usługi porównywania cen.
  4. (opcjonalnie) Nadaj nazwę technice wyśrodkowywania i zastąp tekst w <h1>

Style

  1. Utwórz nowy plik w folderze app/css/
  2. Utwórz selektor, który będzie zawierał rozwiązanie do wyśrodkowywania, np. .turbo-center lub [floaty-mcfloat]
  3. W nowym selektorze wpisz technikę wyśrodkowywania (możesz się wzorować na innych w app/css/).
  4. (opcjonalnie) napisz kilka „stylów pomocy”, abyśmy mogli zobaczyć, które dzieci potrzebują stylów, które pomogą im się skupić;
  5. Otwórz app/css/index.css i zaimportuj nowy plik u dołu.

Połącz to wszystko

  1. Otwórz ponownie app/index.html
  2. Znajdź <article> i wpisz w nim selektor niestandardowy utworzony w kroku 2 poprzedniej sekcji.
  3. Wyślij mi tweeta ze swoim Glitchem, a ja umieszczę go w poście na blogu.