Mulți dezvoltatori se luptă în timp ce lucrează cu imagini. Gestionarea sensibilității și a alinierii este deosebit de dificilă, mai ales centrarea unei imagini în mijlocul paginii.

Deci, în acest post, voi arăta câteva dintre cele mai comune moduri de a centra o imagine atât pe verticală, cât și pe orizontală, folosind diferite proprietăți CSS.

Am trecut peste poziția CSS și Afişa proprietăți în postarea mea anterioară. Dacă nu sunteți familiarizați cu aceste proprietăți, vă recomand să verificați aceste posturi înainte de a citi acest articol.

Iată o versiune video dacă doriți să o verificați:

Centrarea unei imagini pe orizontală

Să începem cu centrarea unei imagini pe orizontală folosind 3 proprietăți CSS diferite.

Aliniere text

Primul mod de a centra o imagine pe orizontală este utilizarea text-align proprietate. Cu toate acestea, această metodă funcționează numai dacă imaginea se află într-un container la nivel de bloc, cum ar fi a <div>:

<style>
  div {
    text-align: center;
  }
</style>

<div>
  <img src="https://www.freecodecamp.org/news/how-to-center-an-image-in-css/your-image.jpg">
</div>

Marja: Auto

O altă modalitate de a centra o imagine este folosind margin: auto proprietate (pentru marja stângă și marja dreaptă).

Cu toate acestea, folosind margin: auto singur nu va funcționa pentru imagini. Dacă trebuie să utilizați margin: auto, trebuie să utilizați și 2 proprietăți suplimentare.

Proprietatea margin-auto nu are efecte asupra elementelor la nivel de linie. Din moment ce <img> tag-ul este un element inline, trebuie mai întâi să îl convertim la un element la nivel de bloc:

img {
  margin: auto;
  display: block;
}

În al doilea rând, trebuie să definim și o lățime. Deci, marginile din stânga și din dreapta pot ocupa restul spațiului gol și se pot alinia automat, ceea ce face truc (cu excepția cazului în care îi dăm o lățime de 100%):

img {
  width: 60%;
  margin: auto;
  display: block;
}

Afișaj: Flex

A treia modalitate de a centra o imagine pe orizontală este folosind display: flex. La fel cum am folosit text-align proprietate pentru un container, folosim display: flex si pentru un container.

Cu toate acestea, folosind display: flex singur nu va fi suficient. Containerul trebuie să aibă și o proprietate suplimentară numită justify-content:

div {
  display: flex;
  justify-content: center;
}

img {
  width: 60%;
}

justify-content proprietatea funcționează împreună cu display: flex, pe care îl putem folosi pentru a centra imaginea pe orizontală.

În cele din urmă, lățimea imaginii trebuie să fie mai mică decât lățimea containerului, în caz contrar, ocupă 100% din spațiu și apoi nu o putem centra.

Important: display: flex proprietatea nu este acceptată în versiunile mai vechi ale browserelor. Vezi aici pentru mai multe detalii.

Centrarea unei imagini pe verticală

Afișaj: Flex

Pentru alinierea verticală, utilizând display: flex este din nou foarte util.

Luați în considerare un caz în care containerul nostru are o înălțime de 800 px, dar înălțimea imaginii este de numai 500 px:

div {
  display: flex;
  justify-content: center;
  height: 800px;
}

img {
  width: 60%;
  height: 500px;
}

Acum, în acest caz, adăugând o singură linie de cod în container, align-items: center, face truc:

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
}

align-items proprietatea poate poziționa elementele pe verticală dacă este folosită împreună cu display: flex.

Poziție: Proprietăți absolute și de transformare

O altă metodă pentru alinierea verticală este folosirea position și transform proprietăți împreună. Acesta este un pic complicat, așa că hai să-l facem pas cu pas.

Pasul 1: definiți poziția absolută

În primul rând, schimbăm comportamentul de poziționare a imaginii din static la absolute:

div {
  height: 800px;
  position: relative;
  background: red;
}

img {
  width: 80%;
  position: absolute;
}

De asemenea, ar trebui să fie în interiorul unui container relativ poziționat, așa că adăugăm position: relative la containerul său div.

Pasul 2: Definiți proprietățile din partea de sus și din stânga

În al doilea rând, definim proprietățile de sus și stânga pentru imagine și le setăm la 50%. Aceasta va muta punctul de pornire (sus-stânga) al imaginii în centrul containerului:

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
}

Pasul 3: Definiți proprietatea Transform

Dar al doilea pas a mutat imaginea parțial în afara containerului său. Deci, trebuie să-l readucem înăuntru.

Definirea a transform proprietate și adăugarea -50% la axele X și Y face trucul:

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Există alte modalități de a centra lucrurile pe orizontală și verticală, dar le-am explicat pe cele mai frecvente. Sper că această postare v-a ajutat să înțelegeți cum să vă aliniați imaginile în centrul paginii.

Dacă doriți să aflați mai multe despre dezvoltarea web, nu ezitați să mă vizitați Canalul canalului YouTube pentru mai mult.

Mulțumesc că ai citit!