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ą.
100 km/h iki mph
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.
sql pasirinkti kaip
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šbandykite dabar 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
bendras apsaugos gedimas
