Kako centrirati sliku na web stranici pomoću HTML-a?

ML Lapan

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>

Podijeli ovo sa prijateljima...

Pročitaj  Kako promijeniti jezik Windows 11 sistema?

By Lapan

ML Lapan je samouki računarski geek, freelancer za Wordpress i igrač iz Bosne i Hercegovine. Ima više od 15 godina iskustva u radu na računarima, internetu, web stranicama (većinom sa Wordpress stranicama).

Komentariši

Vaša email adresa neće biti objavljivana. Neophodna polja su označena sa *

Svi smo bliski

Problem, pitanje, hitan slučaj?

Ne ustručavajte se posjetiti centar za pomoć, mi vam možemo pomoći.

Copyright © 2019 ML Lapan.
All rights reserved

New Report

Close