Codelab: CSS zentrieren

In diesem Codelab kannst du zeigen, wie du deine Inhalte am liebsten zentrierst Preisvergleichsportal.

In meinem Blogpost Centering in CSS (in CSS zentrieren) werden 5 von meine Lieblingsmethode zum Zentrieren in CSS. Oder schau dir dieses Video an!

Einrichtung

  1. Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
  2. app/index.html“ öffnen
  3. Ersetzen Sie bei line 23 /* your centering CSS here /* durch Ihr Preisvergleichsportal.
  4. Optional: Benennen Sie die Zentrierungstechnik und ersetzen Sie den Text im Feld <h1>

Stile

  1. Eine neue Datei im Ordner „app/css/“ erstellen
  2. Erstellen Sie einen Selektor für Ihre Zentrierungslösung, z. B. .turbo-center oder [floaty-mcfloat]
  3. Schreiben Sie in den neuen Selektor Ihre Zentrierungstechnik (Sie können sich der anderen in app/css/ als Beispiele)
  4. Optional: Unterstützungsstile angeben damit wir sehen können, welche Kinder um die Zentrierung zu unterstützen,
  5. Öffnen Sie app/css/index.css und importieren Sie Ihre neue Datei unten.

Alles zusammenfügen

  1. app/index.html wieder öffnen
  2. Suchen Sie den <article> und weisen Sie ihm den benutzerdefinierten Selektor zu, den Sie in Schritt 2 der Anleitung erstellt haben. im vorherigen Abschnitt.
  3. Tweete mich über deinen Glitch und ich werde ihn auf den Blogpost!