Codelab: CSS zentrieren
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
In diesem Codelab können Sie Ihre bevorzugte CSS-Zentralisierung vorstellen und präsentieren.
In meinem Blogpost CSS zentrieren erfahren Sie mehr über fünf meiner Lieblingsmethoden, mit denen ich CSS zentriere. Oder schau dir dieses Video an!
Einrichtung
- Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
app/index.html
öffnen
- Ersetzen Sie bei
line 23
/* your centering CSS here /*
durch Ihr Preisvergleichsportal
- (Optional) Benennen Sie die Zentrierungsmethode und ersetzen Sie den Text in den
<h1>
.
Stile
- Neue Datei im Ordner
app/css/
erstellen
- Erstellen Sie einen Selektor für die Zentrierungslösung, z. B.
.turbo-center
oder [floaty-mcfloat]
- Schreiben Sie in diesem neuen Selektor die Zentrierungsmethode (Sie können sich die anderen Methoden in
app/css/
als Beispiele ansehen).
- (optional) Schreiben Sie einige „Unterstützungsstile“,
damit wir sehen können, welche Kinder Stile benötigen,
- Öffne
app/css/index.css
und importiere die neue Datei unten
Verknüpfen
app/index.html
wieder öffnen
- Suchen Sie die
<article>
und weisen Sie ihr den benutzerdefinierten Selektor zu, den Sie in Schritt 2 des vorherigen Abschnitts erstellt haben.
- Twittere deinen Glitch und werde ihn in dem Blogpost vorstellen.
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2020-12-16 (UTC).
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Benötigte Informationen nicht gefunden"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Zu umständlich/zu viele Schritte"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Nicht mehr aktuell"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problem mit der Übersetzung"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problem mit Beispielen/Code"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Sonstiges"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Leicht verständlich"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Mein Problem wurde gelöst"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Sonstiges"
}]