Die Anordnung des Inhalts, der auf einer Website erscheint. Inhalt kann ein HTML-Element (Inline- oder Blockebene), ein Text, ein Bild usw. sein. In CSS stehen verschiedene Ansätze zur Verfügung, um diese Arten von Inhalten auf Ihrer Webseite auszurichten. In diesem Beitrag werden wir einige dieser Ansätze diskutieren, um das Konzept der Inhaltsausrichtung klar zu machen.

Lass uns anfangen

Ausrichten von Elementen auf Blockebene

Es gibt eine große Menge an Elementen, die unter die Kategorie von Elementen auf Blockebene fallen, z. B

,

Zu

, , usw. Sie können diese Elemente auf unterschiedliche Weise ausrichten. Wir haben hier einige für Sie besprochen.

So zentrieren Sie den Texte in CSS aus

Sie können den Text mit dem CSS ausrichten Textausrichtung Eigentum. Diese Eigenschaft macht unterschiedliche Werte wie links, rechts, zentrum und rechtfertigen.

Beispiel

Angenommen, Sie möchten einen Text in einem DIV -Behälter nach rechts ausrichten. Folgen Sie dem folgenden Code.

Html

Dieser Text ist richtig ausgerichtet.

Wir haben a platziert

Element in einem Element und zugewiesen eine Klasse „rechts“ dem Element.

CSS

.Rechts
Text-Align: Recht;
Grenze: 3px festes Lila;

Mit der Eigenschaft zur textausrichtung richten wir den Text auf die rechte Seite des Div-Containers aus.

Ausgang

Der Text wurde mit der textausrichtung Eigenschaft nach rechts ausgerichtet.

Inline -Elemente ausrichten

Es kommt eine Zeit, in der wir Inline -Elemente wie Bilder ausrichten müssen. Sie können diese Art von Elementen ausrichten, indem Sie ihren Elementtyp auf blockieren, um die Anzeigeeigenschaft von CSS zu blockieren, und dann verschiedene CSS -Eigenschaften nach Bedarf auszurichten.

Ein Bild ausrichten

Verwenden verschiedener CSS -Eigenschaften wie z Anzeige, links, oder Randrecht, Sie können ein Bild in jedem Stil ausrichten, den Sie mögen.

Beispiel

Nehmen wir an, Sie möchten ein Bild horizontal von der Frage ausrichten, ob es sich in einem Behälter befindet oder nicht.

Html

Hier haben wir ein Bild mit dem Tag mit dem Tag eingefügt.

CSS

img
Bildschirmsperre;
Rand-Links: Auto;
Margin-Right: Auto;
Breite: 50%;

Um ein Bild horizontal auszurichten, stellen Sie das Display auf Block und beide Ränder (links und rechts) auf automatisch. Darüber hinaus können Sie eine Breite oder Höhe Ihrer Wahl bereitstellen.

Ausgang

Das Bild wurde erfolgreich im Zentrum ausgerichtet.

Horizontale Ausrichtung

Erforschen wir verschiedene Ansätze, mit denen Elemente auf Blockebene horizontal ausgerichtet werden können.

Wie man zentriert ein Element ausrichtet

Nehmen wir an, Sie haben eine und möchten, dass es nur eine bestimmte Menge an Platz einnimmt, anstatt den gesamten horizontalen Raum in die Mitte der Seite auszurichten. So machst du es.

Html

Inhalt in CSS ausrichten

Hier haben wir ein Element erstellt und ein verschachtelt

Element darin.

CSS

.Center
Polsterung: 5px;
Rand: Auto;
Breite: 70%;
Grenze: 3px festes Lila;

Nun, damit das DIV -Element den angegebenen Raum nur so einnimmt, dass es sich nicht bis in die Ecken seines Behälters erstreckt. Um es horizontal auszurichten, stellen Sie den Rand auf automatisch ein.

Ausgang

Das DIV wurde erfolgreich im Mittelpunkt.

So richten Sie die Elemente mithilfe der Positionseigenschaft aus

In diesem Beispiel werden wir einen DIV -Container mit dem Absolutwert der Positionseigenschaft nach rechts ausrichten.

Html

Elemente mithilfe der CSS -Positionseigenschaft ausrichten

Diese Div ist mit dem AboSlute -Wert der CSS -Positionseigenschaft nach rechts ausgerichtet.

