Internet Explorer ay isang problema na sumisira sa buhay ng karamihan sa mga web developer. Mahigit sa 60% ng oras ng pag-unlad ang maaaring gugulin sa paglutas ng mga partikular na problemang ito, na hindi epektibong paggamit oras. Sa artikulong ito ay pag-uusapan ko ang tungkol sa pinakasikat na mga bug at hindi pagkakapare-pareho sa pagpoposisyon, pati na rin kung paano mas madaling malutas ang mga problemang ito.

1. Pagpoposisyon sa gitna.

Ang bawat web developer, kapag naglalagay ng isang website, ay nahaharap sa pangangailangang ihanay ang isang elemento sa gitna. Ang pinakasimpleng at sikat na paraan- isulat ang margin: auto; . Nagbibigay-daan sa iyo ang paraang ito na isentro ang isang elemento anuman ang resolution ng screen. Gayunpaman, ang pamamaraang ito ay hindi gumagana sa IE6.

Isaalang-alang ang sumusunod na code:

#container ( border: solid 1px #000; background: #777; width: 400px; height: 160px; margin: 30px 0 0 30px; ) #element ( background: #95CFEF; border: solid 1px #36F; width: 300px; taas: 100px; margin: 30px auto)

Inaasahang resulta:

Gayunpaman, ipapakita sa iyo ng Internet Explorer ang sumusunod:

Nangyayari ito dahil hindi nakikilala ng IE6 ang auto value na nakatakda sa margin property. Sa kabutihang palad, ito ay madaling ayusin.

Ayusin natin.

Ang pinakasimpleng at napatunayang pamamaraan Upang isentro ang isang elemento sa IE6 ay ang pagsulat ng text-alignL center sa parent na elemento at ilapat ang tex-align: pakaliwa dito mismo upang ang mga nilalaman nito ay nakahanay nang tama.

#container( border: solid 1px #000; background: #777; width: 400px; height: 160px; margin: 30px 0 0 30px; text-align: center;) #element( background: #95CFEF; hangganan: solid 1px #36F; lapad: 300px; taas: 100px; margin: 30px 0; text-align: kaliwa; }

2. Hakbang epekto

Halos bawat developer ay gumagamit ng mga listahan upang lumikha ng nabigasyon. Karaniwan, ang isang elemento ng lalagyan ay nilikha, ang mga kinakailangang link ay nasa loob nito, at pagkatapos ay ang float property ay nakatakda sa kinakailangang direksyon. Isaalang-alang ang sumusunod na halimbawa:

