Mit Breite, max-width und margin: auto;
Wie im vorigen Kapitel erwähnt; ein Block-Level-Element nimmt immer die volle Breite bis max (erstreckt sich nach links und rechts soweit das möglich ist).
Einstellen der width eines Block-Level - Element wird verhindern , dass es sich bis zum Rand des Containers. Dann können Sie die Ränder auf auto gesetzt, um horizontal das Element in dessen Container zentriert. Das Element wird die angegebene Breite und der verbleibende Platz in Anspruch nehmen wird zu gleichen Teilen zwischen den beiden Rändern aufgeteilt werden:
Hinweis: Das Problem mit der <div> oben tritt auf, wenn das Browser - Fenster kleiner als die Breite des Elements ist. Der Browser fügt dann eine horizontale Scrollbar auf die Seite.
Mit max-width statt, in dieser Situation wird der Browser des Umgang mit kleinen Fenstern zu verbessern. Dies ist wichtig, wenn eine Website nutzbar auf kleinen Geräten zu machen:
Tipp: Ändern Sie die Größe des Browser - Fensters auf weniger als 500 Pixel breit, den Unterschied zwischen den beiden divs zu sehen!
Hier ist ein Beispiel für die beiden divs oben:
Beispiel
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
} Versuch es selber "