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

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

---