Cum se centrează o imagine în HTML

Autor: Mark Sanchez
Data Creației: 6 Ianuarie 2021
Data Actualizării: 1 Iulie 2024
Anonim
How to Center an Image Horizontally (CSS & HTML Tutorial)
Video: How to Center an Image Horizontally (CSS & HTML Tutorial)

Conţinut

Atribut alinia etichetă html> a fost învechit de la HTML5. În timp ce acest atribut funcționează în continuare în majoritatea browserelor web, este recomandat să aliniați imaginile folosind Foi de stil în cascadă (CSS). În acest articol, vă vom arăta cum să centrați imaginile folosind CSS și eticheta depreciată. alinia.

Pași

Metoda 1 din 2: CSS (recomandat)

  1. 1 Adăugați cod HTML pentru imagine. Veți utiliza foi de stil în cascadă (CSS) pentru a alinia imaginea, dar va trebui să o plasați pe pagină folosind HTML. Următorul este un exemplu de utilizare a etichetei img> pentru a insera o imagine în cod:

    img src = "dog.webp" alt = "aceasta este imaginea unui câine">

    • In loc de câine.webp înlocuiți numele fișierului imagine și după „alt” introduceți descrierea imaginii. Sens centru pentru „clasă” nu se schimbă, deoarece veți crea o clasă CSS cu acel nume.
  2. 2 Găsiți codul CSS. Dacă site-ul dvs. are un fișier CSS separat, deschideți-l. Dacă nu, CSS este cel mai probabil în partea de sus a fișierului HTML, în interiorul etichetelor cap>... Derulați până în partea de sus a fișierului pentru a găsi etichete stil> / stil>.
    • Dacă etichete stil> / stil> nu, adaugă-le. Citiți acest articol pentru mai multe informații.
  3. 3 Adăugați CSS pentru a alinia imaginea. În loc de „50%”, puteți introduce o altă valoare pentru a face imaginea să apară pe pagină. Nu veți putea centra imaginea cu valoarea „100%”, deci acest număr ar trebui să fie diferit.

    .center {display: block; margine-stânga: auto; marginea-dreapta: auto; lățime: 50%; }

  4. 4 Salvați modificările. Salvați fișierul HTML și fișierul CSS (dacă există). Aceasta va centra imaginea.
    • De asemenea, în interiorul etichetelor img> poate adauga pentru a centra alte imagini.

Metoda 2 din 2: Atributul „align” în HTML

  1. 1 Creați un nou paragraf. Deși această metodă de centrare a imaginilor a fost depreciată, funcționează în continuare în multe browsere. Cu toate acestea, vă recomandăm să utilizați CSS pentru a menține site-ul funcțional atunci când browserele nu mai acceptă atributul specificat. Amintiți-vă că atributul alinia va centra imaginea numai în interiorul elementului care o înconjoară (de exemplu, în interiorul etichetelor p> / p> sau div> / div>). De exemplu, în fișierul HTML, vom crea un nou paragraf adăugând p> pe o linie separată.
  2. 2 Adăugați cod HTML pentru imagine. Introduceți următorul cod după etichetă p>... Folosiți acest exemplu ca ghid:

    p> img src = "dog.webp" alt = "picture" align = "middle">

    • In loc de câine.webp înlocuiți numele fișierului imagine și după „alt” introduceți descrierea imaginii.
    • Atributul din mijloc îi spune browserului să afișeze imaginea în centrul paginii.
  3. 3 Închideți eticheta de paragraf. Pentru a face acest lucru, adăugați / p> după eticheta de imagine. Codul terminat ar trebui să arate cam așa:

    p> img src = "dog.webp" alt = "picture" align = "middle"> / p>

  4. 4 Salvați modificările. Aceasta va centra imaginea.