Een afbeelding centreren met HTML en CSS

In deze tutorial gaan we zien hoe je afbeeldingen centreert met HTML en CSS. Het is helemaal niet ingewikkeld en we zullen het vaak nodig hebben voor onze webpagina's. We gaan enkele opties zien, een waarbij we alleen HTML gebruiken, een andere door het gebruik van CSS en tot slot het gebruik van Bootstrap.

HTML en CSS zijn twee toonaangevende webscripttalen in de wereld van het maken van webpagina's en applicaties. Beide talen werken samen aan deze taak. Terwijl HTML een structuur geeft aan webpagina's, zorgt CSS voor de stijl en het visuele of auditieve gedeelte. HTML biedt tags die de verschillende elementen van een pagina omhullen en op deze manier zullen we, samen met attributen, het skelet van onze website creëren.

Verschillen tussen HTML en CSSSamenvattend kunnen we de verschillen tussen HTML en CSS als volgt zien:

• HTML is gemakkelijker te leren en te implementeren

• HTML Beschikbaar in meerdere talen

• HTML is lichtgewicht en effectief

• HTML heeft beperkte beveiliging

• HTML is wat traag.

• CSS heeft een grotere bibliotheek met attributen en stijlen dan CSS

• CSS verbetert de laadtijd van de pagina.

• CSS heeft een geweldige compatibiliteit en is eenvoudig te onderhouden.

• CSS geeft enkele prestatieproblemen

• CSS heeft geen ingebouwde beveiliging

Het wordt vandaag aanbevolen om de stappen rechtstreeks met CSS uit te voeren, maar als u meer van HTML bent, kunt u ook de volgende opties hebben.

1. Hoe een afbeelding op een webpagina te centreren met alleen HTML

Hoewel we deze opties maken om de afbeelding met HTML te centreren, zullen we twee manieren zien om dit gemakkelijk te doen.

Afbeelding centreren met HTML en middelste tagIn deze eenvoudige optie is het voldoende om de afbeelding om te wikkelen met de middelste labels

• Het gedeelte "src" wordt gebruikt om het padadres van de afbeelding aan te geven.

• Het alt-gedeelte geeft informatie aan de webpagina over de naam van de afbeelding.

Bovendien moeten we een hoogte en breedte van de afbeelding als volgt toewijzen:

  hoogte = ”250” ” 

Afbeelding centreren met HTML en middenMaar met betrekking tot afbeeldingen verschilt dit concept van centrum dat we hebben gezien en het is beter om een ​​middelste uitlijning te gebruiken, dus de code blijft als volgt:

  uitlijnen = ”midden”> 

Als we ook tekst zouden toevoegen, zouden we deze code hebben:

Dit voorbeeld is om een ​​afbeelding met tekst in HTML te centreren.  align = ”middle”> Nu maken we onze voorbeeldtekst af.

Afbeelding uitlijnen met HTML met kenmerk uitlijnenAls we een afbeelding horizontaal willen uitlijnen, kunnen we dit op dezelfde manier doen als wat we met tekst doen, dat wil zeggen, het align-attribuut gebruiken binnen labels

of. We zullen de code maken waar het attribuut wordt weergegeven met de afbeeldingstag. Het label is een van de labels die het align-attribuut accepteert, maar het gebruik is anders.

Maar zoals we zeggen, het label Hier zouden we de tekst plaatsen die het hele rechtergedeelte zou vullen en de afbeelding die we hebben geplaatst omwikkelen. We gaan verder met het invullen van de tekst solvetic solvetic solvetic

We zullen hetzelfde doen om de tekst en afbeelding rechts uit te lijnen aan de linkerkant, maar "links" te vervangen door "rechts".

Hier zouden we de tekst plaatsen die het hele rechtergedeelte zou vullen en de afbeelding die we hebben geplaatst omwikkelen. We gaan verder met het invullen van de tekst solvetic solvetic solvetic

Het wordt niet aanbevolen, omdat de plaatsings- en stijlaspecten aan CSS moeten worden overgelaten en niet rechtstreeks in HTML moeten worden gebruikt. Op deze manier hebben we een code die gemakkelijker te onderhouden en te wijzigen is, maar als je deze op een gegeven moment nodig hebt voor een kleine en snelle test, is het de moeite waard om te weten.

2. Hoe een afbeelding op een webpagina te centreren met CSS

Hier hebben we HTML-code en CSS-code. We beginnen met het bekijken van de HTML.

We hebben een klasse aan de afbeelding toegevoegd, gecentreerd genaamd, en dat zal ons helpen om het later in de CSS te stylen. Hieronder staat de code om de afbeelding te centreren.

 .center {marge: 10px automatisch; weergave: blok; } 

We kunnen ook de volgende code gebruiken om een ​​afbeelding uit te lijnen met behulp van CSS voor onze webpagina:

 .center {marge-links: auto; marge-rechts: auto; }

Als dit voor u niet werkt in een browser omdat de tekstcentreringsmethode wordt gebruikt, moeten we aan de browser aangeven dat de afbeelding een element op blokniveau is. Op deze manier kunnen we het centreren alsof het een ander blok is. We zullen deze code gebruiken:

We laten het element verschijnen als een blok, en we geven het een automatische marge (het is voldoende dat de marge automatisch is aan de zijkanten, boven en onder je kunt zetten wat je wilt). Houd er rekening mee dat als de afbeelding de volledige breedte beslaat, deze niet wordt gecentreerd.

 img.center {display: blok; marge-links: automatisch; marge-rechts: auto; }

3. Een afbeelding op een webpagina centreren met Bootstrap

Met dit populaire framework is alles eenvoudiger, we hoeven alleen de center-block-klasse in de afbeelding te plaatsen.

Je zult Bootstrap moeten downloaden en linken of je CDN in onze HTML zetten, hiervoor laat ik je link hieronder achter:

We kunnen het resultaat van het toepassen van deze codes zien met een afbeelding hieronder:

Op deze manier kunnen we zowel onze afbeeldingen centreren in HTML als CSS gebruiken en zo esthetisch succesvollere webwerken maken.