Wenn Seitenlayout oft notwendig istzentrieren Sie die Ausrichtung auf CSS-Weise: Zentrieren Sie beispielsweise den Hauptblock. Es gibt mehrere Lösungen für dieses Problem, von denen jede früher oder später von jedem Layout-Designer verwendet werden muss.
Textausrichtung zentrieren
Oft müssen Sie zu Dekorationszwecken einstellenTextausrichtung in der Mitte, CSS ermöglicht in diesem Fall eine Verkürzung der Layoutzeit. Früher wurde dies mit HTML-Attributen gemacht, jetzt muss der Text jedoch mithilfe von Stylesheets ausgerichtet werden. Im Gegensatz zu den Blöcken, für die Sie die Einrückung ändern möchten, erfolgt die Textausrichtung in CSS in einer einzelnen Zeile:
- Text ausrichten: Mitte;
Diese Eigenschaft wird vom übergeordneten Element geerbt und übergeben.an alle Nachkommen. Es betrifft nicht nur Text, sondern auch andere Elemente. Dazu müssen sie Inline (z. B. span) oder Inline-Block (alle Blöcke, die die Eigenschaft display: block haben) sein. Mit der letzteren Option können Sie auch die Breite und Höhe des Elements ändern und die Einzüge flexibler anpassen.
Ausrichten wird oft dem Tag selbst zugeordnet. Dies macht den Code sofort ungültig, da das W3C das Ausrichtungsattribut als veraltet erkannt hat. Die Verwendung auf der Seite wird nicht empfohlen.
Ausrichtung zentrieren
Wenn Sie die Ausrichtung des div auf die Mitte setzen möchten, CSSkann eine recht bequeme Möglichkeit bieten: Verwenden von Randeinzügen. Einzüge können als Blockelemente und Zeilenblöcke festgelegt werden. Der Eigenschaftswert sollte die Werte 0 (vertikale Einrückungen) und auto (automatische horizontale Einrückungen) annehmen:
- Marge: 0 auto;
Nun wird diese Option absolut erkanntgültig. Durch die Verwendung von externen Einzügen können Sie auch die Ausrichtung des Bildes in der Mitte festlegen: Mit der Eigenschaft CSS margin können Sie viele Probleme lösen, die mit der Positionierung eines Elements auf der Seite zusammenhängen.
Block nach links oder rechts ausrichten
Manchmal zentriert auf eine CSS-Art nichterforderlich, aber Sie müssen zwei Blöcke nebeneinander legen: einen von der linken Kante, den anderen von rechts. Dafür gibt es eine Eigenschaft, die drei Werte annehmen kann: left, right oder none. Angenommen, Sie haben zwei Blöcke, die zusammengefügt werden müssen. Dann wird der Code so sein:
- .left {float: left;}
- .right {float: right}
Wenn es auch einen dritten Block gibt, der sich unter den ersten beiden Blöcken befinden sollte (beispielsweise eine Fußzeile), muss die clear -Eigenschaft gesetzt werden:
- .left {float: left;}
- .right {float: right}
- Fußzeile {clear: both}
Tatsache ist, dass die Klassen links und rechts blockiert werdenaus dem allgemeinen Fluss fallen, dh alle anderen Elemente ignorieren das Vorhandensein ausgeglichener Elemente. Die klare: Beide Eigenschaften ermöglichen es der Fußzeile oder jedem anderen Block, Elemente zu sehen, die aus dem Stream herausgefallen sind, und verhindert, dass sowohl links als auch rechts ein Umbruch (Float) erfolgt. In unserem Beispiel wird die Fußzeile daher nach unten verschoben.
Vertikale Ausrichtung
Es gibt Fälle, in denen es nicht ausreicht zu fragenAusrichtung in der Mitte der CSS-Methoden müssen Sie noch die vertikale Position des untergeordneten Blocks ändern. Jedes Linien- oder Linienblockelement kann an den oberen oder unteren Rand gedrückt werden, sich in der Mitte des übergeordneten Elements befinden oder sich an einer beliebigen Stelle befinden. Meistens ist eine Blockausrichtung in der Mitte erforderlich, dazu wird das Attribut vertikal ausrichten verwendet. Angenommen, es gibt zwei Blöcke, einen in den anderen geschachtelt. Gleichzeitig ist der interne Block ein Zeilenblockelement (Anzeige: Inline-Block). Es ist notwendig, den untergeordneten Block vertikal auszurichten:
- Ausrichtung nach oben - .child {vertical-align: top};
- zentrierte Ausrichtung - .child {vertikal-align: middle};
- untere Ausrichtung - .child {vertikal-align: bottom};
Weder Textausrichtung noch Vertikalausrichtung wirken auf Blockelemente.
Mögliche Probleme mit ausgerichteten Blöcken
Manchmal richtet man ein div auf CSS in der Mitte auskann kleinere Probleme verursachen. Zum Beispiel bei der Verwendung von Float: Angenommen, es gibt drei Blöcke:. Erste,. Zweite und. Dritte. Der zweite und der dritte Block liegen im ersten. Ein Element mit einer zweiten Klasse ist links ausgerichtet und der letzte Block ist rechts ausgerichtet. Nach der Ausrichtung fielen beide aus dem Strom. Wenn das übergeordnete Element keine Höhe hat (z. B. 30em), wird es nicht mehr entlang der Höhe der untergeordneten Blöcke gedehnt. Um diesen Fehler zu vermeiden, verwenden Sie die "strut" - einen speziellen Block, der "second" und "second" sieht. CSS-Code:
- .sekunden {float: left}
- .drei {float: right}
- .clearfix {height: 0; klar: beide;}
Häufig verwendete Pseudoklasse:after, was es Ihnen auch ermöglicht, Blöcke durch Anlegen einer Pseudo-Razorka wieder in Position zu bringen (im Beispiel in einem div mit dem Klassencontainer, der in .first liegt und .lft und .right enthält):
- .left {float: left}
- .right {float: right}
- .container: nach {content: ""; Anzeige: Tabelle; klar: beide;}
Die oben genannten Optionen sind die häufigsten, obwohl es verschiedene Variationen gibt. Sie können immer den einfachsten und bequemsten Weg finden, um eine Pseudo-Verteilung experimentell zu erstellen.
Ein anderes Problem trat häufig aufSetzer, - Ausrichtung von Inline-Block-Elementen. Nach jedem von ihnen wird automatisch ein Leerzeichen hinzugefügt. Die Margin-Eigenschaft hilft dabei, dies zu bewältigen. Es gibt andere Methoden, die viel seltener verwendet werden, beispielsweise das Zurücksetzen der Schriftgröße. In diesem Fall wird font-size: 0 in die Eigenschaften des übergeordneten Elements geschrieben. Wenn innerhalb der Blöcke Text vorhanden ist, wird die gewünschte Schriftgröße bereits in den Eigenschaften von Inline-Block-Elementen zurückgegeben. Zum Beispiel, Schriftgröße: 1em. Die Methode ist nicht immer bequem, daher wird die Option mit externen Einrückungen häufiger verwendet.
Durch die Ausrichtung der Blöcke können Sie schöne und funktionale Seiten erstellen. Dies ist das Layout des allgemeinen Layouts und der Position von Waren in Online-Shops sowie Fotos auf der Website.
