CSS padeda mums valdyti vaizdų rodymą žiniatinklio programose. Vaizdų ar tekstų centravimas yra įprasta CSS užduotis. Norėdami centruoti vaizdą, turime nustatyti reikšmę paraštė-kairė ir paraštė-dešinė į automatinis ir padarykite jį blokiniu elementu naudodami ekranas: blokas; nuosavybė.

Jei vaizdas yra div elemente, galime naudoti teksto lygiavimas: centre; ypatybė, skirta išlygiuoti vaizdą į skyrelio centrą.

The Sakoma, kad elementas yra eilutinis elementas, kurį galima lengvai centruoti pritaikius teksto lygiavimas: centre; CSS savybę pagrindiniam elementui, kuriame ji yra.

Pastaba: Vaizdo negalima centruoti, jei plotis nustatytas į 100 % (visas plotis).

Galime naudoti stenografijos savybę marža ir nustatykite automatinis norėdami sulygiuoti vaizdą centre, o ne naudoti paraštė-kairė ir paraštė-dešinė nuosavybė.

Pažiūrėkime, kaip centruoti vaizdą taikant teksto lygiavimas: centre; nuosavybė savo pirminiam elementui.

Pavyzdys

Šiame pavyzdyje vaizdus lygiuojame naudodami teksto lygiavimas: centre; nuosavybė. Vaizdas yra elemente div.

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

Išvestis

Pavyzdys

Dabar mes naudojame paraštė-kairė: automatinis; paraštė-dešinė: automatinis; ir ekranas: blokas; ypatybės, skirtos atvaizdui sulygiuoti su centru.

 body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; }  

Išbandykite dabar

Išvestis

---