Hier haben wir zwei Div -Container erstellt, um die Arbeit des Absolutwerts der Positionseigenschaft zu verstehen. Die Klasse „Div“ wird dem ersten Div -Tag zugeordnet und die Klasse „Grün“ wird dem zweiten Div -Tag zugewiesen.

CSS

.div
Polsterung: 15px;
Grenze: 3px fest schwarz;

.Grün
Position: absolut;
Rechts: 1%;
Top: 15%;
Breite: 300px;
Grenze: 3px fest grün;
Polsterung: 10px;

Beide Div -Container wurden in einem Stil zur Verfügung gestellt. Die Position des zweiten Divs wurde jedoch absolut eingestellt. Jetzt die Zweite Div wird in Bezug auf die Position des Erste Div.

Ausgang

Die „grüne“ Div wurde in Bezug auf die erste Div unter Verwendung der CSS -Position im Position.

So richten Sie Elemente mithilfe der Float -Eigenschaft aus.

Angenommen, Sie möchten einen DIV -Behälter auf der rechten Seite der Seite schweben.

Html

Hallo Welt!

Im obigen Code haben wir einen Div -Container erstellt und a verschachtelt

Element darin.

CSS

.Rechts
schweben rechts;
Breite: 300px;
Grenze: 3px festes Lila;
Polsterung: 5px;

Mit der Float -Eigenschaft schweben wir den gesamten DIV und den Inhalt rechts in sich.

Ausgang

Der Div -Behälter wurde nach rechts erfolgreich schwebt.

Vertikale Ausrichtung

Hier haben wir einige Möglichkeiten erklärt, wie Sie Elemente vertikal ausrichten können.

Wie man Elemente mit der Polsterung vertikal ausrichten

Angenommen, Sie möchten vertikal einen Text zentrieren, den in einem DIV -Behälter vorhanden ist.

Html

Dieser Absatz ist vertikal zentriert.

Hier haben wir ein DIV -Element erstellt und a verschachtelt

Element darin.

CSS

.Center
Polsterung: 80px 0;
Grenze: 3px festes Lila;

Im obigen CSS -Code geben wir die Polsterung von 80px von oben und unten und 0px von links und rechts 0px zum Rahmen

Tag zum Zentrum richten Sie es im Div aus.

Ausgang

Der Text wurde erfolgreich im Zentrum ausgerichtet.

So richten Sie Elemente mit der Leitungshöhe aus

Wenn Sie dasselbe Beispiel wie oben genannt.

CSS

.Center
Zeilenhöhe: 200px;
Grenze: 3px festes Lila;
Text-Align: Mitte;

.Center P
Zeilenhöhe: 1.5;
Anzeige: Inline-Block;

Stellen Sie einfach die Linienhöhe des Div-Containers auf 200px ein und stellen Sie dann die Linienhöhe von

Element zu 1.5.

Ausgang

Die HTML-Elemente wurden sowohl vertikal als auch horizontal unter Verwendung von Linienhöhe ausgerichtet.

So richten Sie die Elemente mit Flexbox vertikal aus

Auch hier berücksichtigen wir dasselbe Beispiel und verwenden diesmal Flexbox, um Elemente vertikal und horizontal auszurichten.

CSS

.Center
Anzeige: Flex;
Justify-Content: Center;
Ausrichtung: Zentrum;
Höhe: 200px;
Grenze: 3px fest grün;

Hier setzen wir die Anzeige des DIV-Containers als Flex- und Zentrum ein, das den Inhalt und die Elemente im Div-Container mithilfe von Justify-Content- und Align-Items-Eigenschaften aus dem Flex-Box-CSS ausrichten. Darüber hinaus bieten wir auch etwas Höhe und Grenze dafür.

Ausgang

Der Text wird (sowohl vertikal als auch horizontal) mit Flexbox erfolgreich ausgerichtet.

Abschluss

In CSS sind verschiedene Ansätze verfügbar. Darüber hinaus können Sie diese Eigenschaften verwenden, um Text und Bilder auf Ihrer Website auszurichten. Wir haben einige unterschiedliche Ansätze in geeigneten Beispielen ausführlich besprochen, die sich bei der Ausrichtung der Inhalte auf Ihren Webseiten zur Verfügung stellen.