Codelab: CSS zentrieren

Adam Argyle

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

In meinem Blogpost Centering in CSS erfahren Sie mehr über fünf meiner Lieblingsmethoden zum Zentrieren in CSS. Oder sieh dir dieses Video an.

Einrichtung

  1. Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.
  2. app/index.html öffnen
  3. Ersetzen Sie an line 23 /* your centering CSS here /* durch Ihr Preisvergleichsportal.
  4. Optional: Geben Sie einen Namen für die Zentrierungstechnik ein und ersetzen Sie den Text in <h1>

Stile

  1. Erstellen Sie im Ordner app/css/ eine neue Datei.
  2. Erstellen Sie einen Selector für die Zentrierungslösung, z. B. .turbo-center oder [floaty-mcfloat].
  3. Geben Sie in dieser neuen Auswahl Ihre Zentriertechnik ein. Sie können sich die anderen in app/css/ als Beispiele ansehen.
  4. Optional: Geben Sie einige „Unterstützungsstile“ an, damit wir sehen können, welche Kinder Stile zur Unterstützung der Zentrierung benötigen.
  5. Öffnen Sie app/css/index.css und importieren Sie die neue Datei unten.

Zusammenfassung

  1. app/index.html wieder öffnen
  2. Suchen Sie die <article> und weisen Sie ihr die benutzerdefinierte Auswahl zu, die Sie in Schritt 2 des vorherigen Abschnitts erstellt haben.
  3. Tweete mir deinen Glitch und ich werde ihn im Blogpost veröffentlichen.