Kako centrirati sliku pomoću HTML -a i CSS -a

U ovom ćemo vodiču vidjeti kako centrirati slike pomoću HTML -a i CSS -a. Nije nimalo komplicirano i trebat će nam često za naše web stranice. Vidjet ćemo neke opcije, jednu da koristimo samo HTML, drugu kroz upotrebu CSS -a i na kraju koristeći Bootstrap.

HTML i CSS dva su vodeća jezika za skriptiranje web stranica u svijetu izrade web stranica i aplikacija. Oba jezika zajedno rade na ovom zadatku. Dok HTML daje strukturu web stranicama, CSS se brine o stilu i vizualnom ili slušnom dijelu. HTML nudi oznake koje obuhvaćaju različite elemente stranice i na taj ćemo način zajedno s atributima stvoriti kostur naše web stranice.

Razlike između HTML -a i CSS -aUkratko, razlike između HTML -a i CSS -a možemo vidjeti na sljedeći način:

• HTML je lakše naučiti i implementirati

• HTML Dostupan na više jezika

• HTML je lagan i učinkovit

• HTML ima ograničenu sigurnost

• HTML je donekle spor.

• CSS ima veću biblioteku atributa i stilova od CSS -a

• CSS poboljšava vrijeme učitavanja stranice.

• CSS ima izvrsnu kompatibilnost i jednostavno održavanje.

• CSS ima problema s performansama

• CSS nema ugrađenu sigurnost

Danas se preporučuje izvođenje koraka izravno s CSS -om, ali ako više volite HTML, možete imati i sljedeće opcije.

1. Kako sliku centrirati na web stranici koristeći samo HTML

Premda ćemo ovim mogućnostima centrirati sliku pomoću HTML -a, vidjet ćemo dva načina za to.

Središnja slika s HTML -om i središnjom oznakomU ovoj jednostavnoj opciji dovoljno je omotati sliku središnjim oznakama

• Dio "src" koristi se za označavanje adrese puta slike.

• Alt dio daje informacije web stranici o imenu slike.

Osim toga, moramo dodijeliti visinu i širinu slike ovako:

  visina = ”250” ” 

Središnja slika s HTML -om i sredinomNo, što se tiče slika, ovaj koncept centra koji smo vidjeli razlikuje se i bolje je koristiti srednje poravnanje, pa kôd ostaje sljedeći:

  align = ”middle”> 

Ako dodamo i tekst, imali bismo ovaj kod:

Ovaj primjer će biti centriranje slike s tekstom u HTML -u.  align = ”middle”> Sada dovršimo naš ogledni tekst.

Poravnajte sliku s HTML -om s atributom poravnanjaAko želimo vodoravno poravnati sliku, možemo to učiniti na sličan način kao što radimo s tekstom, odnosno upotrijebiti atribut poravnanja unutar oznaka

ili. Izradit ćemo kôd gdje se atribut pojavljuje s oznakom slike. Oznaka je jedna od onih koja prihvaća atribut align, ali je upotreba drugačija.

Ali kako mi kažemo, oznaka Ovdje bismo stavili tekst koji bi ispunio cijeli desni dio i zamotali sliku koju smo postavili. Nastavljamo s popunjavanjem tekstualno rješenjskog rješavanja

Učinit ćemo isto za poravnavanje teksta i slike s desne strane s lijeve strane, ali zamijenimo "lijevo" sa "desno".

Ovdje bismo stavili tekst koji bi ispunio cijeli desni dio i zamotali sliku koju smo postavili. Nastavljamo s popunjavanjem tekstualno rješenjskog rješavanja

Ne preporučuje se jer aspekte položaja i stila treba prepustiti CSS -u, a ne koristiti izravno u HTML -u. Na ovaj način imat ćemo kôd koji je lakše održavati i mijenjati, ali ako vam u bilo kojem trenutku zatreba za mali i brzi test, vrijedno je znati.

2. Kako centrirati sliku na web stranici pomoću CSS -a

Ovdje ćemo imati HTML kod i CSS kod. Počinjemo gledajući HTML.

Slici smo stavili klasu koja se zove centrirana, što će nam pomoći da je kasnije stiliziramo u CSS. Ispod je kôd za centriranje slike.

 .center {margina: 10px auto; prikaz: blok; } 

Također možemo upotrijebiti sljedeći kôd za poravnavanje slike pomoću CSS -a za našu web stranicu:

 .center {margin-left: auto; margin-right: auto; }

Ako vam to ne uspije u pregledniku jer se koristi metoda centriranja teksta, moramo pregledniku naznačiti da je slika element na razini bloka. Na ovaj način možemo ga centrirati kao da je to još jedan blok. Koristit ćemo ovaj kod:

Učinimo da se element prikaže kao blok, te mu damo automatsku marginu (dovoljno je da je margina automatska sa strane, gore i dolje možete staviti što god želite). Imajte na umu da ako slika zauzima cijelu širinu, neće biti centrirana.

 img.center {display: block; margin-left: auto; margin-right: auto; }

3. Kako centrirati sliku na web stranicu pomoću Bootstrapa

S ovim popularnim okvirom sve je jednostavnije, samo moramo staviti klasu središnjeg bloka u sliku.

Morat ćete preuzeti Bootstrap i povezati ga ili staviti svoj CDN u naš HTML, za to ostavljam vašu vezu ispod:

Rezultat primjene ovih kodova možemo vidjeti sa slikom ispod:

Na ovaj način možemo i centrirati svoje slike u HTML -u i pomoću CSS -a i tako učiniti estetski uspješnije web radove.