.

Das align-Attribut ist recht universell und kann nicht nur auf den Haupttext, sondern auch auf Überschriften wie z. B. angewendet werden

. Beispiel 1 zeigt, wie die Ausrichtung in einem solchen Fall eingestellt wird.

Beispiel 1: Textausrichtung

Wie fängt man einen Löwen?

Brute-Force-Methode

Wir unterteilen die Wüste in eine Reihe von Elementargebieten, deren Größe mit den Gesamtmaßen des Löwen übereinstimmt, jedoch kleiner als die Größe des Käfigs ist. Als nächstes ermitteln wir durch eine einfache Suche das Gebiet, in dem sich der Löwe befindet, was automatisch zu seiner Gefangennahme führt.

Dichotomie-Methode

Wir teilen die Wüste in zwei Hälften. In einem Teil gibt es einen Löwen, im anderen gibt es keinen. Wir nehmen die Hälfte, in der sich der Löwe befindet, und teilen sie noch einmal in zwei Hälften. Wir wiederholen dies, bis der Löwe gefangen ist.

Das Ergebnis des Beispiels ist in Abb. dargestellt. 1.

Reis. 1. Richten Sie den Text rechts und links aus

In diesem Beispiel wird die Überschrift in der Mitte des Browserfensters ausgerichtet, der hervorgehobene Absatz wird rechtsbündig ausgerichtet und der Fließtext wird linksbündig ausgerichtet.

Bis vor einiger Zeit habe ich, wie viele von Ihnen, zwei Methoden verwendet:

1. Die erste Methode basiert auf der Float-Eigenschaft. Der linke Block erhält float: left, der rechte Block erhält float: right
2. Die zweite Methode besteht darin, den rechten Block absolut zu positionieren, mit den Parametern rechts: 0 oder links: 100 %, Rand links: -(Blockbreite)

Der Hauptnachteil beider Methoden besteht darin, dass Sie, wenn die Blöcke entlang des unteren Randes oder entlang der Mittellinie relativ zueinander ausgerichtet werden müssen, die Auswahlmethode verwenden müssen, um die Blöcke vertikal zu verschieben und ihnen entweder top:anyValue oder zu geben margin-top: anyValue. Und die erste Methode hat zusätzlich zu allem noch einen weiteren, nicht so sehr einen Nachteil, sondern eine unangenehme Kleinigkeit. Dies ist die Notwendigkeit, den Fluss mithilfe von „clearFix“, einem Überlauf oder einem zusätzlichen Div zu löschen.
Also Methode Nummer 3. Zuerst der Code:

HTML selbst

Quelle kopieren | HTML kopieren

1. < div class ="wrap">
2. < div class ="left">< a href ="#">Linker Block< div class ="right">< a href ="#">Rechter Block

Eigentlich CSS

Quelle kopieren | HTML kopieren

