Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Cookbook-Vorlage

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

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 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 den Aufbau des Rezepts gibt oder Fallback-Rezepte, die verwendet werden können, wenn Sie nicht unterstützende Browser unterstützen müssen, fügen Sie sie in separaten Abschnitten hier ein.

Barrierefreiheitsbedenken

Einschließen, wenn es spezifische Dinge gibt, auf die in Bezug auf Barrierefreiheit geachtet werden muss. Wenn dies für Ihr Muster nicht relevant ist, kann dieser Abschnitt weggelassen werden.

Siehe auch

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