Kako sliku centrirati u HTML -u

Autor: Mark Sanchez
Datum Stvaranja: 6 Siječanj 2021
Datum Ažuriranja: 1 Srpanj 2024
Anonim
How to Center an Image Horizontally (CSS & HTML Tutorial)
Video: How to Center an Image Horizontally (CSS & HTML Tutorial)

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. 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. 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. 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. 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. 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. 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. 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. 4 Spremite promjene. To će sliku centrirati.