Autor:
Mark Sanchez
Datum Stvaranja:
6 Siječanj 2021
Datum Ažuriranja:
1 Srpanj 2024
![How to Center an Image Horizontally (CSS & HTML Tutorial)](https://i.ytimg.com/vi/jiA7BRTL1A0/hqdefault.jpg)
Sadržaj
Atribut uskladiti označiti html> je zastario od HTML5. Iako ovaj atribut još uvijek radi u većini web preglednika, preporučuje se da slike poravnate pomoću kaskadnih stilskih tablica (CSS). U ovom ćemo vam članku pokazati kako centrirati slike pomoću CSS -a i zastarjele oznake. uskladiti.
Koraci
Metoda 1 od 2: CSS (preporučeno)
1 Dodajte HTML kôd za sliku. Za poravnavanje slike upotrijebit ćete kaskadne tablice stilova (CSS), ali ćete je morati postaviti na stranicu pomoću HTML -a. Slijedi primjer korištenja oznake img> da biste umetnuli sliku u svoj kôd:
img src = "dog.webp" alt = "ovo je slika psa">
- Umjesto pas.webp zamijenite naziv slikovne datoteke, a nakon "alt" unesite opis slike. Značenje centar za "class" ne mijenjajte, jer ćete stvoriti CSS klasu s tim imenom.
2 Pronađite CSS kod. Ako vaša web lokacija ima zasebnu CSS datoteku, otvorite je. Ako nije, CSS se najvjerojatnije nalazi na vrhu HTML datoteke, unutar oznaka glava>... Pomaknite se do vrha datoteke da biste pronašli oznake stil> / stil>.
- Ako oznake stil> / stil> ne, dodaj ih. Za više informacija pročitajte ovaj članak.
3 Dodajte CSS za poravnavanje slike. Umjesto "50%", možete unijeti drugu vrijednost kako bi se slika pojavila na stranici. Nećete moći centrirati sliku s vrijednošću "100%", pa bi taj broj trebao biti drugačiji.
.center {display: block; margin-left: auto; margin-right: auto; širina: 50%; }
4 Spremite promjene. Spremite HTML datoteku i CSS datoteku (ako ih ima). To će sliku centrirati.
- Također unutar oznaka img> može dodati za centriranje drugih slika.
Metoda 2 od 2: Atribut "align" u HTML -u
1 Napravite novi odlomak. Iako je ova metoda centriranja slika zastarjela, još uvijek radi u mnogim preglednicima. Međutim, preporučujemo korištenje CSS -a za održavanje funkcionalnosti web stranice kada preglednici prestanu podržavati navedeni atribut. Zapamtite da je atribut uskladiti će sliku centrirati samo unutar elementa koji je okružuje (na primjer, unutar oznaka p> / p> ili div> / div>). Na primjer, u HTML datoteci izradit ćemo novi odlomak dodavanjem p> na posebnoj liniji.
2 Dodajte HTML kôd za sliku. Unesite sljedeći kôd nakon oznake p>... Koristite ovaj primjer kao vodič:
p> img src = "dog.webp" alt = "picture" align = "middle">
- Umjesto pas.webp zamijenite naziv slikovne datoteke, a nakon "alt" unesite opis slike.
- Srednji atribut govori pregledniku da prikaže sliku u sredini stranice.
3 Zatvorite oznaku odlomka. Da biste to učinili, dodajte / p> nakon oznake slike. Gotov kôd trebao bi izgledati otprilike ovako:
p> img src = "dog.webp" alt = "picture" align = "middle"> / p>
4 Spremite promjene. To će sliku centrirati.