CSS palīdz mums kontrolēt attēlu parādīšanu tīmekļa lietojumprogrammās. Attēlu vai tekstu centrēšana ir izplatīts CSS uzdevums. Lai centrētu attēlu, mums ir jāiestata vērtība piemale-kreisais un mala-labais uz auto un padariet to par bloka elementu, izmantojot displejs: bloks; īpašums.
Ja attēls atrodas div elementā, mēs varam izmantot teksta līdzināšana: centrs; rekvizīts attēla līdzināšanai sadalījuma centrā.
The tiek uzskatīts, ka elements ir iekļauts elements, kuru var viegli centrēt, izmantojot teksta līdzināšana: centrs; CSS īpašums vecākajam elementam, kas to satur.
Piezīme: attēlu nevar centrēt, ja platums ir iestatīts uz 100% (pilns platums).
Mēs varam izmantot stenogrāfijas īpašību starpība un iestatiet to uz auto lai izlīdzinātu attēlu centrā, nevis izmantotu piemale-kreisais un mala-labais īpašums.
Apskatīsim, kā centrēt attēlu, pielietojot teksta līdzināšana: centrs; īpašums tā vecāka elementam.
Piemērs
Šajā piemērā mēs izlīdzinām attēlus, izmantojot teksta līdzināšana: centrs; īpašums. Attēls atrodas div elementā.
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"> Izmēģiniet to tagad Izvade
Piemērs
Tagad mēs izmantojam piemale-kreisais: auto; mala-labā: auto; un displejs: bloks; īpašības attēla līdzināšanai centrā.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Izmēģiniet to tagad Izvade
