Cum de a centra imaginea în HTML (cu ilustrații)

Atribut Alinia Etichetă considerat capăt cu apariția HTML5. Deși acest atribut funcționează încă în majoritatea browserelor web, se recomandă alinierea imaginilor utilizând mese de stil cascadă (CSS). În acest articol vă vom spune cum să centrați imaginile cu etichetă CSS și depășită Alinia.

Pași

Metoda 1 din 2:

Css (recomandat)

unu. Adăugați codul HTML pentru imagine. Pentru a alinia imaginea, veți folosi foi de stil cascading (CSS), dar va trebui să o introducă pe pagină utilizând HTML. Următorul este un exemplu de utilizare a etichetei Pentru a introduce imaginea în cod:

  Src ="Câine.JPG" alt ="Aceasta este o imagine a unui câine" clasa ="Centru">

In loc de Câine.JPG Submold 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 acest nume.

2. Găsiți codul CSS. Dacă există un fișier CSS separat pe site, deschideți-l. Dacă nu, codul CSS este cel mai probabil localizat în partea de sus a fișierului HTML din interiorul etichetelor . Defilați în partea de sus a fișierului pentru a găsi etichete .

Dacă Tagov Nu, adăugați-le. Citit Acest articol, Pentru a obține mai multe informații.

3. Adăugați la codul CSS pentru a alinia imaginea. În loc de "50%", puteți introduce o altă valoare, astfel încât imaginea să apară pe pagină. Cerater Imaginea cu valoarea "100%" nu va funcționa, astfel încât acest număr ar trebui să fie diferit.

.Center {Afișaj: Blocare-margine-stânga: Auto-margine-dreapta: Auto-lățime: 50% -}

4. Salvați modificările făcute. Salvați fișierul HTML și fișierul CSS (dacă este). Deci, centrați imaginea.

De asemenea, în interiorul tagov poate adauga clasa ="Centru", Pentru a șterge alte imagini.

Metoda 2 din 2:

Atributul "align" în HTML

unu. Creați un nou paragraf. Deși această metodă de centrare a imaginilor este considerată depășită, încă funcționează în multe browsere. Cu toate acestea, vă recomandăm să utilizați CSS pentru a funcționa când browserele opresc menținerea atributului specificat. Amintiți-vă că atributul Alinia a centrat imaginea numai în interiorul elementului care îl înconjoară (de exemplu, în interiorul etichetelor sau ). Ca exemplu într-un fișier HTML, vom crea un nou paragraf prin adăugarea Pe o linie separată.

2. Adăugați codul HTML pentru imagine. Introduceți următorul cod după etichetă . Utilizați acest exemplu ca ghid:


 Src ="Câine.JPG" alt ="imagine" align ="Mijloc">

In loc de Câine.JPG Submold numele fișierului imagine și după "ALT" Introduceți descrierea imaginii.

Atributul "Middle" informează browserul că imaginea trebuie afișată în centrul paginii.

3. Închideți eticheta de paragraf. Pentru a face acest add După arta clipului de etichete. Codul finit ar trebui să arate astfel:


 Src ="Câine.JPG" alt ="imagine" align ="Mijloc">

4. Salvați modificările făcute. Deci, centrați imaginea.