Handleiding HTML - Structureren van tekst

HTML		Structureren van tekst

Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Gerelateerde elementen: ADDRESS | BLOCKQUOTE | BR | CENTER | DEL | HR | Hx | INS | P | PRE

Centreren

De inhoud van een HTML-document kan op verschillende manieren in het venster gecentreerd worden. Wanneer het om tekst gaat welke deel uitmaakt van het P element, kan gebruik gemaakt worden van het ALIGN attribuut met de waarde "center".

<P ALIGN="center">Deze tekst is gecentreerd en wordt<BR> geplaatst over twee regels.</P>

Deze tekst is gecentreerd en wordt
geplaatst over twee regels.

Voor het centreren kan ook gebruik gemaakt worden van het CENTER element.

<CENTER>Deze tekst is gecentreerd.</CENTER>

Deze tekst is gecentreerd.

Het CENTER element wordt behalve voor tekst ook vaak gebruik voor andere inhoud. Bijvoorbeeld om een afbeelding te centreren. In HTML 4.0 heeft het CENTER element het label afgekeurd gekregen en in plaats ervan wordt aanbevolen het DIV element met het attribuut ALIGN="center" te gebruiken.

<DIV ALIGN="center">Deze tekst is gecentreerd.</DIV>

Deze tekst is gecentreerd.

Overigens heeft ook het ALIGN attribuut van de elementen P en DIV in HTML 4.0 het label afgekeurd gekregen. De achtergrond hiervan is, dat de opmaak van een document in de toekomst zoveel mogelijk geregeld moet worden met behulp van stylesheets. Ter illustratie wordt in het volgende voorbeeld tekst gecentreerd met het STYLE attribuut en de text-align eigenschap.

<P STYLE="text-align: center;">Als de ... gecentreerd.</P>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

De elementen CENTER en DIV worden voorafgegaan en gevolgd door de overgang naar een nieuwe regel, maar een blanco regel, zoals bij het P element, wordt echter niet toegevoegd.

Wanneer je een blok tekst een bepaalde breedte wilt geven en als geheel wilt centreren, dan kun je het beste gebruik maken van stylesheets. In het volgende voorbeeld is voor een P element met de width eigenschap een breedte gedefinieerd. Om het P element te centreren, moet je de eigenschappen margin-left en margin-right beide opnemen met de waarde auto. De inhoud van het P element wordt in het voorbeeld links uitgelijnd.

<P STYLE="width: 120px; margin-left: auto; margin-right: auto; text-align: left;">Dit P element ... van een stijl.</P>

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Wanneer je ook de inhoud van het P element wilt centreren, dan wijzig de waarde van de text-align eigenschap voor dit element van left in center.

<P STYLE="width: 120px; margin-left: auto; margin-right: auto; text-align: center;">...</P>

Vervolg: Kolommen

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin