Een afbeelding centreren in HTML

PDF download Pdf downloaden
Bijdragen van wikiHow-redactie

PDF download Pdf downloaden

Beelduitlijning is een belangrijke vaardigheid om te leren bij het coderen van webpagina's. Helaas worden sommige HTML-tags naarmate de code verandert, niet meer herkend door alle webbrowsers. Probeer deze methoden om een afbeelding in HTML te centreren. Als ze niet werken, overweeg dan om gebruik te maken van CSS (Cascading Style Sheets).

Methode 1
Methode 1 van 2:

In tekst uitlijnen

PDF download Pdf downloaden
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/01\/Center-an-Image-in-HTML-Step-1-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/01\/Center-an-Image-in-HTML-Step-1-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    In HTML-codering kun je tekst centreren, maar je moet de uitlijning van het beeld aanduiden met 'middle'. Een afbeelding is geen regel-element, dus geef je dit aan in relatie tot andere elementen.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/20\/Center-an-Image-in-HTML-Step-2-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/20\/Center-an-Image-in-HTML-Step-2-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Gebruik een alinea-tag om aan te geven dat een tekstregel begint. Start je tag met <p> en schrijf dan je tekst.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/31\/Center-an-Image-in-HTML-Step-3-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/31\/Center-an-Image-in-HTML-Step-3-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Voeg vervolgens je beeldbeschrijving toe door alt='beeldbeschrijving' te typen.
    • De 'src'-sectie vertelt de webpagina wat de URL van de afbeelding is.
    • De 'alt'-sectie vertelt de webpagina hoe deze moet worden genoemd.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/Center-an-Image-in-HTML-Step-4-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/Center-an-Image-in-HTML-Step-4-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Typ align='middle'> . Dit is het einde van het afbeeldingsgedeelte van je tag. [1]
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fe\/Center-an-Image-in-HTML-Step-5-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fe\/Center-an-Image-in-HTML-Step-5-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Sluit dan de tag af met </p>. Je hele tag kan er bijvoorbeeld zo uitzien: <p>We leren over HTML. <img src='dancingdogpicture.gif' alt='dancing dog' align='middle' Ons voorbeeld is compleet. </p>
    Advertentie
Methode 2
Methode 2 van 2:

Uitlijnen in een 'center'-tag

PDF download Pdf downloaden
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d2\/Center-an-Image-in-HTML-Step-6-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d2\/Center-an-Image-in-HTML-Step-6-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Je kunt de afbeelding binnen dat gecentreerde element vatten. Het zal echter extra ruimte rond je element creëren.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Center-an-Image-in-HTML-Step-7-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Center-an-Image-in-HTML-Step-7-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Begin met het centreren van het element. Typ <center>.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/88\/Center-an-Image-in-HTML-Step-8-Version-2.jpg\/v4-460px-Center-an-Image-in-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/88\/Center-an-Image-in-HTML-Step-8-Version-2.jpg\/v4-728px-Center-an-Image-in-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Typ <img src='dancingdogpicture.gif' alt='dancing dog' .
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5a\/Center-an-Image-in-HTML-Step-9.jpg\/v4-460px-Center-an-Image-in-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5a\/Center-an-Image-in-HTML-Step-9.jpg\/v4-728px-Center-an-Image-in-HTML-Step-9.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Voer iets in als height='200' width='200'> of een andere grootte naar keuze. Dit is het einde van het afbeeldingsgedeelte van de tag.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/Center-an-Image-in-HTML-Step-10.jpg\/v4-460px-Center-an-Image-in-HTML-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/Center-an-Image-in-HTML-Step-10.jpg\/v4-728px-Center-an-Image-in-HTML-Step-10.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Je hele tag zou er bijvoorbeeld zo uit kunnen zien:
    <center><img src='dancingdogpicture.gif' alt='dancingdog' height='200' width='200'></center>. [2]
    Advertentie

Waarschuwingen

  • Houd er rekening mee dat zowel de uitlijning als de centreer-tags verouderd kunnen raken. Dit betekent dat ze in de toekomst niet meer gebruikt zullen worden. Hoewel er geen exacte datum is waarop ze niet meer gebruikt zullen worden, zullen browsers ze uiteindelijk niet meer herkennen en zullen de codes geüpdatet moeten worden naar CSS of HTML5.
Advertentie

Gerelateerde artikelen

XML bestanden openen
De kleur van tekst in HTML veranderen
Spaties in HTML toevoegen
De broncode van een webpagina bekijken
Commentaar toevoegen aan HTML
De lengte en breedte van een afbeelding instellen met HTML
Notepad gebruiken
Een computerprogramma maken
Een onschuldig virus creëren
De hex code van een kleur achterhalen op je computer
Gegevens toevoegen aan een draaitabel in Excel
Een php‐bestand openen
Programmeren in Python
Een SQL Server database maken
Advertentie

Bronnen

  1. ↑ http://www.w3schools.com/tags/att_img_align.asp
  2. ↑ http://www.netmechanic.com/news/vol7/html_no10.htm

Over dit artikel

In andere talen
Deze pagina is 7.185 keer bekeken.

Was dit artikel nuttig?

Advertentie