Kako centrirati sliku na web-stranicu pomoću HTML-a

Iako to nije nužno teško, centriranje slika na web-stranicama može biti više uključeno nego što mislite. Glavni razlog je taj je inline element, tako da se ponaša drugačije od elemenata na razini bloka. Neki pristupi koriste HTML; drugi koriste CSS, a neki se smatraju "pravilnijima" od drugih jer nisu zastarjeli. Za nastavak odaberite metodu s popisa u nastavku i slijedite upute.

Za podršku u HTML5, trebali biste koristiti atribut stila s vrijednošću text-align: center unutar elementa na razini bloka; kao što je a oznake.

Primjer HTML koda

Savjet: Dodavanje inline stila kao što je gore prikazano treba biti učinjeno samo jednom, ako trebate usmjeriti više slika, trebali biste koristiti donji prijedlog i stvoriti CSS klasu kako biste smanjili redundantni kôd i ubrzali web stranicu.

Primjer centra za slike pomoću gornjeg koda

Pretvaranje u element na razini bloka

Jedan od načina na koji možete ispravno centrirati slike je definiranje element kao element na razini bloka. Da biste to učinili, dodajte pravilo glavi stranice (prikazano u sljedećem primjeru) ili povezanu vanjsku CSS datoteku.

Primjer HTML koda 

 .centerImage {text-align: centar; Prikaz: blok; }

S ovim kodom možete primijeniti classImage klasu na oznaku bez potrebe da je stavite u element na razini bloka. Ova metoda radi za više slika.

Primjer središnjeg koda slike

Korištenje oznaka

Sliku možete centrirati tako da priložite u oznaci oznake. Ova akcija usredotočuje tu, i samo to, sliku na web stranici. Valja napomenuti da je ova metoda zastarjela u HTML5 i neće uvijek raditi u svim preglednicima koji idu naprijed. Ovu metodu preporučujemo samo ako nijedan od gore navedenih prijedloga ne funkcionira na mjestu na kojem pokušavate centrirati sliku.

Primjer HTML koda