Vaizdai yra svarbi bet kurios žiniatinklio programos dalis. Į žiniatinklio programą įtraukti daug vaizdų paprastai nerekomenduojama, tačiau svarbu vaizdus naudoti ten, kur jų reikia. CSS padeda mums valdyti vaizdų rodymą žiniatinklio programose.

Vaizdo lygiavimas reiškia, kad vaizdas yra centre, kairėje ir dešinėje. Mes galime naudoti plūdė turtas ir teksto lygiavimas vaizdų lygiavimo savybė.

Jei vaizdas yra div elemente, galime naudoti teksto lygiavimas savybė, skirta išlygiuoti vaizdą skirsnyje.

Pavyzdys

Šiame pavyzdyje vaizdus lygiuojame naudodami teksto lygiavimas nuosavybė. Vaizdai yra div elemente.

 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"> 

Išbandykite dabar

Išvestis

Plūdės nuosavybės naudojimas

CSS plūduriuojanti ypatybė yra padėties nustatymo ypatybė. Jis naudojamas elementui stumti į kairę arba dešinę, leidžiant kitiems elementams jį apvynioti. Paprastai jis naudojamas su vaizdais ir maketais.

Elementai plūduriuojami tik horizontaliai. Taigi galima tik plūduriuoti elementus į kairę arba dešinę, o ne aukštyn ar žemyn. Plūduriuojantis elementas gali būti perkeltas kiek įmanoma į kairę arba į dešinę. Paprasčiausiai tai reiškia, kad plūduriuojantis elementas gali būti rodomas kraštutinėje kairėje arba kraštutinėje dešinėje.

Pavyzdys

 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"> 

Išvestis