Kā centrēt attēlu sadaļā Div horizontāli?

• Kā centrēt attēlu sadaļā Div horizontāli?
• Margin Property
• Flexbox modulis
• Režģa skata izkārtojums
• Pozīcijas atribūts

Kā centrēt attēlu sadaļā Div horizontāli?

Izstrādātājs var izmantot piemales rekvizītu, Flexbox moduli, režģa skata izkārtojumu un atribūtu Position, lai horizontāli centrētu attēlu sadaļā div. Izpildiet tālāk sniegtos norādījumus, lai div tagā horizontāli līdzinātu attēlu centrā.

Pieņemsim, ka HTML failā ir div, kurā attēls tiek ievietots šādā veidā:

Attēla platums un augstums ir 50%, un tas ir “attēla” klases.

Margin Property izmantošana

Lietotāji var pievienot atstarpi ap HTML elementiem, izmantojot piemales rekvizītu. Tas piešķir rezervi atbilstoši brīvajai vietai pēc loga ekrāna izmēra maiņas. Piemēram, iestata piemales kreiso un labo vērtību uz automātisku, un displeja rekvizīts ir iestatīts uz bloķēšanu:

Pēc iepriekš minētā piemēra izpildes tīmekļa lapa izskatās šādi:

Iepriekš redzamajā izvadē tika parādīts, ka attēls tagad atrodas centrā.

Izmantojot Flexbox moduli

' flexbox ” ir modulis, kas satur pilnu rekvizītu kopu. Mūsu gadījumā atlasiet saknes elementu klasi un izmantojiet flex kā displeja rekvizīta vērtību. Iestatīt centru kā vērtību “ attaisnot-saturs ' un ' izlīdzināt vienumus ” īpašības:

Pēc koda izpildes tīmekļa lapa izskatās šādi:

Iepriekš redzamā izvade parāda, ka attēls tiek parādīts dimensijas centrā ar fona krāsu, kas iestatīta uz “zilu”.

Režģa skata izkārtojuma moduļa izmantošana

Režģa skata izkārtojumā ir 12 kolonnas, un kopējais platums ir iestatīts uz 100%, un tas katru elementu ievieto noteiktā tīmekļa lapas pozīcijā:

Iepriekš minētajā koda fragmentā displeja rekvizītam ir piešķirta vērtība “režģis”. Lai gan “vietas vienums” tiek izmantots kā saīsinājums rekvizītiem “attaisnot saturu” un “līdzināt vienumus”:

Izvade autentificē, ka attēls atrodas div centrā, izmantojot režģa metodi:

Izmantojot pozīcijas atribūtu

Iestatot saknes klases pozīciju uz relatīvo vērtību un attēla klasi uz absolūto vērtību. Attēlu var parādīt div daļas centrā:

Attēls tiek pārvietots pa kreisi no “50%” un pēc tam tiek pārveidots atpakaļ uz “-50%” pie X ass. Tas parāda attēlu dimensijas centrā horizontāli:

Tādā veidā attēlu var centrēt divdaļā horizontāli.

Secinājums

Lai horizontāli iestatītu attēlu div elementā, izmantojiet ' starpība ”, “ flex modulis ”, “ režģa izkārtojums ' un ' pozīciju ” īpašības. ' starpība ” kreisās un labās puses rekvizīts ir iestatīts uz auto. “Elastīgs modulis” un “režģa izkārtojums” iestata displeju attiecīgi elastīgu un režģi un izmanto “ novietojiet priekšmetu “ īpašums attēla centrēšanai. Pozīcijas rekvizīts iestata vērtību attiecībā pret saknes klasi un absolūto vērtību attēla klasei un izmanto rekvizītus “left” un “transform”. Šis emuārs ir veiksmīgi parādījis, kā horizontāli centrēt attēlus divdaļā.