Inhoud

• Stappen
• Methode 1 van 2: CSS (aanbevolen)
• Methode 2 van 2: Het kenmerk "align" in HTML

Attribuut uitlijnen label html> is verouderd sinds HTML5. Hoewel dit kenmerk nog steeds werkt in de meeste webbrowsers, is het raadzaam afbeeldingen uit te lijnen met Cascading Style Sheets (CSS). In dit artikel laten we u zien hoe u afbeeldingen centreert met behulp van CSS en de verouderde tag. uitlijnen.

Stappen

Methode 1 van 2: CSS (aanbevolen)

1. 1 Voeg HTML-code toe voor de afbeelding. U gebruikt cascading style sheets (CSS) om de afbeelding uit te lijnen, maar u moet deze met HTML op de pagina plaatsen. Hieronder volgt een voorbeeld van het gebruik van de tag img> om een ​​afbeelding in uw code in te voegen:

   img src = "hond.webp" alt = "dit is een foto van een hond">

   • In plaats van hond.webp vervang de naam van het afbeeldingsbestand en voer na de "alt" de beschrijving van de afbeelding in. Betekenis centrum voor "class" veranderen niet, omdat u een CSS-klasse met die naam maakt.
2. 2 Zoek de CSS-code. Als uw site een afzonderlijk CSS-bestand heeft, opent u dit. Zo niet, dan staat de CSS hoogstwaarschijnlijk bovenaan het HTML-bestand, binnen de tags hoofd>... Scroll naar de bovenkant van het bestand om tags te vinden stijl> / stijl>.
   • Als tags stijl> / stijl> nee, voeg ze toe. Lees dit artikel voor meer informatie.
3. 3 Voeg CSS toe om de afbeelding uit te lijnen. In plaats van "50%" kunt u een andere waarde invoeren om de afbeelding op de pagina te laten verschijnen. U kunt de afbeelding niet centreren met een waarde van "100%", dus dit aantal moet anders zijn.

   .center {display: blok; marge-links: automatisch; marge-rechts: auto; breedte: 50%; }

4. 4 Sla uw wijzigingen op. Sla het HTML-bestand en het CSS-bestand (indien aanwezig) op. Hierdoor wordt de afbeelding gecentreerd.
   • Ook binnen tags img> kan toevoegen om andere afbeeldingen te centreren.

Methode 2 van 2: Het kenmerk "align" in HTML

1. 1 Maak een nieuwe alinea. Hoewel deze methode voor het centreren van afbeeldingen is afgeschaft, werkt deze nog steeds in veel browsers. We raden u echter aan om CSS te gebruiken om de site functioneel te houden wanneer browsers het opgegeven kenmerk niet meer ondersteunen. Onthoud dat het attribuut uitlijnen centreert de afbeelding alleen binnen het element eromheen (bijvoorbeeld binnen tags p> / p> of div> / div>). Als voorbeeld zullen we in het HTML-bestand een nieuwe alinea maken door toe te voegen: p> op een aparte regel.
2. 2 Voeg HTML-code toe voor de afbeelding. Voer de volgende code in na de tag p>... Gebruik dit voorbeeld als richtlijn:

   p> img src = "dog.webp" alt = "foto" align = "middle">

   • In plaats van hond.webp vervang de naam van het afbeeldingsbestand en voer na de "alt" de beschrijving van de afbeelding in.
   • Het middelste attribuut vertelt de browser om de afbeelding in het midden van de pagina weer te geven.
3. 3 Sluit de alineatag. Om dit te doen, voeg / p> na de foto-tag. De voltooide code zou er ongeveer zo uit moeten zien:

   p> img src = "dog.webp" alt = "foto" align = "middle"> / p>

4. 4 Sla uw wijzigingen op. Hierdoor wordt de afbeelding gecentreerd.