Handige tips

Drie manieren om de HTML-afbeelding te centreren

Pin
Send
Share
Send
Send


CSS gebruiken is de meest optimale manier om afbeeldingen, tekstblokken en zelfs het hele webpaginaontwerp te centreren. De meeste eigenschappen voor HTML-alignering zijn beschikbaar in CSS sinds versie 1.0. Ze werken prima met CSS3 en moderne webbrowsers:

CSS-centreertoepassingen in HTML

CSS-centrering kan een probleem zijn voor beginnende webontwerpers. Er zijn veel manieren om dit te doen, maar niet alle zijn op elk element van toepassing.

CSS kan worden gebruikt om:

  • Centreer de tekst
  • Centreer een blokelement (bijv. Div)
  • Afbeelding centreren
  • Centreer het blok of de afbeelding verticaal.

Vele jaren geleden konden webontwerpers afbeeldingen en tekst centreren. Maar nu is deze tag verouderd en wordt deze niet langer ondersteund door moderne browsers. Dit komt omdat moderne sites een duidelijke scheiding van structuur en stijlen moeten hebben.

CSS-tekstcentrering

De eenvoudigste manier om de tekst op een webpagina te centreren. Hiervoor heeft u slechts één eigenschap nodig: HTML-tekstuitlijning:

Met deze coderegel wordt elke alinea met de middenklasse horizontaal gecentreerd in het bovenliggende element.

Toepassingen van deze klasse:

Wanneer u tekst in het midden uitlijnt met de eigenschap text-align, moet u er rekening mee houden dat deze wordt gecentreerd in de container die de tekst bevat, en niet noodzakelijk met betrekking tot de hele pagina.

Inhoudblokken centreren met CSS

Blokken zijn alle elementen op een pagina die zijn ingesteld als blokniveau-elementen en een bepaalde breedte hebben. Vaak worden dergelijke blokken gemaakt met behulp van

De meest gebruikelijke manier om blokken te centreren is om de opvulling links en rechts in te stellen op auto:

Bij deze verkorte vorm van de eigenschap margin worden de boven- en ondermarges ingesteld op 0, en voor de linker- en rechtermarges wordt auto gebruikt. Alle beschikbare ruimte is dus bezet en gelijkmatig verdeeld tussen de twee kanten, wat overeenkomt met HTML div-align.

HTML-toepassing:

Omdat het blok een bepaalde breedte heeft, wordt het gecentreerd in het element dat het bevat. De tekst in dit blok wordt niet uitgelijnd met het midden, maar links. Omdat standaard in browsers de tekst links wordt uitgelijnd. Om de tekst gecentreerd te houden, gebruikt u de eigenschap text-align, die we eerder hebben beschreven.

CSS afbeelding centreren

In de meeste browsers worden afbeeldingen gecentreerd weergegeven bij gebruik van de eigenschap HTML-tekstuitlijning. Maar u moet niet op deze methode vertrouwen, omdat het niet wordt aanbevolen door W3C.

In plaats daarvan moet u uw browser expliciet vertellen dat de afbeelding een blokniveau-element is. Hier is de CSS-code hiervoor:

Hier is de HTML-code voor de afbeelding die moet worden gecentreerd:

U kunt objecten ook centreren met inline CSS:

Centreer elementen verticaal met CSS

Verticale HTML-uitlijning is altijd problematisch geweest bij webontwerp, maar met de release van de CSS Flexible Box Layout Module-specificatie in CSS3 is er een oplossing voor deze taak ontstaan.

Verticale uitlijning werkt hetzelfde als de hierboven beschreven horizontale uitlijning. Eigenschap verticaal uitlijnen met middelste waarde:

Het nadeel van deze aanpak is dat niet alle browsers CSS FlexBox ondersteunen. Als er problemen zijn met eerdere versies van browsers, raadt W3C aan om de tekst verticaal in de container te centreren met behulp van de volgende methode:

  • Plaats de te centreren elementen in een containerelement zoals een div,
  • Stel de minimale hoogte in voor het containerelement,
  • Verklaar een containerelement,
  • Zet HTML verticaal uitlijnen op midden.

Verticaal centreren en eerdere versies van Internet Explorer

Er zijn verschillende manieren om IE te dwingen objecten te centreren en vervolgens voorwaardelijke opmerkingen te gebruiken. Het goede nieuws is dat vanwege de recente beslissing van Microsoft om de ondersteuning voor oudere versies van IE op te geven, deze browsers binnenkort zouden moeten verdwijnen, waardoor webontwerpers gemakkelijker moderne opmaakbenaderingen zoals CSS FlexBox kunnen gebruiken.

Deze publicatie is een vertaling van het artikel “CSS gebruiken om afbeeldingen en andere HTML-objecten te centreren”, opgesteld door het vriendelijke team van het Internet Technology.ru-project

Bekijk de video: Afbeelding toevoegen in een sidebar widget in WordPress (September 2022).

Pin
Send
Share
Send
Send