Pdf downloaden
Pdf downloaden
In deze wikiHow leer je hoe tekst centreert in een HTML-website. Hierbij maken we gebruik van CSS (Cascading Style Sheets ofwel stijlbladen). Vroeger centreerden we in HTML met behulp van de <center> -tag, maar dit werkt niet meer in de meeste browsers. [1] X Bron
Stappen
-
Open het tekstbestand waarin je je stijlen beschrijft. Nu de <center> -tag niet meer gebruikt wordt, maak je in dit bestand een nieuw element waarmee je tekst centreert in bepaalde gedeeltes van je HTML-document. Wanneer je geen apart css-bestand hebt, staan de codes bovenaan het HTML-document tussen de '<style>'- en '</style>'-tags. [2] X Bron
- Als de <style> - en </style> -tags er nog niet staan, kan je ze er direct onder de <body> -tag onderzetten op de volgende manier:
<!DOCTYPE html> < html > < body > < style > </ style >
-
Maak een klasse die tekst centreert. De <div> -tag vertelt je HTML-document op welke specifieke sectie deze klasse betrekking heeft. Typ het volgende tussen de 'style'-tags en zorg ervoor dat je tweemaal op ↵ Enter drukt na de eerste regel:
div . a { }
-
Voeg de text-align -eigenschap toe. Typ text-align: center; tussen de accolades in de div.a -sectie. De 'header' ziet er nu zo uit:
<! DOCTYPE html > < html > < body > < style > div . a { text-align : center ; } </ style >
-
Voeg de juiste div -tag toe aan de tekst die je wilt centreren. Dit doe je door de <div class="a"> -tag te typen boven deze tekst en deze te sluiten met een </div> -tag onder deze tekst. Wanneer je bijvoorbeeld een titel de alinea daaronder wil centreren, ziet dat er zo uit:
< div class = "a" > < h1 > Welkom op mijn website </ h1 > < p > Deze website is voornamelijk bedoeld om informatie over dingen te geven .</ p > </ div >
-
Gebruik de div.a -tag om andere elementen te centreren. Wanneer je een ander element wil centreren, zoals content tussen de tags <p></p> en <h2></h2> ), typ je <div class="a"> voor dit element en </div> erna. Aangezien je de ‘div.a' al gedefinieerd hebt als de centrerende css-code, worden nu ook deze elementen gecentreerd.
< style > div . a { text-align : center ; } </ style > < div class = "a" > < h2 > Donaties zijn welkom </ h2 > < p > please </ p > </ div >
-
Controleer je document. Hoewel de tekst op je webpagina natuurlijk anders is, ziet het er ongeveer zo uit: [3] X Bron
<! DOCTYPE html > < html > < body > < style > div . a { text-align : center ; } </ style > < div class = "a" > < h1 > Welkom op mijn website </ h1 > < p > Deze website is voornamelijk bedoeld om informatie over dingen te geven .</ p > </ div > < div class = "a" > < h2 > Donaties zijn welkom </ h2 > < p > please </ p > </ div > </ body > </ html >
Advertentie
-
1Open je HTML-document. Deze methode beschrijft hoe je de verouderde <center> -tag gebruikt. Deze methode werkt waarschijnlijk nog wel in een aantal browsers, maar het is het beste hier niet te veel op te vertrouwen.
-
Zoek de tekst die je wilt centreren. Scrol door je document naar beneden totdat je de titel, de alinea of de andere tekst hebt gevonden die je wilt centreren.
-
Plaats de 'center'-tag aan weerszijden van de tekst. De code ziet er zo uit <center>tekst</center> . Hierbij is ’tekst’ de te centreren tekst. Plaats de 'center'-tags buiten bestaande tags, als er nog andere tags in deze tekst staan, zoals '<p></p>' voor een alinea.
< center >< h1 > Welkom op mijn website </ h1 ></ center > < center > Maak het jezelf gemakkelijk! </ center >
-
Controleer je HTML-document. Het moet er ongeveer zo uitzien: [4] X Bron
<!DOCTYPE html> < html > < body > < h1 >< center > Welkom op mijn website </ center ></ h1 > < center > Maak het jezelf gemakkelijk! </ center > < p1 > Deze website is voornamelijk bedoeld om informatie over dingen te geven. </ p1 > </ body > </ html >
Advertentie
Bronnen
Advertentie
Meld je aan voor de gratis nieuwsbrief van wikiHow!
Je vindt dan elke week handige handleidingen in je inbox.
Meld me aan!
