Slik sentrerer du et bilde med HTML og CSS

I denne opplæringen skal vi se hvordan du sentrerer bilder med HTML og CSS. Det er ikke komplisert i det hele tatt, og vi trenger det ofte for våre nettsider. Vi kommer til å se noen alternativer, et som vi bare bruker HTML, et annet ved bruk av CSS og til slutt ved å bruke Bootstrap.

HTML og CSS er to ledende webskriptspråk i verden for å lage websider og applikasjoner. Begge språkene jobber sammen om denne oppgaven. Mens HTML gir en struktur til websider, tar CSS vare på stilen og den visuelle eller auditive delen. HTML gir tagger som pakker inn de forskjellige elementene på en side, og på denne måten, sammen med attributter, vil vi lage skjelettet til nettstedet vårt.

Forskjeller mellom HTML og CSSFor å oppsummere kan vi se forskjellene mellom HTML og CSS som følgende:

• HTML er lettere å lære og implementere

• HTML Tilgjengelig på flere språk

• HTML er lett og effektivt

• HTML har begrenset sikkerhet

• HTML er litt treg.

• CSS har et større bibliotek med attributter og stiler enn CSS

• CSS forbedrer sidens lastetid.

• CSS har god kompatibilitet og enkelt vedlikehold.

• CSS gir noen ytelsesproblemer

• CSS har ingen innebygd sikkerhet

Det anbefales i dag å utføre trinnene direkte med CSS, men hvis du har mer HTML, kan du også ha følgende alternativer.

1. Slik sentrerer du bildet på nettsiden med bare HTML

Selv om vi gjør disse alternativene for å sentrere bildet med HTML, vil vi se to måter å gjøre det enkelt.

Senterbilde med HTML og sentermerkeI dette enkle alternativet er det nok å pakke inn bildet med senteretikettene

• "Src" -delen brukes til å angi baneadressen til bildet.

• Alt -delen gir informasjon til nettsiden om navnet på bildet.

I tillegg må vi tilordne en høyde og bredde på bildet slik:

  høyde = ”250” ” 

Senterbilde med HTML og midtenMen når det gjelder bilder, er dette sentrumskonseptet vi har sett forskjellig, og det er bedre å bruke en midtjustering, så koden forblir som følger:

  align = ”middle”> 

Hvis vi også legger til tekst, ville vi ha denne koden:

Dette eksemplet vil være å sentrere et bilde med tekst i HTML.  align = ”middle”> Nå fullfører vi eksempelteksten.

Juster bildet til HTML med justeringsattributtetHvis vi vil justere et bilde horisontalt, kan vi gjøre det på samme måte som det vi gjør med tekst, det vil si bruke justeringsattributtet i etiketter

eller. Vi oppretter koden der attributtet vises med bildekoden. Etiketten er en av de som godtar justeringsattributtet, men bruken er annerledes.

Men som vi sier, etiketten Her ville vi sette teksten som ville fylle hele høyre del og pakke inn bildet vi har plassert. Vi fortsetter å fylle ut teksten solvetic solvetic solvetic

Vi vil gjøre det samme for å justere teksten og bildet til høyre til venstre, men erstatte "venstre" med "høyre".

Her ville vi sette teksten som ville fylle hele høyre del og pakke inn bildet vi har plassert. Vi fortsetter å fylle ut teksten solvetic solvetic solvetic

Det anbefales ikke, fordi plasserings- og stilaspektene bør overlates til CSS og ikke brukes direkte i HTML. På denne måten vil vi ha en kode som er lettere å vedlikeholde og endre, men hvis du til enhver tid trenger den for en liten og rask test, er det verdt å vite.

2. Slik sentrerer du et bilde på en webside med CSS

Her vil vi ha HTML -kode og CSS -kode. Vi starter med å se på HTML.

Vi har lagt en klasse til bildet, kalt sentrert, og det vil hjelpe oss til senere å style det i CSS. Nedenfor er koden for å sentrere bildet.

 .center {margin: 10px auto; display: blokk; } 

Vi kan også bruke følgende kode for å justere et bilde ved hjelp av CSS for vår webside:

 .center {margin-venstre: auto; margin-høyre: auto; }

Hvis dette ikke fungerer for deg i en nettleser fordi tekstsentreringsmetoden brukes, må vi indikere for nettleseren at bildet er et element på blokknivå. På denne måten kan vi sentrere det som om det var en annen blokk. Vi bruker denne koden:

Vi får elementet til å se ut som en blokk, og vi gir det en automatisk margin (det er nok at margen er automatisk på sidene, topp og bunn kan du sette hva du vil). Husk at hvis bildet opptar hele bredden, vil det ikke være sentrert.

 img.center {display: block; margin-venstre: auto; margin-høyre: auto; }

3. Slik sentrerer du et bilde på en webside ved hjelp av Bootstrap

Med dette populære rammeverket er alt enklere, vi må bare sette senterblokk-klassen i bildet.

Du må laste ned Bootstrap og koble den eller sette CDN -en i HTML -koden vår, for dette lar jeg lenken din være nedenfor:

Vi kan se resultatet av å bruke disse kodene med et bilde nedenfor:

På denne måten kan vi både sentrere bildene våre i HTML og bruke CSS og dermed gjøre estetisk mer vellykkede webverk.