Bei der Absatzformatierung in HTML gibt es die Möglichkeiten left, right, center und justify, wobei justify nicht von allen Browsern unterstützt wird. Statt des Blocksatzes, dem justify entspricht, wird der Text dann in diesem Falle links formatiert.
<p>Dies ist die erste Zeile gefolgt von einem Zeilenende</p> <p>Eine weitere Zeile</p> <p>Noch eine Zeile<p>
Durch das nobr wird die Zeile nicht umgebrochen, egal ob der Rand kommt oder nicht
Der Tag p leitet einen Absatz ein
Mit align right wird der Absatz rechts formatiert
Neben der Formatierung justify gibt es noch die Formatierung left und center
Beispiele:
<p>Ich bin eine Zeile links</p> <p align="right">Und ich bin jetzt rechts formatiert</p> <p align="center">Zentriert geht auch</p> <p align="justify">Und dies ist Blocksatz. Dies funktioniert jedoch nur, wenn viel Text in einer Zeile steht, so dass das Zeilenende des Browsers auch wirklich erreicht wird.</p>
Wie Sie sehen, muss für die Linksformatierung kein align=“left“ angegeben werden, da dies die Standardformatierung in unseren Breiten ist.
Sie können Textanweisungen auch in einem Container setzen. Dazu zählt der Tag DIV. Div ist die Abkürzung für Division, also ein Bereich. Er kennzeichnet ein allgemeines Block-Element.
Der DIV-Tag erzeugt in den meisten Browsern einen Vorschub. Dem DIV-Tag können Sie auch weitere Absatzformatierungen mitgeben. Mit „align“ können Sie beispielsweise die Ausrichtung bestimmen. Die Information „align=“center“ richten den Bereich zentriert aus, align=“right“ bestimmt eine rechtsbündige Formatierung. Mit align=“justify“ werden innere Elemente wie freistehender Text, Textabsätze oder Überschriften als Blocksatz ausgerichtet. Zu guter Letzt erzeugt align=“left“ die linksbündige Ausrichtung von Elementen.
<html> <head> <title>lemente formatieren mit CSS</title> </head> <body> <div style="text-align:center; padding:20px; margin:25px"> <h1>Hier wird alles zentriert</h1> <ul> <li>zentriert</li> <li>wirklich alles?</li> <li><span style="font-weight:bold; color:red">ja, alles!</span></li> </ul> </div> </body> </html>