1. .wickeln(
2. Breite: 500px;
3. Hintergrund: #555;
4. Höhe: 500px;
5. .links rechts (
6. Anzeige: inline -block;
7. //Anzeige: inline;
8. //Zoom: 1;
9. Breite: 100 %;
10. Rand rechts: -100 %;
11. vertikal ausrichten: unten;
12. .Rechts (
13. Textausrichtung: rechts;
14. .left a , .right a ( display : inline -block ; position : relative ; )
15. .left a (Breite: 200px; Höhe: 100px; Hintergrund: grün;)
16. .right a (Breite: 100px; Höhe: 200px; Hintergrund: rosa;)

Erläuterungen

Der Kern der Methode besteht darin, die Blöcke mit margin-right: -100% übereinander zu legen und den Inhalt des rechten Blocks mit text-align: right rechts auszurichten.
Es empfiehlt sich, beide Blöcke (rechts und links) in eine Zeile zu schreiben, da sonst aufgrund des Zeilenumbruchzeichens der rechte Block geringfügig über die Grenzen des übergeordneten Blocks hinausragt.
Links müssen auf „position:relativ“ eingestellt sein, andernfalls sind einige aufgrund der Überlappung von Blöcken möglicherweise nicht anklickbar.

Vorteile der Methode

Der Hauptvorteil besteht darin, dass die vertikale Ausrichtung jetzt für unsere Blöcke funktioniert. Und wir können sie ganz einfach am oberen Rand sowie unten und in der Mitte ausrichten.

Nachteile der Methode

Und der Hauptnachteil besteht darin, dass wir bei der Verwendung dieser Methode fest davon überzeugt sein müssen, dass der Inhalt der Blöcke nicht so stark zunimmt, dass sie beginnen, sich gegenseitig zu überlappen (diesen Nachteil hat die Methode mit Floats übrigens nicht). , da mit zunehmendem Inhalt der Blöcke diese untereinander passen).

P.S.

Ich habe eine solche Methode im Internet noch nicht gesehen, daher frage ich: Wenn jemand einen ähnlichen, früher veröffentlichten Artikel findet, lassen Sie es mich bitte wissen.

Aktualisiert.

In den Kommentaren wurde ich auf eine Methode aufmerksam gemacht, die text-align: justify verwendet. Auch diese Methode ist gut, hat aber zwei Nachteile. Erstens erfordert es die Einführung eines zusätzlichen Elements, das die letzte Zeile des Textblocks emuliert, und zweitens funktioniert es in IE6-IE7 nicht für Blockelemente.

In Programmen wie Microsoft Word sind Sie wahrscheinlich schon auf Tools zur horizontalen Textausrichtung gestoßen. Sie können den Text links oder rechts, zentriert oder im Blocksatz ausrichten. Dasselbe gilt auch für CSS – die Textausrichtung erfolgt über die Eigenschaft text-align und die entsprechenden Werte, die in der Tabelle aufgeführt sind:

Beispiel für einen Style-Eintrag:

P (Textausrichtung: links;)

Werte für links, rechts und in der Mitte. Linksbündiger Text sieht auf Webseiten fast immer gut aus und ist leicht zu lesen. Die Rechtsausrichtung wird in europäischen Sprachen in der Regel selten verwendet, kann aber nicht als völlig nutzlos bezeichnet werden: Dieser Stil ist nützlich, um Bildunterschriften für Fotos oder Zitate schön zu gestalten und den Inhalt von Tabellenzellen oder kleinen Textfragmenten auszurichten. Der Mittelwert wird oft für die gleichen Zwecke verwendet. Der Blocksatzwert „Text ausrichten“ in CSS kann für gedruckte Versionen von Seiten verwendet werden, es wird jedoch nicht empfohlen, sich auf Webseiten, die für die Anzeigeanzeige konzipiert sind, von diesem Stil mitreißen zu lassen. Warum? Auf den ersten Blick sieht der Blocksatz schön und gleichmäßig aus, wie eine Kolumne in einer Zeitung. Um den Text jedoch auf diese Weise zu strecken, muss der Browser zusätzlichen Abstand zwischen den Wörtern hinzufügen, wodurch unschöne Lücken im Text entstehen können, die das Lesen erschweren. In Programmen, die Daten für den Druck aufbereiten, gibt es eine viel feinere Anpassung der Abstände im Text und häufig auch den Zeilenumbruch, der in vielen Browsern nicht verfügbar ist. Daher ist es notwendig, zu prüfen, wie gerechtfertigter Text auf Webseiten aussieht. Die erste Frage, die Sie sich stellen sollten, lautet: Ist er gut lesbar? Dies gilt insbesondere für schmale Textblöcke (einschließlich mobiler Seitenversionen). Start- und Endwerte Die Start- und Endwerte für die text-align-Eigenschaft sind in CSS3 implementiert und funktionieren ähnlich wie left und right, es gibt jedoch einen Unterschied. Durch Anwenden des Startwerts auf Text, der von links nach rechts verläuft (LTR), ist die Ausrichtung links (entsprechend ist die Ausrichtung für Text, der von rechts nach links verläuft (RTL), rechts). Es ist logisch, dass der Endwert umgekehrt funktioniert (d. h. er richtet den LTR-Text rechts und den RTL-Text links aus). Diese beiden Werte werden von einigen Browsern, einschließlich Internet Explorer, nicht unterstützt. Wenn Sie sie also nicht unbedingt verwenden müssen, empfehlen wir die Verwendung der linken und rechten Werte.

Die Screenshots zeigen Beispiele für die Verwendung verschiedener Werte für die CSS-Eigenschaft text-align:

Screenshot 1: LTR-Text anhand des Startwerts links ausrichten. Ein ähnliches Aussehen kann mit dem linken Wert erreicht werden.
Screenshot 2: LTR-Text anhand des Endwerts rechts ausrichten. Mit dem richtigen Wert kann ein ähnliches Aussehen erreicht werden.
Screenshot 3: Text an der Breite ausrichten. Bei kleiner Schriftart und großer Seiten-/Blockbreite erscheint diese Option zum Ausrichten von Text auf einer Webseite akzeptabel.
Screenshot 4: Im Vergleich zum vorherigen Beispiel wurde die Schriftgröße erhöht und die Blockbreite verringert. Wie Sie sehen, sind im Text hässliche Lücken entstanden (unterstrichen mit einer roten Linie).
Screenshot 5: Zwei Möglichkeiten, Text am Beispiel der mobilen Version unseres Tutorials auszurichten (links – text-align: left, rechts – text-align: justify). Versuchen Sie, den Text in beiden Spalten zu lesen, und ermitteln Sie, welche Option angenehmer zu lesen ist.

Artikel 6. Ausrichtung von Text auf einer HTML-Seite (links, zentriert, rechts und Blocksatz)

Erstellungsdatum: 29.11.2009

1.

Also richtig verwenden "tag-paragraph" -, wir können Text posten Nach links Rand, Im Zentrum, nach rechts Kante und in der Breite Seiten. Dazu wird das Attribut innerhalb des öffnenden Tags eingefügt align="left", align="center", align="right" oder align="justify" jeweils.

In Wirklichkeit sieht es so aus:

Der Text wird zentriert

Der Text wird rechtsbündig ausgerichtet

Wenden wir nun die Ausrichtung auf unser Beispiel an. Ich werde das Wort „Hallo!“ zentriert ausrichten. Dafür werden wir wählen.

(Denken Sie daran, dass der Text, der sich innerhalb des Tags befindet, durch einen Absatz darüber und darunter vom Rest des Textes getrennt wird. Und doch müssen Sie, um ein guter Website-Designer zu werden, nicht nur HTML, sondern auch CSS (Stile) und viele andere Programme lernen.

Speichern Sie nun das Dokument, aktualisieren Sie das Dokument im Browser und sehen Sie, was passiert:

Ergebnis: Das Wort „Hallo!“ befindet sich in einem neuen Absatz in der Mitte der HTML-Seite.

(Wenn wir den Parameter align="..." aus dem Absatz entfernen, wird der Text standardmäßig am linken Rand angezeigt.)

2. ...

Auf die zweite Art können Sie Text platzieren nur in der Mitte. Aber auch hier gibt es einen Vorteil. Es besteht darin, dass der Text nicht in den Absatz eingefügt wird. Dazu müssen Sie es in ein Tag einfügen

... .

Es ist sehr einfach. Sehen Sie sich die Änderungen in unserem Beispiel an und Sie werden alles verstehen (aus Gründen der Übersichtlichkeit habe ich das Tag entfernt).
nach dem schließenden Tag):

Speichern Sie nun die Textdatei, aktualisieren Sie den Browser und sehen Sie sich das Ergebnis an:

Ergebnis: Der Text wird zentriert ohne Einrückung unten oder oben.

3. Ausrichtung

...

Die dritte Option, die Sie zum Ausrichten von Text verwenden können, sind Tags

.

Es ist genauso geschrieben wie Tags:

- Der Text wird zentriert

- Der Text wird links positioniert

- Der Text befindet sich am rechten Rand

- Der Text wird über die gesamte Breite der Seite platziert

Der Übersichtlichkeit halber füge ich beliebigen Text in das Beispiel ein und wende darauf eine Breitenausrichtung an, also von Rand zu Rand der Seite:

Speichern Sie nun wie gewohnt die Textdatei, aktualisieren Sie den Browser und schauen Sie sich das Ergebnis an:

Ergebnis: Wir sehen das im Gegensatz zum Tag

Etikett