Ausrichtung von Blockelementen in CSS
Die Eigenschaft margin wird nicht nur
verwendet, um Abstände festzulegen, sondern auch
um Blockelemente zu zentrieren.
Dazu sollten der rechte und linke
Abstand auf den Wert auto gesetzt werden.
Im folgenden Beispiel wird der innere Block zentriert:
<div class="parent">
<div class="child"></div>
</div>
.parent {
border: 1px solid red;
}
.child {
height: 100px;
width: 200px;
border: 1px solid green;
margin: 10px auto;
}
:
Beachten Sie, dass auf diese Weise nur Blockelemente zentriert werden können, nur horizontal und nur, wenn eine Breite festgelegt ist.
Wenn wir unterschiedliche obere und untere Abstände
für margin benötigen, kann man es so schreiben:
.child {
margin: 30px auto 10px auto;
}
Es kann auch mit drei Werten umgeschrieben werden: Der erste
setzt den oberen Abstand, der dritte den unteren, und der
zweite setzt den Wert auto für den rechten
und linken Abstand:
.child {
margin: 30px auto 10px;
}
Wiederholen Sie die Seite gemäß der Vorlage und sorgen Sie dafür, dass die grünen Blöcke in der Mitte ihres übergeordneten Elements positioniert sind:
