Codelab: CSS zentrieren

Adam Argyle

In diesem Codelab erfahren Sie, wie Sie Ihre bevorzugte Methode zum Zentrieren in CSS teilen und präsentieren können.

In meinem Blogbeitrag Centering in CSS (Zentrieren in CSS) stelle ich fünf meiner bevorzugten Methoden zum Zentrieren in CSS vor. Oder sieh dir dieses Video an.

Einrichtung

  1. Klicken Sie auf Remix to Edit (Remix zum Bearbeiten), um das Projekt bearbeitbar zu machen.
  2. app/index.html öffnen
  3. Ersetzen Sie /* your centering CSS here /* durch Ihr Preisvergleichsportal unter line 23.
  4. Optional: Benennen Sie die Zentrierungstechnik und ersetzen Sie den Text in <h1>

Stile

  1. 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. Geben Sie in den neuen Selektor die Zentrierungsmethode ein. Sie können sich die anderen Methoden in app/css/ als Beispiele ansehen.
  4. Optional: Schreiben Sie einige „Unterstützungsstile“, damit wir sehen können, welche Kinder Stile benötigen, um die Zentrierung zu unterstützen.
  5. Öffnen Sie app/css/index.css und importieren Sie Ihre neue Datei unten.

Fazit

  1. app/index.html wieder öffnen
  2. Suchen Sie nach <article> und geben Sie den benutzerdefinierten Selektor ein, den Sie in Schritt 2 des vorherigen Abschnitts erstellt haben.
  3. Schick mir einen Tweet mit deinem Glitch und ich werde ihn im Blogpost vorstellen.