Kako centrirati sliko na spletni strani z uporabo HTML-ja



HTML

Čeprav to ni nujno težko, centriranje slik na vašem spletne strani morda bolj vključeni, kot si mislite. Glavni razlog je, da oznaka je vstavljeni element, zato se obnaša drugače kot elementi na ravni bloka. Nekateri pristopi uporabljajo HTML; drugi uporabljajo CSS, nekateri pa veljajo za bolj 'primerne' od drugih, ker niso zastareli. Za nadaljevanje izberite metodo s spodnjega seznama in sledite navodilom.

Uporaba atributa slog

Za podporo v HTML5 , uporabite slog atribut z vrednostjo poravnava besedila: sredina znotraj elementa na ravni bloka; kot so oznake.

kako shranim video iz facebooka v računalnik

Primer kode HTML



Logotip

Opomba

Postavitev zgornje kode v div lahko vpliva na to, kako se prikaže na zaslonu. Če na primer dodate kodo v div z desnim robom, spremenite lokacijo centrirane slike.

Nasvet



Dodajanje v vrsti slog, kot je prikazano zgoraj, je v idealnem primeru treba v dokumentu narediti samo enkrat. Če želite centrirati več slik, uporabite spodnji predlog in ustvarite razred CSS, ki bo pomagal zmanjšati odvečno kodo in pospešil vašo spletno stran.

Primer središča slike z zgornjo kodo

Logotip Computer Hope

natisnite seznam datotek v mapi

Pretvorba v element na ravni bloka

Eden od načinov, kako lahko pravilno centrirate slike, je, da določite element kot element na ravni bloka. Če želite to narediti, dodajte pravilo v glavo strani (prikazano v naslednjem primeru) ali povezano zunanjo stran CSS mapa.

Primer kode HTML

 .centerImage { text-align:center; display:block; } 

S to kodo lahko uporabite centerImage razred do an tag, ne da bi ga bilo treba ugnezditi v element na ravni bloka. Ta metoda deluje za več slik.

Primer kode slike na sredini

 CH Logo

Uporaba oznake

Sliko lahko centrirate tako, da jo pripnete oznako v oznake. Ta akcija osredotoča to in samo to sliko na spletni strani. Upoštevati je treba, da je ta metoda v HTML5 zastarela in ne bo vedno delovala pri vseh brskalniki gredo naprej. To metodo priporočamo le, če noben od zgoraj omenjenih predlogov ne deluje, kadar poskušate sliko centrirati.

kako odpreti ohišje računalnika

Primer kode HTML

 what image shows