fit auf der Seite ist oft notwendig, um die zentrierte Ausrichtung CSS-Weg zu machen: zum Beispiel, um das Hauptgerät zu zentrieren.Es gibt mehrere Lösungen für dieses Problem, von denen jede sich früher oder später zu jeder Coder verwenden.
Align Text zentriert
oft für dekorative Zwecke Sie die Textausrichtung des Zentrums, CSS in diesem Fall festgelegt werden soll, reduziert die Zeit der Einführung.Bisher wurde diese mit Hilfe von HTML-Attributen getan, jetzt Standard verlangt Ausrichten von Text über Stylesheets.
- text-align:: Im Gegensatz zu dem Block, für die Sie die Außenränder ändern möchten, mit CSS Textausrichtung in der Mitte ist mit einer einzigen Zeile gemacht Zentrum;
Diese Eigenschaft wird vererbt und von den Eltern auf alle Kinder weitergegeben.Es betrifft nicht nur den Text, sondern auch für andere Elemente.Um dies zu tun, müssen sie in Kleinbuchstaben sein (zum Beispiel Spanne) oder Line-Block (alle Blöcke, die die Eigenschaft Display setzt: Block).Die letztere Option erlaubt Ihnen auch, die Breite und Höhe von mehr flexible Konfiguration der Vertiefung zu ändern.
Oft sind die Seiten ausrichten Attribut in den Tag selbst.Damit ist sofort der Code ungültig W3C bestätigt Attribut align obsolet.Deren Verwendung nicht auf der Seite empfohlen.
Ausrichtungsblock in der Mitte
Wenn Sie die Ausrichtung der Mitte des div angeben möchten, können CSS bieten eine recht einfache Möglichkeit: Nutzung externer Einbuchtung Marge.Padding kann als Block-Elemente und Zeilenblock eingestellt werden.
- margin:: Svoysva Wert sollte auf 0 (eingerückt vertikal) und Auto (automatische horizontale Gedankenstriche) eingestellt werden 0 auto;
Jetzt diese Option als absolut gültig anerkannt.Verwendung externer Polsterung erlaubt Ihnen auch, um die Ausrichtung des Zentrums festlegen: CSS-margin Eigenschaft ermöglicht es uns, viele Probleme mit dem Positionierungselement auf der Seite verbunden sind, lösen.
Align Block auf der linken oder rechten Rand
Manchmal ist die zentrierte Ausrichtung CSS-Wege ist nicht erforderlich, aber es ist notwendig, um zwei Einheiten neben von der linken Seite und den anderen zu setzen - von rechts.Für diesem Haus gibt es einen Float, der einer der drei Werte annehmen kann: links, rechts, oder keine.Angenommen, Sie haben zwei Einheiten, die zusammengefügt werden müssen, haben.Dann wird der Code wird sein:
- .Left {float: left;}
- .right {float: right}
Wenn es eine dritte Einheit, die unter den ersten beiden Blöcke (beispielsweise die Fußzeile) platziert werden muss, er
- .Left: müssen Sie die Eigenschaft clear registrieren {float: left;}
- .right {float: right}
- footer {clear: both}
Tatsache, dass die Blöcke mit den Klassen nach links und rechts fallen aus der Gesamtfließen, das heißt, alle anderen Elemente die Existenz von Elementen ausgerichtet ignoriert.Die Eigenschaft clear: both ermöglicht die Fußzeile oder einer anderen Einheit von den Strömungselemente fallen gelassen sehen und verbietet Wrap (float) auf der linken und rechten Seite.Daher ist in unserem Beispiel wird die Fußzeile unten verschoben.
Vertikale Ausrichtung
Es gibt Fälle, in denen unzureichend eingestellten Mittenausrichtung CSS-Möglichkeiten können, müssen Sie noch die vertikale Position des Kindes Block ändern.Jede Zeile oder Line-Block-Element kann gegen den oberen oder unteren Rand gedrückt werden, in der Mitte des übergeordneten Elements befindet, oder sich in jedem Ort.Mehr erfordern häufig Ausrichtung der Box in der Mitte, wird dieses Attribut verwendet vertical-align.Angenommen, es gibt zwei Einheiten, ineinander.Die interne Einheit - line-Block-Element (display: inline-block).Es ist notwendig, um das Gerät vertikal Kindes richten:
- Ausrichtung an der oberen Grenze - .child {vertical-align: top};
- zentrierte Ausrichtung - .child {vertical-align: middle};
- Ausrichtung am unteren Ende - .child {vertical-align: bottom};
auf Block-Level-Elemente oder text-align oder vertical-align keine Anwendung.
Mögliche Probleme mit fluchtenden Einheiten
Manchmal div die Mitte des CSS-Wege ausrichten können kleinere Probleme verursachen.Zum Beispiel mit float: zum Beispiel, gibt es drei Blöcke: .First, .second und .third.Die zweiten und dritten Blöcke sind in der ersten.Ein Element mit einer Klasse der zweiten linksbündig, und der letzte Block - auf der rechten Seite.Nach dem Ausrichten der beiden fiel aus dem Stream.Wenn die Eltern nicht definierten Höhe (zB 30em), wird es nicht mehr die Höhe der Untereinheiten zu dehnen.Um diesen Fehler zu vermeiden, verwenden Sie die "Spacer" - eine spezielle Einheit, die .second und .third sieht.CSS-Code:
- .second {float: left}
- .third {float: right}
- .clearfix {height: 0;clear: both;}
oft pseudo: nach dem, was auch ermöglicht es Ihnen, auf die Blöcke in Ort, durch die Schaffung von psevdorasporki zurück (in diesem Beispiel in einem div mit einer Klasse der Behälter innerhalb des .First und enthält .Left und .right):
- .links {float: left}
- .right {float: right}
- .Behälter: nach {content: '';display: table;clear: both;}
oben genannten Optionen - die häufigste, obwohl es einige Variationen.Sie können immer die einfachste und bequemste Weg, um psevdorasporki durch Experimente zu schaffen.
Ein weiteres Problem häufig anzutreffende Layout - Ausrichtung der Linie-Block-Elemente.Nach jeder von ihnen automatisch hinzugefügt Raum.Um mit dieser Eigenschaft Hilfe-Marge, die von der negativen Vertiefung definiert ist zu bewältigen.Es gibt andere Methoden, die weniger häufig, zum Beispiel verwendet werden, das Zurücksetzen der Schriftgröße.In diesem Fall werden die Eigenschaften des übergeordneten vorgeschriebenen font-size: 0.Wenn innerhalb von Textblöcken befindet, haben die Eigenschaften der Linie-Block-Elemente auf die gewünschte Größe zurückgekehrt.Zum Beispiel font-size: 1em.Die Methode ist nicht immer bequem, Option mit Außenränder so viel mehr häufig verwendet.
Ausrichtungsblock können Sie schöne und funktionelle Seitenlayout zu erstellen und es ist die allgemeine Anordnung und Lage von Waren in Geschäften und Fotos auf einer kleinen Website.
