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 | MULTICOL | 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. Deze oplossing wordt ondersteund door Mozilla, Firefox, Netscape Navigator 6.0 en hoger en Opera 4.0 en hoger. Het P element is ook gecentreerd in Microsoft Internet Explorer 6.0, maar alleen als een DOCTYPE-declaratie is gebruikt, die ervoor zorgt dat het document wordt weergegeven in de standards modus. Wanneer het P element wordt weergegeven door Microsoft Internet Explorer 6.0 in de quirks modus, of door Microsoft Internet Explorer 5.5 of lager, dan wordt het P element niet gecentreerd maar links in het venster of frame geplaatst. Je kunt het P element toch centreren, door een fout in deze browsers met betrekking tot de text-align eigenschap te benutten. Volgens de regels mag een browser de text-align eigenschap alleen gebruiken om de inline inhoud van een element op blokniveau uit te lijnen. Microsoft Internet Explorer (met uitzondering van versie 6.0 in de standards modus) doet het met alle ingesloten elementen op blokniveau. In deze browser kun je het P element dus centreren, als je het plaatst in een DIV element, waarvoor text-align: center geldt. Wanneer je beide oplossingen combineert, dan is het P element in vrijwel alle browsers gecentreerd (Microsoft Internet Explorer vanaf versie 5.0, Netscape Navigator vanaf versie 6.0, Mozilla, Firefox en Opera vanaf versie 4.0).

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

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.

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

Vervolg: Kolommen

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