Sådan centreres et billede med HTML og CSS

I denne vejledning skal vi se, hvordan man centrerer billeder med HTML og CSS. Det er slet ikke kompliceret, og vi får brug for det ofte til vores websider. Vi kommer til at se nogle muligheder, en som vi kun bruger HTML, en anden ved hjælp af CSS og til sidst ved hjælp af Bootstrap.

HTML og CSS er to førende web -scriptsprog i verden med oprettelse af websider og applikationer. Begge sprog arbejder sammen om denne opgave. Mens HTML giver en struktur til websider, tager CSS sig af stilen og den visuelle eller auditive del. HTML leverer tags, der ombryder de forskellige elementer på en side, og på denne måde skaber vi sammen med attributter skelettet af vores websted.

Forskelle mellem HTML og CSSFor at opsummere kan vi se forskellene mellem HTML og CSS som følgende:

• HTML er lettere at lære og implementere

• HTML Tilgængelig på flere sprog

• HTML er let og effektivt

• HTML har begrænset sikkerhed

• HTML er lidt langsom.

• CSS har et større bibliotek med attributter og stilarter end CSS

• CSS forbedrer sidens indlæsningstid.

• CSS har stor kompatibilitet og let vedligeholdelse.

• CSS giver nogle ydelsesproblemer

• CSS har ingen indbygget sikkerhed

Det anbefales i dag at udføre trinene direkte med CSS, men hvis du er mere HTML, kan du også have følgende muligheder.

1. Sådan centreres billedet på en webside ved hjælp af kun HTML

Selvom vi gør disse muligheder for at centrere billede med HTML, ser vi to måder at gøre det let på.

Centrer billede med HTML og center tagI denne enkle mulighed er det nok at pakke billedet ind med midteretiketterne

• "Src" -delen bruges til at angive billedets sti -adresse.

• Alt -delen giver webstedet oplysninger om billedets navn.

Derudover skal vi tildele en højde og bredde på billedet således:

  højde = ”250” ” 

Centerbillede med HTML og midtenMen med hensyn til billeder adskiller dette koncept af centrum, som vi har set, og det er bedre at bruge en midterjustering, så koden forbliver som følger:

  align = ”midten”> 

Hvis vi også tilføjer tekst, ville vi have denne kode:

Dette eksempel vil være at centrere et billede med tekst i HTML.  align = ”middle”> Nu er vi færdige med vores eksempeltekst.

Juster billedet til HTML med align -attributtenHvis vi vil justere et billede vandret, kan vi gøre det på samme måde som det, vi gør med tekst, det vil sige bruge justeringsattributten inden for etiketter

eller. Vi opretter koden, hvor attributten vises med billedtagget. Etiketten er en af ​​dem, der accepterer align -attributten, men brugen er anderledes.

Men som vi siger, etiketten Her ville vi lægge teksten, der ville fylde hele den højre del og pakke det billede, vi har placeret. Vi fortsætter med at udfylde teksten solvetic solvetic solvetic

Vi vil gøre det samme for at justere teksten og billedet til højre til venstre, men erstatte "venstre" med "højre".

Her ville vi lægge teksten, der ville fylde hele den højre del og pakke det billede, vi har placeret. Vi fortsætter med at udfylde teksten solvetic solvetic solvetic

Det anbefales ikke, fordi placerings- og stilaspekterne skal overlades til CSS og ikke bruges direkte i HTML. På denne måde vil vi have en kode, der er lettere at vedligeholde og ændre, men hvis du til enhver tid har brug for den til en lille og hurtig test, er det værd at vide.

2. Sådan centreres et billede på en webside med CSS

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

Vi har sat en klasse til billedet, kaldet centreret, og det vil hjælpe os med senere at style det i CSS. Nedenfor er koden til centrering af billedet.

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

Vi kan også bruge følgende kode til at justere et billede ved hjælp af CSS til vores webside:

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

Hvis dette ikke fungerer for dig i en browser, fordi tekstcentreringsmetoden bruges, skal vi angive browseren, at billedet er et element på blokniveau. På denne måde kan vi centrere det som om det var en anden blok. Vi vil bruge denne kode:

Vi får elementet til at fremstå som en blok, og vi giver det en automatisk margin (det er nok, at margen er automatisk på siderne, top og bund kan du lægge, hvad du vil). Husk, at hvis billedet fylder hele bredden, vil det ikke blive centreret.

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

3. Sådan centreres et billede på en webside ved hjælp af Bootstrap

Med denne populære ramme er alt enklere, vi skal bare sætte centerblokklassen i billedet.

Du bliver nødt til at downloade Bootstrap og linke det eller sætte dit CDN i vores HTML, for dette forlader jeg dit link herunder:

Vi kan se resultatet af at anvende disse koder med et billede herunder:

På denne måde kan vi både centrere vores billeder i HTML og bruge CSS og dermed lave æstetisk mere succesfulde webværker.