Kochbuchvorlage

Hinweis: Dies ist eine Vorlagenseite für eine CSS-Kochbuchseite. Bitte verwenden Sie dies als Rohvorlage, wenn Sie eine neue Kochbuchseite erstellen. Kommentare in Kursivschrift sind Informationen darüber, wie Sie Teile der Vorlage verwenden.

Beschreibung des Problems, das dieses Rezept löst, oder des Musters, das Sie demonstrieren.

Anforderungen

Was muss dieses Muster beinhalten oder welche Probleme muss es lösen? Listen Sie das hier auf.

Rezept

Ändern Sie den Beispielcode. Der letzte Parameter ist die Höhe des Live-Beispiels, die Sie nach Bedarf ändern können. Erwähnen Sie, dass Sie im MDN Playground auf "Play" klicken können, um das Beispiel in den Code-Blöcken zu bearbeiten.

html
<div class="container">
  <div class="item">I am centered!</div>
</div>
css
.container {
  border: 2px solid rgb(75 70 74);
  border-radius: 0.5em;

  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  border: 2px solid rgb(95 97 110);
  border-radius: 0.5em;
  padding: 20px;

  width: 10em;
}

Getroffene Entscheidungen

Erklären Sie Ihre Entscheidungen bei der Erstellung des Musters. Warum haben Sie eine bestimmte Methode gewählt? Wenn Sie hier ein zusätzliches Beispiel hinzufügen möchten — zum Beispiel eine Version mit Fallbacks, tun Sie dies bitte. Dieser Abschnitt ist absichtlich locker gehalten, da Muster von sehr einfach bis komplexer reichen.

Nützliche Fallbacks oder alternative Methoden

Wenn es nützliche alternative Methoden für die Erstellung des Rezepts gibt oder Fallback-Rezepte, die Sie verwenden können, wenn Sie nicht unterstützende Browser berücksichtigen müssen, schließen Sie sie hier in separaten Abschnitten ein.

Barrierefreiheitshinweise

Fügen Sie dies ein, wenn es spezielle Dinge gibt, die in Bezug auf Barrierefreiheit beachtet werden müssen. Wenn es für Ihr Muster nicht relevant ist, kann dieser Punkt weggelassen werden.

Siehe auch

  • Links zu verwandten Eigenschaften: example-property
  • Links zu Artikeln, die zeigen, wie man die Eigenschaft im Kontext verwendet: "Verwendung von … Artikel"
  • Sehr gute externe Links. Scheuen Sie sich nicht vor externen Links, aber sie sollten herausragend sein und nicht nur kleine Details erwähnen.