CSS-Ausrichtung (Ausrichtung)

CSS hat mehrere Eigenschaften, die zur Ausrichtung von Webselementen verwendet werden können.

Textausrichtung

durch die richtige EinstellungTextausrichtung，um auszurichtenBlockText innerhalb eines Elements.

h1　{
　　　　text-align:　center;
}
p　{
　　　　text-align:　left;
}

SieheCSS TextAnleitung, um mehr über Textformate zu erfahren.

Verwenden Sie die margin-Eigenschaft zur Zentrierung

BlockDie Zentrierung des Elements ist einer der wichtigsten Bedeutungen der CSS-margin-Eigenschaft. Zum Beispiel, indem man die linken und rechten Margen auf auto setzt, kann der <div>-Container horizontal zentriert werden.

div　{
　　　　width:　50%;
　　　　margin:　0　auto;
}

Die im obigen Beispiel angegebenen Styleregeln zentrieren das Element horizontal.

Verwenden Sie die position-Eigenschaft, um Elemente auszurichten

CSS positionDurch die Kombination mit left, right, top und bottom kann ein Element relativ zum Dokumentsohn oder zum übergeordneten Elternelement ausgerichtet werden.

.up　{
　　　　position:　absolute;
　　　　top:　0;
}
.down　{
　　　　position:　absolute;
　　　　bottom:　0;
}

Für mehr Informationen über positionierte Elemente, sieheCSS-PositionierungAnleitung.

Verwenden Sie die float-Eigenschaft zur Ausrichtung nach links oder rechts

CSSfloatDie Eigenschaft kann verwendet werden, um Elemente in einem Block auszurichten, der auf die linke oder rechte Seite ausgerichtet ist, so dass andere Inhalte entlang seiner Seite fließen können.

Wenn ein Element nach links floatet, fließt der Inhalt entlang seiner rechten Seite. Gegensätzlich dazu, wenn ein Element nach rechts floatet, fließt der Inhalt entlang seiner linken Seite.

div　{
　　　　width:　200px;
　　　　float:　links;
}

Flotung entfernen

Eines der verwirrendsten Dinge bei der Verwendung von Layouts basierend auf dem Float ist der gefaltete Elternteil. Der Elternelement erweitert sich nicht automatisch, um den Floating-Elementen Platz zu bieten. Allerdings ist dies nicht immer sofort erkennbar, wenn der Elternteil keine visuell wahrnehmbare Hintergrund oder Rahmen enthält. Es ist jedoch wichtig, darauf zu achten und entsprechend zu handeln, um seltsame Layouts und Browserprobleme zu vermeiden. Bitte siehe Abbildung unten:

Sie werden sehen

Elemente dehnen sich nicht automatisch aus, um flottierende Bilder zu enthalten. Dieses Problem kann gelöst werden, indem der Float nach dem flottierenden Element im Container und vor dem Schließungszeichen des Container-Elements aufgeräumt wird.

Kollabierte übergeordnete Elemente reparieren

Es gibt mehrere Methoden, um das Problem der CSS-Kollapsung des übergeordneten Elements zu lösen. Im nächsten Abschnitt werden wir Ihnen diese Lösungen und Echtzeit-Beispiele vorstellen.

Lösung1：Floating des Containers

Die einfachste Methode, dieses Problem zu lösen, ist das Floating des übergeordneten Elements des Containers.

.container　{
　　　　float:　links;
　　　　hintergrund:　#f2f2f2;
}

Lösung2：Verwenden Sie einen leeren Div

Dies ist eine alte Methode, aber eine einfache Lösung, die in allen Browsern verwendet werden kann.

.clearfix　{
　　　　clear:　beide;
}
/*　html　code　snippet　*/

Sie können dies auch durch das Tag durchführen. Es wird jedoch nicht empfohlen, diese Methode zu verwenden, da sie nichtsemantische Code in das Markup hinzufügt.

Lösung3：Verwenden Sie den Pseudo-Element:after

dieser:after Pseudo-Elementemit VerbundeninhaltEigenschaften sind bereits recht breit eingesetzt, um das Problem der Flottierung zu lösen.

.clearfix:after　{
　　　　inhalt:　".";
　　　　display:　block;
　　　　höhe:　0;
　　　　clear:　beide;
　　　　visibility:　unsichtbar;
}

Diese Klasse.clearfix ist für jeden Container mit float-Abkömmlingen geeignet.