Iako nije nemoguće, centriranje slika na vašim web stranicama može biti izazovnije nego što vjerujete.
Budući da je <img> tag ugrađeni element, djeluje drugačije od elemenata na razini bloka.
Neke tehnike koriste HTML, dok druge koriste CSS, a neke se smatraju “ispravnima” u smislu da nisu zastarjele.
Za početak odaberite tehniku s donje liste i slijedite korake.
Korištenje atributa stila
Koristite svojstvo stila sa vrijednošću text-align:center unutar elementa na nivou bloka, kao što je oznaka <p></p> za podršku HTML5.
<p style="text-align:center;"><img src="https://www.domena.com/slika.png" alt="Slika"></p>Pretvaranje u element na razini bloka
Definiranje <img> elementa kao elementa na nivou bloka jedan je od pristupa pravilnom centriranju slika.
Dodajte pravilo na vrh stranice (kao što je prikazano u donjem primjeru) ili povezanu vanjsku CSS datoteku da biste to učinili.
<style type="text/css">
.centrirajSliku
{
text-align:center;
display:block;
}
</style>Klasu centrirajSliku možete primijeniti na <img> oznaku, a da je ne ugnijezdite u element na razini bloka koristeći ovaj kôd.
Ovaj pristup se može koristiti s nekoliko slika.
<img src="https://www.domena.com/slika.png" class="centrirajSliku" alt="Slika" height="250" width="120">Korištenje oznake <center>
Okruživanjem <img> elementa sa <center></center> oznakama možete fotografiju centrirati.
Ova akcija fokusira se samo na jednu sliku na web stranici.
Vrijedi napomenuti da je ova tehnika zastarjela u HTML5 i možda neće funkcionirati u svim preglednicima u budućnosti.
Ovaj pristup treba koristiti samo ako nijedna od drugih gore navedenih metoda ne uspije centrirati sliku.
<center><img src="https://www.domena.com/slika.png" alt="Slika" height="250" width="120"></center>