Cum să centrați imaginile cu CSS

Doriți să centrați o imagine folosind CSS? Problemele de aliniere sunt adesea o sursă de frustrare pentru designerii web. Din fericire, centrarea unei imagini cu CSS este foarte simplă și vă vom arăta cum să faceți acest lucru în câțiva pași.

Ca și în cazul multor sarcini de web design, există mai multe modalități de a realiza acest lucru! Vom acoperi trei metode majore în acest articol. Să începem!

1. Utilizați proprietatea marginii

Setarea marginea proprietatea este una dintre cele mai simple moduri de a centra orizontal o imagine folosind CSS. Marjele sunt o componentă de bază a modelul casetei CSS.

În primul rând, va trebui să transformați elementul de imagine dintr-un element inline într-unul bloc. Elementele HTML la nivel de bloc ocupă toată lățimea elementului lor părinte și sunt capabile să ocupe întreaga lățime a unei pagini.

Făcând un element de imagine un element bloc, apoi îi puteți manipula poziția ajustând marginile orizontale. De asemenea, va trebui să setați o lățime specifică pentru imagine, pentru a determina exact cât spațiu ocupă imaginea pe pagină.

Indiferent de lățimea pe care o alegeți, imaginea va trebui să aibă margini egale din stânga și din dreapta. Puteți realiza acest lucru cu ușurință dând proprietății marjei o valoare de auto:

img.center {
 afisare: bloc;
 margine-stânga: auto;
 margine-dreapta: auto;
 latime: 800px;
}

2. Utilizați Flexbox Layout

Această metodă necesită punerea imaginii într-un element la nivel de bloc, de obicei a div:

Odată ce ați făcut acest lucru, puteți adăuga câteva proprietăți pentru a-i manipula aspectul. Veți folosi două proprietăți CSS.

Primul este afişa proprietate cu valoarea sa setată la contracta. Poti de asemenea utilizați flex pentru a alinia elementele în HTML. A doua proprietate pe care o vei adăuga la div-ul tău este justificare-conținut, cu valoarea setată la centru ca astfel:

div.center {
 display: flex;
 justificare-conținut: centru;
}

3. Utilizați elementul central depreciat

Cele mai bune practici web vă încurajează să utilizați CSS pentru stil și HTML pentru semantică, așa că nu ar trebui să utilizați această metodă HTML. The centru eticheta, care își centrează conținutul pe orizontală, este depreciată în HTML5.

Dar dacă trebuie, iată cum să centrați o imagine folosind numai HTML. Pur și simplu înfășurați img etichetă într-o etichetă centrală astfel:

Iată cum să vă aliniați imaginile în HTML

V-am arătat trei metode diferite, ușor de utilizat, de a vă centra imaginile într-un document HTML. Încearcă-le pe toate și alege-l pe cel care ți se potrivește cel mai bine. Evită a treia metodă, cu excepția cazului în care nu ai absolut de ales!

Un lucru de reținut este că există mai multe moduri de a centra imaginile folosind HTML și CSS. O metodă comună care funcționează atât pentru text, cât și pentru imaginile inline este aliniere text proprietate.

Cum să centrați alinierea textului în pagina dvs. web cu CSS

Citiți în continuare

Despre autor