. Selbst mit dem Aufkommen von HTML5 und dem Aufkommen ernsthafter Konkurrenten in Form von Artikeln oder Headern wird es weiterhin überall in Markups eingefügt. Daher empfehle ich Ihnen, das Problem der Formatierung und Zentrierung von Div-Blöcken zu verstehen.

Was ist DIV?

Der Name des Elements stammt von Englisches Wort Division, was Division bedeutet. Beim Schreiben von Markups wird es verwendet, um Elemente in Blöcke aufzuteilen. DIVs umfassen Inhaltsgruppen auf einer Webseite. Zum Beispiel Bilder, Absätze mit Text. Das Tag hat keinerlei Einfluss auf die Anzeige von Inhalten und trägt keine semantische Last.

DIV unterstützt alle globalen Attribute. Für Webdesign benötigen Sie jedoch nur zwei – Klasse und ID. An alle anderen werden Sie sich nur in exotischen Fällen erinnern, und das ist keine Tatsache. Das Attribut align, das zuvor zum Zentrieren oder Linksausrichten von Divs verwendet wurde, ist veraltet.

Wann werden DIVs verwendet?

Stellen Sie sich vor, dass der Standort ein Kühlschrank ist und die DIVs Plastikbehälter sind, in die Sie den Inhalt sortieren müssen. Obst würde man nicht mit Leberwurst in einen Behälter geben. Sie platzieren jeden Produkttyp separat. Webinhalte werden auf ähnliche Weise generiert.

Öffnen Sie eine beliebige Website und unterteilen Sie sie in sinnvolle Blöcke. Kopfzeile oben, Fußzeile unten, Haupttext in der Mitte. An der Seite befindet sich meist eine kleinere Spalte mit Werbeinhalten oder einer Tag-Cloud.

Schauen Sie sich nun jeden Abschnitt genauer an. Beginnen Sie mit der Kopfzeile. Der Site-Header verfügt über ein separates Logo, eine Navigation, eine Überschrift der ersten Ebene und manchmal einen Slogan. Weisen Sie jedem semantischen Block einen eigenen Container zu. Dadurch werden die Elemente im Fluss nicht nur getrennt, sondern auch einfacher formatiert. Sie werden feststellen, dass es viel einfacher ist, ein Objekt in einem DIV-Tag zu zentrieren, indem Sie ihm eine Klasse oder ID zuweisen.

Zentrieren von DIVs mithilfe von Rändern

Beim Rendern von Webelementen berücksichtigt der Browser drei Eigenschaften: Polsterung, Rand und Rand. Padding ist der Abstand zwischen Inhalt und seinem Rand. Rand – Felder, die ein Objekt von einem anderen trennen. Grenze sind die Linien entlang der Blöcke. Sie können allen auf einmal oder nur einer Seite zugeordnet werden:

