In CSS können mehrere Eigenschaften verwendet werden, um Elemente horizontal auszurichten.
Mitte ausrichten - Mit margin
Einstellen der Breite eines Block-Level-Element wird verhindern, dass es sich bis zum Rand des Containers. Verwenden Sie margin: auto; , horizontal in dessen Container ein Element zentrieren.
Das Element aufnehmen wird dann die angegebene Breite, und der verbleibende Raum wird zu gleichen Teilen zwischen den beiden Rändern aufgeteilt werden:
Beispiel
.center
{
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
} Versuch es selber " Tipp: Zentrum Ausrichtung hat keine Auswirkung , wenn die width Eigenschaft nicht festgelegt (auf 100% oder festgelegt).
Tipp: Ausrichten von Text finden Sie in der CSS - Text Kapitel.
Links und Rechts ausrichten - Mit position
Ein Verfahren zum Ausrichten von Elementen zu verwenden position: absolute; :
Beispiel
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Versuch es selber " Anmerkung: Absolute positionierte Elemente aus der Normalstrom entfernt werden, und die Elemente überlappen.
Tipp: Wenn Sie Elemente mit Ausrichtung position , immer definieren margin und padding für den <body> Element. Dies ist visuelle Unterschiede in verschiedenen Browsern zu vermeiden.
Es gibt auch ein Problem mit IE8 und früher bei der Verwendung von position . Wenn ein Container - Element (in unserem Fall <div class="container"> ) , um eine bestimmte Breite hat, und die !DOCTYPE Erklärung fehlt, IE8 und frühere Versionen werden eine hinzufügen 17px margin auf der rechten Seite. Dies scheint Platz für eine Scrollbar reserviert zu sein. Also, stellen Sie immer die !DOCTYPE Erklärung bei der Verwendung von position :
Beispiel
body
{
margin: 0;
padding: 0;
}
.container
{
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
} Versuch es selber " Links und Rechts ausrichten - Mit float
Ein anderes Verfahren zum Ausrichten Elemente ist , die zu verwenden float Eigenschaft:
Beispiel
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Versuch es selber " Tipp: Wenn Sie Elemente mit Ausrichtung float , immer definieren margin und padding für den <body> Element. Dies ist visuelle Unterschiede in verschiedenen Browsern zu vermeiden.
Es gibt auch ein Problem mit IE8 und früher bei der Verwendung von float . Wenn die !DOCTYPE Erklärung fehlt, IE8 und frühere Versionen werden eine hinzufügen 17px margin auf der rechten Seite. Dies scheint Platz für eine Scrollbar reserviert zu sein. Also, stellen Sie immer die !DOCTYPE Erklärung bei der Verwendung von float :
Beispiel
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
} Versuch es selber "