Imaginile sunt o parte importantă a oricărei aplicații web. Includerea multor imagini într-o aplicație web nu este în general recomandată, dar este important să folosiți imaginile oriunde sunt necesare. CSS ne ajută să controlăm afișarea imaginilor în aplicațiile web.

ankita dave

Alinierea unei imagini înseamnă poziționarea imaginii în centru, stânga și dreapta. Putem folosi pluti proprietatea si aliniere text proprietate pentru alinierea imaginilor.

Dacă imaginea este în elementul div, atunci putem folosi aliniere text proprietate pentru alinierea imaginii în div.

Exemplu

În acest exemplu, aliniem imaginile utilizând aliniere text proprietate. Imaginile sunt în elementul div.

 div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> 

Testează-l acum

Ieșire

Folosind proprietatea float

Proprietatea float CSS este o proprietate de poziționare. Este folosit pentru a împinge un element la stânga sau la dreapta, permițând altor elemente să se înfășoare în jurul lui. Este folosit în general cu imagini și machete.

Elementele sunt plutite numai pe orizontală. Deci este posibil doar să plutiți elemente la stânga sau la dreapta, nu în sus sau în jos. Un element plutit poate fi mutat cât mai mult posibil la stânga sau la dreapta. Pur și simplu, înseamnă că un element plutit se poate afișa la extrema stângă sau la extrema dreaptă.

Exemplu

 img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> 

Ieșire