Ul (list-style: none; ) ul li a (display: block; width: 130px; height: 30px; text-align: center; color: #fff; float: left; background: #95CFEF; border: solid 1px # 36F;margin: 30px 5px)

Nakukuha namin ang sumusunod:

Gayunpaman, ipapakita sa amin ng IE:

Hindi masyadong magiliw na nabigasyon, hindi ba? Gayunpaman, mayroong 2 paraan upang ayusin ang hindi kanais-nais na pag-uugali na ito.

1st method

Ang pinakasimpleng paraan ay ang itakda ang float property hindi sa mga link, ngunit sa mga elemento ng li list.

Ul li ( lumutang: kaliwa; )

ika-2 paraan

Ang pangalawang paraan ay ilapat ang display: inline na property sa li element. Bukod pa rito, inaayos namin ang isang bug na may double margin, na inilalarawan sa ibaba.

Ul li (display: inline)

3. Dobleng indentation para sa mga elementong may set ng float property

Napakadaling kopyahin ang error na ito. Itakda ang elemento upang lumutang: pakaliwa at pagkatapos ay padding. Bilang resulta, nakakakuha kami ng indentation nang dalawang beses na mas malaki kaysa sa tinukoy.

Tingnan natin ang isang halimbawa:

#element( background: #95CFEF; lapad: 300px; taas: 100px; float: left; margin: 30px 0 0 30px; border: solid 1px #36F; )

Inaasahang resulta:

Gayunpaman, sa IE6 makikita natin ang sumusunod:

Inaayos namin

Ito ay itinatama sa parehong paraan tulad ng problema sa epekto ng mga hakbang. Ibig sabihin, itinakda namin ang display: inline na property para sa elemento. Ang aming code ay magbabago tulad nito:

#element( background: #95CFEF; lapad: 300px; taas: 100px; float: left; margin: 30px 0 0 30px; border: solid 1px #36F; display: inline; }

4. Mga elementong may maliit na taas.

Minsan ito ay kinakailangan upang lumikha ng mga elemento na may isang maliit na taas, halimbawa upang gamitin ang mga ito bilang isang elemento ng disenyo. Ang unang paraan na pumasok sa isip ay ang itakda ang taas. Gayunpaman, may ipapakita sa iyo ang IE na ganap na naiiba sa iyong inaasahan.

Ang resulta ay isang elemento na may taas na 2px at isang hangganan na 1px.

Ayusin natin.

Ang dahilan para sa bug na ito ay napaka-simple: IE ay binabago lamang ang taas ng elemento sa isang taas na katumbas ng laki ng font. Kaya, itinakda lang namin ang laki ng font sa zero.

#element( background: #95CFEF; border: solid 1px #36F; lapad: 300px; taas: 2px; margin: 30px 0; laki ng font: 0; }

Pangalawang diskarte

Isa pa magandang paraan- ito ay para gamitin ang overflow property, kailangan mong ilapat ang hidden value. At pagkatapos ang elemento ay magiging sa kinakailangang taas.

#element( background: #95CFEF; border: solid 1px #36F; lapad: 300px; taas: 2px; margin: 30px 0; overflow: nakatago; }

5. Overflow at relatibong pagpoposisyon ng mga elemento.

Lumilitaw ang bug na ito kapag ang parent element ay may overflow: auto property set, at ang bata ay nakaposisyon kaugnay nito, iyon ay, ito ay nakatakda sa ari-arian ng posisyon: kamag-anak . Lumalabas na elemento ng bata ay matatagpuan, kumbaga, sa ibabaw ng magulang. Tingnan natin ang isang halimbawa:

#element( background: #95CFEF; border: solid 1px #36F; lapad: 300px; taas: 150px; margin: 30px 0; overflow: auto; ) #anotherelement( background: #555; lapad: 150px; taas: 175px; posisyon : kamag-anak; margin: 30px )

Inaasahang resulta:

Resulta sa IE:

Ayusin natin.

Ang pinakasimpleng paraan upang malutas ang problema ay ang itakda ang parent element kamag-anak na pagpoposisyon.

#element( background: #95CFEF; border: solid 1px #36F; width: 300px; height: 150px; margin: 30px 0; overflow: auto; posisyon: kamag-anak; }

6. Modelo ng Kahon

Ang Internet Explorer ay mali ang pagbibigay kahulugan sa modelo ng kahon.

Halimbawa, mayroong 2 elemento ng div. Ang isa ay may naayos na bug at ang isa ay hindi. Magkakaroon ng pagkakaiba sa laki sa pagitan ng mga ito na katumbas ng kabuuan ng mga panloob na padding.

Inaayos namin

Sasabihin ko sa iyo ang tungkol sa tamang modelo sa isa pang artikulo, ngunit ngayon ay ipapakita ko lang sa iyo kung paano ito ayusin.

Ang punto ay para sa IE5/6 ang taas at lapad ay dapat itakda nang hiwalay. Halimbawa, ginagawa ko ito tulad nito:

Para sa lahat ng browser

#element( lapad: 400px; taas: 150px; padding: 50px; )

Para sa IE kailangan mong gawin ito:

#element ( lapad: 400px; taas: 150px; \height: 250px; \width: 500px )

Sa pangkalahatan, nagdaragdag ka ng mga halaga ng padding sa mga sukat ng elemento para sa IE6.

7. Pagtatakda ng pinakamababang laki.

Ang pinakamababang lapad at taas ay hindi maaaring palitan kapag ginagawa magandang disenyo. Sa kasamaang palad, hindi pinapansin ng IE ang min-height at min-width na katangian.

Inaayos namin

Upang malutas ang problema, gamitin natin ang!important identifier.

#element ( min-height: 150px; height: auto !important; height: 150px; )

Pangalawang opsyon.

Kung isasaalang-alang natin ang katotohanang hindi nauunawaan ng IE ang mga nested selector, magagawa natin ito:

#element ( min-height: 150px; height: 150px; ) html>body #element ( height: auto; )

8. Maling pag-uugali sa modelo ng float.

Ang isa sa pinakamahalagang konsepto sa tableless na layout gamit ang CSS ay float. Karamihan sa mga oras na pinangangasiwaan ito ng IE6 nang tama, ngunit kung minsan ay may mga problema. Halimbawa, kapag ang nilalaman ay hindi nasisira o ang lapad ng elemento ay mas malaki kaysa sa lapad ng magulang. Sa mga kasong ito, masira ang markup. Tingnan natin ang isang halimbawa.

#element, #anotherelement( background: #95CFEF; border: solid 1px #36F; width: 100px; height: 150px; margin: 30px; padding: 10px; float: left; ) #container( background: #C2DFEF; border: solid 1px #36F;

Nakuha ito sa IE:

Tulad ng nakikita mo, ang unang div ay lumawak upang magkasya sa lapad ng nilalaman at itinulak ang katabing isa sa susunod na linya.

Inaayos namin

Walang magandang solusyon. Ngunit maaari mong, halimbawa, ilapat ang overflow: nakatagong pag-aari, ngunit pagkatapos ay mapuputol ang nilalaman at ang bahagi nito ay hindi makikita.

#element( background: #C2DFEF; border: solid 1px #36F; width: 365px; margin: 30px; padding: 5px; overflow: hidden; )

9. Karagdagang espasyo sa pagitan ng mga item sa listahan.

Ang IE 6 ay nagdaragdag ng karagdagang padding sa mga patayong listahan. Tingnan natin ang isang halimbawa.

• Link 1
• Link 2
• Link 3

Ul ( margin:0; padding:0; list-style:none; ) li a ( background: #95CFEF; display: block; )

Ano dapat ang hitsura nito:

Ano ang ipinapakita ng IE:

1st method

Ang pinakamadaling paraan ay tukuyin ang lapad o taas para sa link.

Li a ( background: #95CFEF; display: block; lapad: 200px; }

ika-2 paraan

Ang susunod na paraan ay ang magtakda ng float: pakaliwa at pagkatapos ay i-clear ito.

Li a ( background: #95CFEF; float: left; malinaw: kaliwa; }

ika-3 paraan

Ang ikatlong paraan ay ang magtakda ng display: inline sa li element. Aling, sa pamamagitan ng paraan, ay ayusin ang double margin error na inilarawan sa itaas.

Ang paggamit ng margin:auto upang igitna ang isang elemento ng block nang pahalang ay mabuti kilalang pamamaraan. Ngunit naisip mo na ba kung paano ito gumagana?

Ang epekto ng auto ay depende sa uri ng elemento at konteksto. Para sa nangungunang padding, ang CSS auto ay maaaring mangahulugan ng isa sa dalawang bagay: kunin ang lahat libreng espasyo o 0 pixels. Depende dito, tutukoy ang ibang istraktura.

"auto" - sakupin ang lahat ng magagamit na espasyo

Ito ang pinakakaraniwang paraan ng paggamit ng auto para sa indentation. Kung itatakda namin ang auto para sa kaliwa at kanang padding ng isang elemento, pantay-pantay nilang kukunin ang lahat ng pahalang na espasyo na available sa lalagyan. Ipoposisyon nito ang elemento sa gitna.

Tingnan ang halimbawa

Gumagana lamang ito para sa pahalang na padding. Ngunit hindi gagana para sa mga lumulutang at inline na elemento. At para din sa ganap at maayos na nakaposisyon na mga elemento.

Gayahin ang lumulutang na gawi sa pamamagitan ng paglalaan ng magagamit na espasyo

awtomatikong ibinabahagi ang lahat ng libreng espasyo nang pantay sa pagitan ng kanan at kaliwang mga margin. Ngunit ano ang mangyayari kung itinakda namin ang halagang ito para lamang sa isa sa mga padding? Pagkatapos ay aabutin nito ang lahat ng magagamit na espasyo, at ang elemento ay i-offset sa kanan o kaliwang gilid.

Tingnan ang halimbawa

“auto” — itakda ang 0 pixels

Tulad ng nabanggit sa itaas, ang auto ay hindi gumagana para sa mga floated, inline, o ganap na nakaposisyon na mga elemento. Mayroon na silang tinukoy na istraktura, kaya walang saysay ang paggamit ng margin auto.

Makakagambala lamang ito sa orihinal na istraktura. Kasama ang CSS para sa pag-indent ng teksto sa itaas. Samakatuwid, itatakda ng auto ang padding ng mga elementong ito sa 0 pixels.

hindi rin gagana ang auto sa isang karaniwang elemento ng block maliban kung may tinukoy itong lapad. Sa lahat ng mga halimbawang ibinigay ko, ang mga elemento ay may tinukoy na lapad.

Ang value na auto ay tutukuyin ang isang padding na 0 pixels kapag ang lapad ng isang block element ay nakatakda sa auto o 100% . Karaniwang inaabot nito ang buong lapad ng lalagyan, kaya may natitira pang 0 pixel para sa lapad ng padding.

Ano ang mangyayari sa vertical padding kapag nakatakda sa auto?

auto para sa parehong CSS top padding at bottom padding ay palaging kinakalkula bilang 0 pixels ( hindi kasama ang ganap na nakaposisyon na mga elemento). Ang pagtutukoy ng W3C ay nagsasaad ng sumusunod:

"Kung ang 'margin-top' o 'margin-bottom' ay nakatakda sa 'auto', ang mga ito ay nakatakda sa 0."

Ito ay dahil sa katotohanan na sa isang web page, ang lahat ng mga elemento ay madalas na ipinamamahagi nang patayo. Samakatuwid, sa pamamagitan ng pagsentro ng taas ng elemento sa isang lalagyan, hindi namin makakamit ang katotohanang lalabas itong patayo na nakasentro kaugnay ng mismong pahina, gaya ng nangyayari sa pahalang na pagsentro.

O baka ito ay para sa parehong dahilan na sila ay nagpasya na magdagdag ng isang pagbubukod para sa ganap na nakaposisyon na mga elemento na maaaring nakasentro nang patayo na nauugnay sa pangkalahatang taas ng pahina.

O dahil ang epekto ng pagsasama-sama ng mga indent (pinagsasama ang mga indent mga kalapit na elemento ). Ito ay isa pang pagbubukod sa ng panuntunang ito pagtukoy ng mga vertical offset.

Pagsentro ng ganap na nakaposisyon na mga elemento

Dahil mayroong pagbubukod para sa ganap na nakaposisyon na mga elemento, maaari mong gamitin ang auto upang igitna ang mga ito nang patayo at pahalang. Ngunit kailangan muna nating malaman kung kailan gagana ang margin:auto nang eksakto tulad nito para sa CSS top padding.

Ang isa pang detalye ng W3C ay nagsasabi:

"Kung ang lahat ng tatlong posisyon ("kaliwa", "lapad" at "kanan") ay nakatakda sa "auto", unang itakda ang "margin-left" at "margin-right" sa 0...
» Kung ang "auto" ay tinukoy lamang para sa "margin-left" at "margin-right", pagkatapos ay lutasin ang equation na may karagdagang kondisyon upang ang parehong mga padding ay may parehong lapad."

Ang sitwasyon tungkol sa auto value para sa horizontal padding ay inilalarawan dito sa ilang detalye. Upang matiyak na ang mga padding na ito ay magkapareho ang laki, kaliwa , lapad , at kanan ay hindi dapat itakda sa auto ( ang kanilang default na halaga). Upang igitna ang isang elemento nang pahalang, kailangan mong itakda ang lapad ng ganap na nakaposisyon na elemento sa isang tiyak na halaga, at ang kaliwa at kanan ay dapat na may pantay na mga halaga.

Sa detalye nabanggit din isang bagay na katulad para sa tuktok na padding ng CSS div.

"Kung ang 'itaas', 'taas' at 'ibaba' ay nakatakda sa 'auto', itakda ang 'itaas' sa static..."

"Kung ang isa sa tatlong posisyon ay hindi nakatakda sa 'auto': Kung ang 'itaas' at 'ibaba' ay nakatakda sa 'auto', lutasin ang equation na may karagdagang kundisyon upang itakda ang mga padding na ito sa parehong mga halaga."

Samakatuwid, upang patayong igitna ang isang ganap na nakaposisyon na elemento, ang itaas , taas at ibaba ay hindi dapat itakda sa auto .

Ngayon, pagsasama-sama ng lahat ng ito, nakukuha natin ang sumusunod:

Tingnan ang halimbawa

Konklusyon

Kung kailangan mong ilipat ang isang elemento sa isang pahina sa kanan o kaliwa nang walang mga elemento ng lalagyan ( halimbawa, tulad ng sa kaso ng float), tandaan na maaari mong gamitin ang auto para sa indentation.

Pag-convert ng isang elemento sa ganap na nakaposisyon lamang upang igitna ito nang patayo ( nangungunang padding CSS), Hindi pinakamahusay na ideya. Mayroong iba pang mga opsyon tulad ng flexbox at CSS transform na mas angkop para dito.

Pagsasalin ng artikulong " CSS – margin auto – Paano Ito Gumagana"Inihanda ng magiliw na pangkat ng proyekto.

Mabuti Masama

Paglalarawan

Itinatakda ang dami ng padding mula sa bawat gilid ng elemento. Ang margin ay ang puwang mula sa hangganan ng kasalukuyang elemento hanggang sa panloob na hangganan ng pangunahing elemento nito (Larawan 1).

kanin. 1. Indent mula sa kaliwang gilid ng elemento

Kung ang elemento ay walang magulang, ang padding ay ang distansya mula sa gilid ng elemento hanggang sa gilid ng browser window, na isinasaalang-alang na ang window mismo ay mayroon ding padding na nakatakda bilang default. Upang maalis ang mga ito, dapat mong itakda ang halaga ng margin para sa tagapili katumbas ng zero.

Binibigyang-daan ka ng margin property na itakda ang margin value para sa lahat ng panig ng isang elemento nang sabay-sabay o tukuyin ito para lamang sa mga tinukoy na panig.

Syntax

margin: [halaga | interes | auto] (1,4) | magmana

Mga halaga

Maaari kang gumamit ng isa, dalawa, tatlo o apat na halaga, na pinaghihiwalay ng isang puwang. Ang epekto ay depende sa bilang ng mga halaga at ipinapakita sa talahanayan. 1.

Maaaring tukuyin ang halaga ng indentation sa mga pixel (px), porsyento (%) o iba pang mga katanggap-tanggap na halaga. Mga yunit ng CSS. Ang halaga ay maaaring maging positibo o negatibong numero.

Auto Tinutukoy na ang halaga ng indentation ay awtomatikong kakalkulahin ng browser.

magmana Nagmana ng halaga ng magulang.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Kung nais mo ang pinakamababang halaga, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Resulta halimbawang ito

ipinapakita sa Fig. 2.

Modelo ng Bagay

document.getElementById("elementID ").style.margin

Mga browser

Hindi sinusuportahan ng Internet Explorer 6 sa quirk mode ang pagsentro ng isang bloke gamit ang margin: 0 auto rule. Mayroon ding bug sa browser na ito na nagdodoble sa kaliwa o kanang halaga ng padding para sa mga floated na elemento na naka-nest sa loob ng mga pangunahing elemento. Dinoble ang margin na katabi ng panig ng magulang. Karaniwang nalulutas ang problema sa pamamagitan ng pagdaragdag ng display: inline sa floated element.

Hindi sinusuportahan ng mga bersyon ng Internet Explorer hanggang sa at kabilang ang 7.0 ang inherit value.

Tandaan

U mga elemento ng block na matatagpuan sa tabi ng bawat isa patayo, ang isang collapsing effect ay sinusunod kapag ang mga indent ay hindi summed up, ngunit pinagsama sa bawat isa. Ang pagbagsak mismo ay kumikilos sa dalawa o higit pang mga bloke (maaaring i-nested ang isa sa loob ng isa pa) na may mga indent sa itaas o ibaba, habang ang mga katabing indent ay pinagsama sa isa. Para sa kaliwa at kanang padding, hindi kailanman inilalapat ang pag-collapse.

Hindi gumagana ang pag-collapse:

• para sa mga elementong may padding property na nakatakda sa collapsing side.
• para sa mga elemento na may tinukoy na hangganan sa gumuho na bahagi;
• sa mga elemento na may ganap na pagpoposisyon, ibig sabihin. yaong ang posisyon ay nakatakda sa ganap;
• sa mga lumulutang na elemento (kung saan nakatakda ang float property sa kaliwa o kanan );
• para sa mga inline na elemento;
• Para sa .

Karaniwang nakasentro Mga elemento ng HTML sa pahina - hindi ito isang mahirap na bagay. Sa ilang mga kaso... kailangang i-rack ng mga web developer ang kanilang mga utak upang mahanap ang pinakamahusay na solusyon.

Ang pagsentro sa mga elemento nang pahalang ay hindi napakahirap nang patayo, ito ay nagdudulot na ng mga katanungan, ngunit ang pagsasama-sama ng mga ito sa pangkalahatan ay maaaring maging isang dead end. Sa kapanahunan adaptive na disenyo, bihira kaming malinaw tungkol sa eksaktong sukat ng ilang partikular na elemento. Nagbilang ako ng 6 sa iba't ibang paraan pagsentro ng mga elemento na may gamit ang CSS. Magsimula tayo sa mga simpleng halimbawa, tapusin natin ang mga mas kumplikado. Ito ay gagana sa parehong HTML code:

Pahalang na pagkakahanay gamit ang text-align

Minsan ang pinakasimpleng solusyon ay ang pinakamahusay:

Div.center ( text-align: center; background: hsl(0, 100%, 97%); ) div.center img ( width: 33%; height: auto; )

Walang vertical centering dito: para dito kakailanganin mong idagdag ang margin-top at margin-bottom properties sa div.

Pagsentro na may margin: auto

Isa pang solusyon para sa pahalang na pagkakahanay:

Div.center ( background: hsl(60, 100%, 97%); ) div.center img ( display: block; lapad: 33%; taas: auto; margin: 0 auto; )

Pakitandaan na para sa paraang ito kailangan mong itakda ang display: block property.

Pagsentro gamit ang table-cell

Sa pamamagitan ng paggamit ng display: table-cell, masisiguro namin na ang elemento ay nakasentro sa parehong patayo at pahalang. Ngunit dito kailangan nating i-nest ang imahe sa isa pang elemento ng div.

Naka-align sa gitna ( display: table; background: hsl(120, 100%, 97%);width: 100%; ) .center-core ( display: table-cell; text-align: center; vertical-align: middle; ) .center-core img ( lapad: 33%; taas: auto; )

Para gumana nang tama ang lahat, kailangang itakda ang div sa lapad: 100%. Upang igitna ang elemento nang patayo, gagamitin namin ang mga karaniwang pamamaraan sa pamamagitan ng pagtatakda ng taas. Gumagana kahit saan, kabilang ang IE8+.

Ganap na pagkakahanay

napaka kawili-wiling solusyon. Ang ideya ay kailangan mong itakda ang taas ng panlabas na lalagyan:

Absolute-aligned ( position: relative; min-height: 500px; background: hsl(200, 100%, 97%); ) .absolute-aligned img ( width: 50%; min-width: 200px; height: auto; overflow : auto; margin: auto posisyon: itaas: 0;

Igitna gamit ang pagsasalin

Bagong solusyon kung saan ginamit Mga pagbabago sa CSS. Nagbibigay ng parehong pahalang at patayong pagkakahanay:

Gitna ( background: hsl(180, 100%, 97%); posisyon: kamag-anak; min-height: 500px; ) .center img ( posisyon: absolute; tuktok: 50%; kaliwa: 50%; transform: translate(-50 %, -50%); lapad: 30%;

Mayroong ilang mga disadvantages:

• Nangangailangan ng mga prefix ng browser ang CSS transform property
• Hindi gumagana sa mga mas lumang bersyon ng IE (8 at mas mababa)
• Ang panlabas na lalagyan ay kailangang bigyan ng taas.
• Kung may text sa loob ng container, maaaring medyo malabo ito.

Pagsentro gamit ang uri ng flex display

Marahil ang pinakasimpleng opsyon.

Center ( background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-item: center; ) .center img ( width: 30%; height: auto; )

Hindi gumagana sa lahat ng bersyon ng IE (bagaman maaari mong protektahan ang iyong sarili sa pamamagitan ng paggamit ng display: table-cell bilang karagdagan). Buong CSS:

Center ( background: hsl(240, 100%, 97%); display: -webkit-box; /* Safari, iOS 6 at mga naunang bersyon; Android, lumang WebKit */ display: -moz-box; /* Firefox (maaaring may buggy) */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Chrome 21+ */ display: flex; /* Opera 12.1+, Firefox 22+ */ -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-item: center; align-item: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; )

Pagsentro gamit ang calc

Sa ilang mga kaso, ang pamamaraang ito mas maraming nalalaman kaysa sa paggamit ng flexbox:

Center ( background: hsl(300, 100%, 97%); min-height: 600px; position: relative; ) .center img ( width: 40%; height: auto; position: absolute; top:calc(50% - 20%); kaliwa: calc(50% - 20%);

Ito ay napaka-simple, maaari naming kalkulahin ang mga sukat na kailangan namin depende sa buong layout ng pahina. Ang mga kalkulasyon ay napaka-simple, 50% ay sentrong punto lalagyan, ngunit ang aming gawain ay ilagay sa kaliwa itaas na sulok mga larawan. Susunod, ibawas ang kalahati ng taas at lapad ng imahe. Ang formula ay ang mga sumusunod:

Itaas: calc(50% - (40% / 2)); kaliwa: calc(50% - (40% / 2));

Sa pagsasanay maaari mong mahanap iyon ang pamamaraang ito gumagana nang maayos kung alam natin ang mga sukat ng mga elemento:

Center img ( lapad: 500px; taas: 500px; posisyon: absolute; top:calc(50% - (300px / 2)); kaliwa: calc(50% - (300px - 2)); )

Ang pamamaraang ito ay sinusuportahan ng Firefox, simula sa bersyon 4, kakailanganin mong magrehistro ng mga prefix ng browser. Hindi gumagana sa IE 8. Buong code:

Gitnang img ( lapad: 40%; taas: auto; posisyon: ganap; tuktok: -webkit-calc(50% - 20%); kaliwa: -webkit-calc(50% - 20%); itaas: -moz-calc (50% - 20%);

Sana ay sapat na ang mga paraang ito para mahanap mo ang pinakamahusay na solusyon para sa iyong sarili.