div( border: 1px solid #333; border-left: none; )

Diese Eigenschaften erhöhen den Abstand zwischen Objekten und helfen Ihnen, sie richtig auszurichten und zu platzieren. Wenn beispielsweise ein Block mit einem Bild vom linken Rand zur Mitte um 20 % versetzt werden muss, weisen Sie dem Element einen Rand-Links-Wert von 20 % zu:

Block-with-img( margin-left: 20%; )

Elemente können auch mithilfe ihrer Breitenwerte und negativer Auffüllung formatiert werden. Beispielsweise gibt es einen Block mit den Abmessungen 200 x 200 Pixel. Weisen wir ihm zunächst eine absolute Position zu und verschieben es um 50 % in die Mitte.

Div( Position: absolut; links: 50 %; )

Um nun sicherzustellen, dass das zentrierte DIV perfekt positioniert ist, geben wir ihm einen negativen Rand nach links, der 50 % seiner Breite entspricht, also -100 Pixel:

Rand links: -100px;

In CSS wird dies „Luftentfernung“ genannt. Der wesentliche Nachteil besteht jedoch darin, dass ständige Berechnungen durchgeführt werden müssen, was bei Elementen mit mehreren Verschachtelungsebenen recht schwierig ist. Wenn die Werte für Polsterung und Rahmenbreite angegeben sind, berechnet der Browser standardmäßig die Abmessungen des Containers als Summe der Dicke der Ränder, der Polsterung rechts und links und des Inhalts selbst im Inneren, was möglich ist kommen auch überraschend.

Wenn Sie also ein DIV zentrieren müssen, verwenden Sie die Eigenschaft box-sizing mit dem Wert border-box. Dadurch wird verhindert, dass der Browser Füll- und Randwerte zur Gesamtbreite des DIV-Elements hinzufügt. Um ein Element anzuheben oder abzusenken, verwenden Sie auch negative Werte. In diesem Fall können sie jedoch entweder dem oberen oder dem unteren Feld des Containers zugewiesen werden.

So zentrieren Sie einen DIV-Block mithilfe automatischer Ränder

Dies ist eine einfache Möglichkeit, große Blöcke zu zentrieren. Sie weisen einfach die Breite des Containers und die Margin-Eigenschaft auf „Auto“ zu. Der Browser platziert einen Block in der Mitte mit gleichen Rändern links und rechts und erledigt die ganze Arbeit selbst. Dadurch riskieren Sie keine Verwirrung bei mathematischen Berechnungen und sparen erheblich Zeit.

Verwenden Sie bei der Entwicklung responsiver Apps die Auto-Field-Methode. Die Hauptsache ist, dem Container einen Breitenwert in Em oder Prozent zuzuweisen. Der obige Beispielcode zentriert den DIV auf jedem Gerät, einschließlich Mobiltelefone, wird es 90 % des Bildschirms einnehmen.

Ausrichtung über Display-Eigenschaft: inline-block

Standardmäßig gelten DIV-Elemente als Blockelemente und ihr Anzeigewert ist Block. Für diese Methode müssen Sie diese Eigenschaft überschreiben. Nur für DIVs mit übergeordnetem Container geeignet:

Einem Element mit der Klasse „outer-div“ wird eine text-align-Eigenschaft mit dem Wert „center“ zugewiesen, die den Text darin zentriert. Aber im Moment sieht der Browser das verschachtelte DIV als Blockobjekt. Damit die text-align-Eigenschaft funktioniert, muss das innere Div als Kleinbuchstabe behandelt werden. Daher in CSS-Tabelle Für den Inner-Div-Selektor schreiben Sie den folgenden Code:

Inner-div( display: inline-block; )

Sie ändern die Anzeigeeigenschaft von Block in Inline-Block.

Transformations-/Übersetzungsmethode

Mit kaskadierenden Stylesheets ist es möglich, Webelemente nach Belieben zu verschieben, zu neigen, zu drehen und auf andere Weise zu transformieren. Hierzu wird die Eigenschaft transform verwendet. Die Werte geben den gewünschten Transformationstyp und -grad an. IN in diesem Beispiel Wir arbeiten mit Translate:

transform: Translate(50%, 50%);

Die Übersetzungsfunktion verschiebt ein Element von seiner aktuellen Position nach links/rechts und nach oben/unten. In Klammern werden zwei Werte übergeben:

• Grad der horizontalen Bewegung;
• Grad der vertikalen Bewegung.

Wenn ein Element nur entlang einer der Koordinatenachsen verschoben werden muss, geben Sie nach dem Wort translator den Namen der Achse und in Klammern den Betrag der erforderlichen Verschiebung an:

Transformieren: TranslateY(-20%);

In einigen Handbüchern finden Sie Transformationen mit Herstellerpräfixen:

Webkit-Transformation: Translate(50%, 50%); -ms-transform: Translate(50%, 50%); transform: Translate(50%, 50%);

Im Jahr 2018 ist dies nicht mehr erforderlich; die Eigenschaft wird von allen Browsern unterstützt, einschließlich Edge und IE.

Um das gewünschte DIV zu zentrieren, wird die CSS-Übersetzungsfunktion mit einem Wert von 50 % für die vertikale und horizontale Achse geschrieben. Dies führt dazu, dass der Browser das Element von seiner aktuellen Position um die Hälfte seiner Breite und Höhe versetzt. Die Eigenschaften width und height müssen angegeben werden:

Beachten Sie, dass sich das Element, auf das die Transformationseigenschaft angewendet wird, unabhängig von den es umgebenden Objekten bewegt. Das ist einerseits praktisch, aber beim Verschieben kann es manchmal vorkommen, dass der DIV einen anderen Container überlappt. Daher gilt diese Methode zur Zentrierung von Bahnkomponenten als nicht standardisiert und wird nur in Fällen äußerster Notwendigkeit verwendet. Für die Animation werden Transformationen nach allen CSS-Kanons verwendet.

Arbeiten mit dem Flexbox-Layout

Flexbox gilt als ausgefeilte Möglichkeit zur Gestaltung von Weblayouts. Aber wenn Sie es beherrschen, werden Sie feststellen, dass es viel einfacher und angenehmer ist als Standardformatierungsmethoden. Die Flexbox-Spezifikation ist eine flexible und unglaublich leistungsstarke Möglichkeit, mit Elementen umzugehen. Der Name des Moduls wird aus dem Englischen als „flexibler Container“ übersetzt. Die Werte für Breite, Höhe und Anordnung der Elemente werden automatisch angepasst, ohne dass Einzüge und Ränder berechnet werden.

In den vorherigen Beispielen haben wir bereits mit der Anzeigeeigenschaft gearbeitet, sie jedoch auf Block- und Inline-Block-Werte festgelegt. Um Flex-Layouts zu erstellen, verwenden wir display:flex. Zuerst brauchen wir einen Flex-Container:

Um es in kaskadierenden Tabellen in einen Flex-Container umzuwandeln, schreiben wir:

Flex-Container (Anzeige: Flex;)

Alle verschachtelten Objekte, aber nur direkte Nachkommen, sind Flex-Elemente:

Wenn Sie eine Liste in einem Flex-Container platzieren, gelten die li-Listenelemente nicht als Flex-Elemente. Das Flexbox-Layout funktioniert nur auf ul:

Regeln für die Platzierung von Flexelementen

Um Flex-Elemente zu verwalten, benötigen Sie justify-content und align-items. Abhängig von den von Ihnen angegebenen Werten platzieren diese beiden Eigenschaften Objekte automatisch nach Bedarf. Wenn wir alle verschachtelten DIVs zentrieren müssen, schreiben wir justify-content: center, align-items: center und sonst nichts. Den Rest erledigt der Browser selbst:

Zum Ausrichten von Text Mitte DIV, bei denen es sich um flexible Elemente handelt, können verwendet werden Standardempfang Textausrichtung. Oder Sie können jedes verschachtelte DIV auch zu einem Flex-Container machen und den Inhalt mit justify-content verwalten. Diese Methode ist viel rationaler, wenn sie eine Vielzahl von Inhalten enthält, darunter Grafiken, andere verschachtelte Objekte, einschließlich mehrstufiger Listen.

Guten Tag, Abonnenten und Leser dieser Publikation. Heute möchte ich ins Detail gehen und Ihnen erklären, wie Sie Text in CSS zentrieren. In einigen früheren Artikeln habe ich es indirekt angesprochen dieses Thema Sie verfügen also über einige Kenntnisse in diesem Bereich.

In dieser Veröffentlichung werde ich Ihnen jedoch die verschiedenen Möglichkeiten zum Ausrichten von Objekten erläutern und Ihnen auch erklären, wie Sie in Absätzen Einzüge und rote Linien erzielen. Beginnen wir also mit dem Erlernen des Materials!

HTML und seine Nachkommen und ausrichten

Diese Methode wird fast nie verwendet, da sie durch Cascading-Stylesheet-Tools ersetzt wurde. Allerdings schadet es Ihnen nicht, zu wissen, dass ein solches Tag existiert.

Was die Validierung betrifft (dieser Begriff wird im Artikel „“ ausführlich beschrieben), so verurteilt die HTML-Spezifikation selbst die Verwendung < Mitte>, da für die Gültigkeit die Verwendung eines Übergangs erforderlich ist DOCTYPE>.

Dieser Typlässt verbotene Elemente durch.

Kommen wir nun zum Attribut ausrichten. Es legt die horizontale Ausrichtung von Objekten fest und passt nach der Tag-Deklaration. Normalerweise kann es verwendet werden, um Inhalte nach links auszurichten ( links), am rechten Rand ( Rechts), zentriert ( Center) und nach Textbreite ( rechtfertigen).

Im Folgenden gebe ich ein Beispiel, in dem ich das Bild und den Absatz in der Mitte platziere.

Dieser Inhalt wird zentriert.

Bitte beachten Sie, dass das von uns analysierte Attribut für das Bild leicht unterschiedliche Bedeutungen hat.

In dem Beispiel, das ich verwendet habe align="Mitte". Dadurch wurde das Bild so ausgerichtet, dass der Satz deutlich in der Bildmitte zu finden war.

Zentrierwerkzeuge in CSS

CSS-Eigenschaften zum Ausrichten von Blöcken, Text und grafischen Inhalten werden viel häufiger verwendet. Dies liegt vor allem an der Bequemlichkeit und Flexibilität bei der Implementierung von Stilen.

Beginnen wir also mit der ersten Eigenschaft der Textzentrierung – dieser Text-ausrichten.

Es funktioniert auf die gleiche Weise wie align in . Unter den Schlüsselwörtern können Sie eines aus der allgemeinen Liste auswählen oder die Merkmale eines Vorfahren erben ( erben).

Ich möchte darauf hinweisen, dass Sie in CSS3 zwei weitere Parameter festlegen können: Start– legt je nach den Regeln des Textschreibens (von rechts nach links oder umgekehrt) die Ausrichtung nach links oder rechts fest (ähnlich der Arbeit links oder rechts) und Ende– das Gegenteil von start (beim Schreiben von Text von links nach rechts wirkt es wie rechts, beim Schreiben von rechts nach links – links).

Satz rechts

Satz mit Ende

Ich verrate euch einen kleinen Trick. Bei der Auswahl eines Werts rechtfertigen Die letzte Zeile hängt möglicherweise unschön von unten herab. Um es beispielsweise mittig zu positionieren, können Sie die Eigenschaft nutzen text-align-last.

Verwenden Sie die Eigenschaft, um Websiteinhalte oder Tabellenzellen vertikal auszurichten vertikal ausrichten. Nachfolgend habe ich die Hauptschlüsselwörter des Elements beschrieben.

Stichwort	Zweck
Grundlinie	Gibt die Ausrichtung an einer Vorgängerlinie an, die als Basislinie bezeichnet wird. Wenn das Vorgängerobjekt keine solche Linie hat, erfolgt die Ausrichtung entlang der unteren Grenze.
Mitte	Die Mitte des mutierten Objekts wird an der Grundlinie ausgerichtet, zu der der Höhenboden des übergeordneten Elements hinzugefügt wird.
unten	Der untere Rand des ausgewählten Inhalts wird an den unteren Rand des darunter liegenden Objekts angepasst.
Spitze	Ähnlich wie unten, jedoch mit dem oberen Teil des Objekts.
super	Macht das Zeichen hochgestellt.
sub	Macht das Element tiefgestellt.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

C IN E TUMZU

C IN E TUMZU

Einrückungen

Und schließlich kommen wir zu den Absatzeinzügen. Die CSS-Sprache verwendet eine spezielle Eigenschaft namens Texteinzug.

Mit seiner Hilfe können Sie sowohl eine rote Linie als auch einen Vorsprung erstellen (Sie müssen einen negativen Wert angeben).

Um eine rote Linie zu erstellen, müssen Sie nur einen Parameter kennen.

Dies ist die einfache text-indent-Eigenschaft.

Eine sehr häufige Layoutaufgabe ist die vertikale Ausrichtung von Text in einem div-Block.

Wenn es bei der horizontalen Textausrichtung normalerweise keine Probleme gibt (wir verwenden die Eigenschaft text-align:center und alles wird gut), dann ist bei der vertikalen Ausrichtung alles etwas komplizierter.

In CSS gibt es eine Eigenschaft namens „vertikal-align“. Es scheint, dass Sie damit alle Probleme lösen können. Aber das war nicht der Fall.

Es ist zu berücksichtigen, dass Vertical-Align nur zum Ausrichten des Inhalts von Tabellenzellen oder für Inline-Elemente zum Ausrichten derselben relativ zueinander innerhalb derselben Zeile verwendet werden kann.

Für Blockelemente Die Vertical-Align-Eigenschaft funktioniert nicht.

Es gibt zwei Möglichkeiten, aus dieser Situation herauszukommen:

Für diejenigen, die lieber alles im Video sehen möchten:

Für diejenigen, die Text lieben, finden Sie unten eine Lösung für dieses Problem.

Methode A. Eine Lösung besteht darin, den Text nicht in einem div-Element, sondern in einer Tabellenzelle zu platzieren.

Zeile 1 Zeile 2 Zeile 3

Methode B. Verwenden Sie die Eigenschaft display:table-cell;

Zeile 1

Zeile 2

Zeile 3

Ein Problem besteht darin, dass diese Eigenschaft nicht unterstützt wird Internet Explorer 6-7 Versionen.

Situation 1.Richten Sie eine Textzeile aus.

Schauen wir uns ein einfaches Beispiel an.

Am oberen Rand wird eine Textzeile positioniert. Weil Da wir nur eine Textzeile haben, können wir für die Ausrichtung am meisten verwenden auf einfache Weise: Dies fügt eine Eigenschaft „line-height“ mit einem Wert hinzu, der der Höhe des div-Elements entspricht, in dem sich der Text befindet.

Die Linie, die vertikal ausgerichtet werden soll

Diese Methode funktioniert gut, wenn Sie nur eine Textzeile haben.

Situation 2. Wenn Sie die genaue Breite und Höhe des untergeordneten Blocks kennen, in dem sich der Text selbst befindet.

Bei dieser Lösung wird die Eigenschaft „position:absolute“ für den untergeordneten Block verwendet und dieser mit „position:relative“ absolut relativ zum übergeordneten Block positioniert.

Zeile 1

Zeile 2

Zeile 3

Wenn Sie die Breite und Höhe des Blocks kennen, können Sie die Hälfte dieses Werts nehmen und ihn mit negativen Werten für die Eigenschaften margin-left und margin-top festlegen.

Wenn Sie keine Unterstützung für ältere Browser benötigen, ist diese Option die optimalste.

Wie Sie sehen, erwies sich eine so einfache Aufgabe wie das Zentrieren von Text in der Praxis als nicht so einfach.

Die horizontale Ausrichtung von Inhalten, die über die Float-Eigenschaft verfügt, ist sehr einfach und auch völlig browserübergreifend möglich (funktioniert in Opera 8+, Firefox 3+, IE 5.5+).

Beispiel für die Ausrichtung eines Div-Blocks

Um einen Float-Block oder mehrere Blöcke hintereinander auszurichten, benötigen Sie einen weiteren Außenblock. Dem äußeren Block und den inneren Blöcken wird die Position zugewiesen: absolut; und float: links; , Außen links zuweisen: 50 %; , und für interne Blöcke rechts: 50 %; . So verwenden Sie float: right; externes Zuweisungsrecht muss zugewiesen werden: 50 %; , und für interne Blöcke übrig: 50 %; . Ich empfehle, Floats zu löschen, indem ich nach den mittig ausgerichteten Elementen einen Block mit der Eigenschaft „clear: Both;“ platziere. .

Dadurch erreichen Sie folgende Zentrierung:

Hat einen grünen Rand Innengerät mit id = block-inner, der äußere Block mit id = block hat einen unterbrochenen roten Rand.

Inhalte blockieren

#block ( position: relative; float: left; left: 50 %; border: 1px gestrichelt #a00; ) #block-inner ( position: relative; float: left; right: 50 %; border: 2px solid #0a0; padding : 10px; ) #page (Überlauf: versteckt; )

Beispiel für die Ausrichtung von Menüelementen

In der Praxis kann das obige Beispiel bei der horizontalen Ausrichtung eines Site-Menüs angewendet werden. Sie müssen jedoch berücksichtigen, dass bei einer ausreichend großen Anzahl von Elementen (die mehr als die Hälfte der Seitenbreite einnehmen) horizontales Scrollen auftritt. Um es zu beseitigen, müssen Sie die Überlaufeigenschaft im externen Block anwenden. Wenn es sich bei dem Menü um ein Dropdown-Menü handelt, können seine Dropdown-Elemente durch diesen externen Block abgeschnitten werden. Um dieses Problem zu vermeiden, müssen Sie die Overflow-Eigenschaft auf einen möglichst umschließenden Block anwenden, beispielsweise auf den äußersten Block, der den gesamten Inhalt der Seite umrahmt.

Sie können das Menü beispielsweise so ausrichten:

Elemente li der ul-Liste haben einen grünen Rand und die ul-Liste hat einen gestrichelten roten Rand.

Der HTML-Code für das folgende Beispiel sieht folgendermaßen aus:

• Ausgerichtetes Element 1
• Ausgerichteter Punkt 2
• Ausgerichteter Punkt 3
• Ausgerichteter Punkt 4
• Ausgerichteter Punkt 5

Der CSS-Code für das folgende Beispiel sieht folgendermaßen aus:

#menu ( position: relative; float: left; left: 50 %; border: 1px gestrichelt #a00; list-style: none; margin: 0; padding: 0; ) #menu li ( position: relative; float: left; rechts: 50 %; Rand: 2 Pixel durchgezogen #0a0; Polsterung: 10 Pixel;

Es ist also ziemlich einfach. Ich wünsche Ihnen viel Erfolg bei der Beherrschung neuer Methoden.

Es ist möglich, Elemente horizontal und vertikal auszurichten auf verschiedene Weise. Die Wahl der Methode hängt von der Art des Elements (Block oder Inline), der Art seiner Positionierung, Größe usw. ab.

1. Horizontale Ausrichtung zur Block-/Seitenmitte

1.1. Wenn die Blockbreite angegeben ist:

div ( width: 300px; margin: 0 auto; /*das Element horizontal innerhalb des übergeordneten Blocks zentrieren*/ )

Wenn Sie ein Inline-Element auf diese Weise ausrichten möchten, muss es auf display: block;

1.2. Wenn ein Block in einem anderen Block verschachtelt ist und seine Breite nicht angegeben/angegeben ist:

.wrapper(text-align: center;)

1.3. Wenn der Block eine Breite hat und auf seinem übergeordneten Block zentriert werden muss:

.wrapper (position: relative; /*relative Positionierung für den übergeordneten Block festlegen, damit wir den Block darin absolut positionieren können*/) .box ( width: 400px; position: absolute; left: 50%; margin-left: -200px; / *den Block um eine Distanz nach links verschieben, die der Hälfte seiner Breite entspricht*/ )

1.4. Wenn für die Blöcke keine Breite angegeben ist, können Sie sie mithilfe eines übergeordneten Wrapper-Blocks zentrieren:

.wrapper (text-align: center; /*den Inhalt des Blocks in der Mitte platzieren*/) .box ( display: inline-block; /*die Blöcke horizontal in einer Reihe anordnen*/ margin-right: -0.25em ; /*den rechten Abstand zwischen den Blöcken entfernen*/ )

2. Vertikale Ausrichtung

2.1. Wenn der Text eine Zeile einnimmt, zum Beispiel bei Schaltflächen und Menüpunkten:

.button (Höhe: 50px; Zeilenhöhe: 50px;)

2.2. So richten Sie einen Block innerhalb eines übergeordneten Blocks vertikal aus:

.wrapper (Position: relativ;).box ( Höhe: 100px; Position: absolut; oben: 50%; Rand: -50px 0 0 0; )

2.3. Vertikale Ausrichtung nach Tabellentyp:

.wrapper (Anzeige: Tabelle; Breite: 100 %;) .box (Anzeige: Tabellenzelle; Höhe: 100 Pixel; Textausrichtung: Mitte; Vertikalausrichtung: Mitte;)

2.4. Wenn ein Block eine bestimmte Breite und Höhe hat und auf seinem übergeordneten Block zentriert werden muss:

.wrapper ( Position: relativ; ) .box ( Höhe: 100 Pixel; Breite: 100 Pixel; Position: absolut; oben: 0; rechts: 0; unten: 0; links: 0; Rand: automatisch; Überlauf: automatisch; /*to Der Inhalt wurde nicht verbreitet */ )

2.5. Absolute Positionierung in der Mitte der Seite/des Blocks mithilfe der CSS3-Transformation:

wenn Abmessungen für das Element angegeben sind

div ( width: 300px; /*Breite des Blocks festlegen*/ height:100px; /*Höhe des Blocks festlegen*/ transform: translator(-50%, -50%); position: absolute; top: 50 %; links: 50 % ;

wenn das Element keine Dimensionen hat und nicht leer ist

Hier etwas Text

h1 ( Rand: 0; Transformation: Translate(-50 %, -50 %); Position: absolut; oben: 50 %; links: 50 %; )