Ang problema ng patayong pagsentro ng mga elemento sa CSS ay may bilang ng handa na mga solusyon. Pagpili ng paraan ng pagkakahanay sa bawat isa espesyal na kaso depende sa uri, laki, pagpoposisyon ng mga elemento at iba pang mga katangian na tinukoy ng mga ito.
Nasa ibaba ang ilang sikat na vertical alignment technique sa mga layout designer. Ipinapakita nito kung paano gumagana ang mga ito at para sa kung anong mga kaso ang bawat isa sa kanila ay pinakaangkop.
Narito ang dalawang elemento ng div:
Gagamitin ang bawat paraan upang ihanay ang panloob na yunit sa gitna ng panlabas na yunit.
taas ng linya para sa isang linyaKapag ang magulang ay nag-okupa ng isang linya ng text at ang taas ng bata ay kilala, ang line-height property ay maaaring ilapat. Ang halaga ng ari-arian ay dapat na katumbas ng taas panlabas na yunit. Gumagana lang ito para sa isang linya, kaya kapaki-pakinabang na magdagdag ng overflow: hidden at white-space: nowrap sa bata.
Hindi posibleng gamitin ang percentage notation line-height=100%, dahil 100% sa kasong ito ay ang taas ng font.
Lalagyan (
taas: 300px;
taas ng linya: 300px;
}
panloob (
white-space: nowrap;
overflow: nakatago;
}
Ang pamamaraan ay naaangkop lamang kung ang taas ng panlabas na bloke ay kilala.
Table na may vertical-alignAng isang talahanayan ay perpekto para sa patayong pagkakahanay ng mga elemento. Upang hindi lumabag sa semantika, mas mahusay na lumikha ng mga elemento ng talahanayan gamit ang CSS. Ang posisyon ng mga nilalaman ng cell ay kinokontrol ng vertical-align. Mayroong apat na halaga para sa property na ito sa mga talahanayan:
Baseline - default;
. ibaba — nilalaman sa ilalim ng cell;
. gitna - nilalaman sa gitna ng cell;
. tuktok — nilalaman sa tuktok ng cell.
Sa unang halimbawa, ang isang cell ng talahanayan ay nagiging panlabas na bloke.
Lalagyan (
display: table-cell;
vertical-align: gitna;
}
Ang magandang bagay tungkol sa pamamaraang ito ay gumagana ito para sa mga elemento na walang ibinigay na taas, ngunit sa ilang mga kaso ang paggamit nito ay nahahadlangan ng katotohanan na ang panlabas na bloke, tulad ng anumang cell ng talahanayan, ay nag-aayos ng lapad nito sa mga nilalaman nito, at maaari mo itong iunat. sa pamamagitan lamang ng tahasang pagtatakda ng lapad para sa lapad. Para sa isang cell na walang talahanayan, ang mga porsyento ay hindi gumagana nang maayos.
Ang pagkukulang na ito ay itinatama sa pamamagitan ng pagbabalot sa cell sa parent nito gamit ang display:table property. Ang laki ng elementong ito ay maaaring itakda bilang isang porsyento. Ang huling code ay magiging ganito:
Panlabas na pambalot (
display: talahanayan;
}
Lalagyan (
display: table-cell;
vertical-align: gitna;
}
Ang pamamaraan ay ginagamit kapag ang taas ng panloob na elemento ay kilala. Maaaring hindi ito kilala ng panlabas na yunit. Tanong ng magulang kamag-anak na pagpoposisyon, at ang inapo sa loob nito ay ganap.
Dahil sa pinakamataas na value ng property na 50%, nakapwesto ang nested na elemento kasama ang tuktok na gilid nito sa gitna ng panlabas na bloke. Ang natitira na lang ay itaas ang negatibong margin-top nito sa kalahati ng sarili nitong taas upang eksaktong nakatayo ito sa gitna ng patayo.
Lalagyan (
posisyon: kamag-anak;
}
panloob (
taas: 140px;
posisyon: ganap;
tuktok: 50%;
margin-top: -70px;
}
Ang kawalan ng pamamaraang ito ay ang pangangailangan na malaman ang taas ng bata.
Alignment sa linya na may vertical-alignPag-align ng lowercase at lowercase mga elemento ng block, kabilang ang mga larawan at icon, sa text na nakapalibot sa kanila ay isinasagawa ng vertical-align na property. Hindi tulad ng isang talahanayan, sa kasong ito ang buong hanay ng mga halaga nito na tinukoy sa detalye ay gumagana.
Kung alam ang taas ng magulang, maaaring gamitin ang property na ito para isentro ang multiline na text.
Para sa panlabas na bloke, ang pagsentro ng isang linya ay inireseta.
Lalagyan (
taas: 140px;
taas ng linya: 140px;
}
Ang halaga ng taas ng linya para sa panloob na bloke ay muling tinukoy sa normal o sa anumang nais na halaga. Binibigyan din ito ng alignment vertical-align: middle at conversion sa isang inline-block type - display: inline-block.
panloob (
display: inline-block;
taas ng linya: normal;
vertical-align: gitna;
}
Ang kawalan ng pamamaraang ito ay kailangan mong malaman ang taas ng magulang.
Pag-align sa pagbabagong-anyoAng translateY function ng transform property ay nagbibigay-daan sa iyo na igitna ang isang panloob na bloke ng hindi kilalang taas. Upang gawin ito, ang magulang ay dapat na medyo nakaposisyon at ang bata ay ganap.
Ibinababa ng nangungunang property na may halagang 50% ang panloob na bloke upang ang tuktok na gilid nito ay nakaposisyon sa gitna ng magulang nito. Halaga ng TranslateY: -50%, itinataas ang elemento sa kalahati ng sarili nitong taas at sa gayon ay nakahanay mga patayong sentro mga bloke.
Lalagyan (
posisyon: kamag-anak;
}
panloob (
posisyon: ganap;
tuktok: 50%;
ibahin ang anyo: isalinY(-50%);
}
Ang kawalan ng diskarteng ito ay ang limitadong suporta para sa mga function ng pagbabago sa IE browser.
Pag-align sa pamamagitan ng pseudo-elementGumagana ang pamamaraan kapag hindi alam ang taas para sa una o sa pangalawang bloke. Ang isang inline-block na pseudo-element ay idinaragdag sa loob ng magulang gamit ang bago o pagkatapos. Ang taas ng idinagdag na elemento ay dapat na katumbas ng taas ng magulang - taas: 100%. Ang patayong pagkakahanay ng nilalaman ay itinakda gamit ang vertical-align: gitna.
Gamit ang vertical-align: gitna, ang panloob na bloke ay nakahanay na may kaugnayan sa pseudo-element na ito. Dahil ang magulang at anak ay may parehong taas, ang panloob na elemento, habang patayong nakahanay sa pseudo-element, ay nakasentro din sa panlabas na kahon.
Lalagyan:noon (
nilalaman: "";
taas: 100%;
vertical-align: gitna;
display: inline-block;
}
panloob (
display: inline-block;
vertical-align: gitna;
}
Unibersal na pamamaraan. Hindi gagana kung nakatakda ang panloob na unit ganap na pagpoposisyon.
FlexboxAng pinakabago at pinakamadaling paraan upang ihanay ang mga elemento nang patayo. Binibigyang-daan ka ng Flexbox na ayusin ang mga elemento ng isang Web page ayon sa gusto mo. Upang igitna ang isang bloke, kailangan mo lang magtakda ng display: flex para sa magulang at margin: auto para sa bata.
Lalagyan (
display: flex;
lapad: 320px;
taas: 140px;
}
panloob (
lapad: 120px;
margin: auto;
}
Gumagana lang ang Flexbox mga modernong browser.
Pagpili ng paraanAling pamamaraan ng vertical alignment ang gagamitin ay depende sa gawain at sa mga limitasyon na maaaring naroroon sa anumang partikular na kaso.
Ang taas ng mga elemento ay hindi alamSa sitwasyong ito, maaari mong gamitin ang isa sa apat na unibersal na pamamaraan:
1. Talahanayan. Ang magulang ay nagiging isang table cell na ginawa sa HTML o sa pamamagitan ng display-table/display-cell. Ang parent element na ito ay binibigyan ng vertical-align: middle.
2. Pseudo-element. Para sa panlabas na bloke, isang inline-block na pseudo-element ay nilikha na may lapad=100% at vertical-align: gitna. Ang bata ay binibigyan ng display: inline-block at vertical-align: middle. Ang pamamaraan ay hindi gumagana lamang kapag ang panloob na bloke ay binibigyan ng ganap na pagpoposisyon.
3. Pagbabago. Ang magulang ay nakakakuha ng posisyon: kamag-anak. Ang bata ay binibigyan ng posisyon: absolute, top: 50% at transform: translateY(-50%);
4. Flexbox. Ang panlabas na bloke ay nakatakdang ipakita: flex, ang panloob na bloke ay nakatakda sa margin: auto.
Tanging taas lang ng bata ang alamAng panlabas na yunit ay nakaposisyon na kamag-anak; Ang panloob na elemento ay binibigyan ng ganap na pagpoposisyon, itaas: 50% at isang margin-top na katumbas ng kalahati ng taas nito.
Isang linya bawat bloke na may alam na taasAng panlabas na bloke ay binibigyan ng line-height property na may halaga na katumbas ng taas nito.
Ang taas ng panlabas na bloke ay kilala, ngunit ang panloob na elemento ay hindi.Ang magulang ay binibigyan ng line-height na katumbas ng taas nito. Ang taas ng linya ng bata ay muling tinukoy sa normal o anumang nais na halaga, at ipinapakita: inline-block at vertical-align: gitna ay ibinibigay dito.
Nilalayon ng artikulo ngayong araw na ipakita sa iyo kung paano igitna ang isang div, parehong pahalang at patayo, gamit ang ilang CSS trick. Sasabihin din namin sa iyo kung paano igitna ang buong page o sa isang indibidwal na elemento ng div.
Madaling isentro ang isang elemento ng DIV sa pageAng pamamaraang ito ay gagana nang perpekto sa lahat ng mga browser.
CSSCenter-div ( margin: 0 auto; lapad: 100px; )
Halimbawa
Itinatakda ng value auto sa margin property ang kaliwa at kanang margin sa buong espasyong available sa page. Ang mahalagang bagay na dapat tandaan dito ay ang nakasentro na elemento ng div ay dapat na may width value set.
Pagsentro ng DIV sa loob ng elemento ng DIV sa makalumang paraanAng center alignment div method na ito ay gagana sa lahat ng browser.
CSSOuter-div ( padding: 30px; ) .inner-div ( margin: 0 auto; width: 100px; )
HTMLHalimbawa
Ang panlabas na div ay maaaring ilagay sa anumang paraan na gusto mo, ngunit ang panloob na div ay dapat na may tinukoy na lapad (lapad).
Pagsentro ng DIV sa loob ng elemento ng DIV gamit ang inline-blockSa ganitong paraan ng pagsentro ng isang div sa loob ng isang div, hindi kinakailangang tukuyin ang lapad ng panloob na elemento. Ito ay gagana sa lahat ng modernong browser, kabilang ang IE8.
CSSOuter-div ( padding: 30px; text-align: center; ) .inner-div ( display: inline-block; padding: 50px; )
HTMLHalimbawa
pag-aari ng text-align gumagana lamang sa mga inline na elemento. Ang halaga ng inline-block ay nagbibigay-daan sa panloob na div na maipakita bilang isang inline na elemento at pati na rin bilang isang bloke (inline-block). Ang pag-aari ng text-align sa panlabas na elemento ng div ay magbibigay-daan sa amin na igitna ang panloob na div.
Igitna ang isang DIV sa loob ng isang elemento ng DIV nang pahalang at patayoDito margin: auto ay ginagamit upang igitna ang div sa gitna ng pahina. Ang halimbawa ay gagana sa lahat ng modernong browser.
CSSOuter-div ( padding: 30px; ) .inner-div ( margin: auto; lapad: 100px; taas: 100px; )
HTMLHalimbawa
Ang panloob na elemento ng div ay dapat na may tinukoy na lapad (lapad) at taas (taas). Ang pamamaraan ay hindi gagana kung ang panlabas na elemento ng div ay may nakapirming taas.
Igitna ang DIV sa pamamagitan ng mababang limitasyon mga pahinaDito margin: auto ay ginagamit upang igitna ang div patayo at absolute positioning ay ginagamit para sa panlabas na elemento. Ang pamamaraan ay gagana sa lahat ng mga modernong browser.
CSSOuter-div ( position: absolute; bottom: 30px; width: 100%; ) .inner-div ( margin: 0 auto; width: 100px; height: 100px; background-color: #ccc; )
HTMLHalimbawa
Ang panloob na div ay dapat na may hanay ng lapad. Ang espasyo sa ibaba ng page ay inaayos gamit ang ilalim na property ng outer div. Maaari mo ring igitna ang isang div sa itaas ng page sa pamamagitan ng pagpapalit sa ibabang property ng nangungunang property.
Igitna ang mga DIV sa pahina nang patayo at pahalangDito, para isentro ang div, muli naming ginagamit ang margin: auto at absolute positioning ng outer div. Ang pamamaraan ay gagana sa lahat ng mga modernong browser.
CSSCenter-div ( posisyon: absolute; margin: auto; itaas: 0; kanan: 0; ibaba: 0; kaliwa: 0; lapad: 100px; taas: 100px; )
Halimbawa
Ang elemento ng div ay dapat may lapad (lapad) at taas (taas).
Paggawa ng adaptive centering ng isang DIV element sa pageDito para sa pagkakahanay ng div Sa gitna, gamit ang CSS, ginagawa naming adaptive ang lapad ng elemento ng div upang tumugon ito sa mga pagbabago sa laki ng window. Gumagana ang pamamaraang ito sa lahat ng browser.
CSSCenter-div ( margin: 0 auto; max-width: 700px; )
Halimbawa
Ang isang nakasentro na elemento ng div ay dapat na may max-width na set ng property.
Pagsentro ng isang DIV sa loob ng isang elemento gamit ang mga katangian ng panloob na blokeAng panloob na elemento ng div dito ay tumutugon. Ang paraan ng pagsentro ng isang div sa loob ng isang div ay gagana sa lahat ng mga browser.
CSSOuter-div ( padding: 30px; ) .inner-div ( margin: 0 auto; max-width: 700px; )
HTMLHalimbawa
Ang panloob na div ay dapat mayroong max-width na property set.
Isinasentro ang dalawang tumutugon na div sa tabi ng isa't isaNarito mayroon kaming dalawang tumutugon na elemento ng div na magkatabi. Ang pamamaraang ito ng paglalagay ng div sa gitna ng screen ay gagana sa lahat ng modernong browser.
CSSContainer ( text-align: center; ) .left-div ( display: inline-block; max-width: 300px; vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) screen at (max-width: 600px) ( .left-div, .right-div ( lef max-width: 100%; ) )
HTMLHalimbawa
Narito mayroon kaming ilang elemento na may nakalapat na inline-block na property, na matatagpuan sa loob ng isang nakasentro na lalagyan. Gumagamit din ang halimbawang ito ng mga query sa media ng CSS; ibig sabihin, kung ang laki ng screen ay mas mababa sa 600 pixels, ang max-width na property para sa parehong kaliwa at kanang div ay nakatakda sa 100%.
Nakasentro ang elemento ng DIV gamit ang FlexboxDito namin isentro ang CSS div gamit ang Flexbox. Ito ay inilaan upang mapadali ang proseso ng pagbuo ng disenyo mga user interface. Ang module na ito ay sinusuportahan ng Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ at gayundin Android Browser 40+ .
CSSContainer ( display: flex; align-item: center; justify-content: center; height: 100vh; ) .item ( background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; )
Sa proseso ng layout ng web page, ang gawain ng pagsentro ng mga bloke ay karaniwan. Ito ay maaaring patayo o pahalang na pagsentro.
Halimbawa, kung ang site ay may nakapirming lapad, makatuwiran na ihanay ito sa gitna ng window ng browser, dahil ginagawa nitong mas madaling basahin ang teksto (lalo na kung malaki ang monitor). Ang ilang mga disenyo ay karaniwang nagsasangkot ng paglalagay ng bloke sa gitna ng window ng browser, ibig sabihin, parehong patayo at pahalang na pagsentro.
Una, pag-usapan natin ang pahalang na pagsentro. Ang pinakasikat na pamamaraan ay ang paggitna sa block sa pamamagitan ng pagtatakda ng kanan at kaliwang margin sa "auto" . Sabihin nating gusto nating igitna ang isang bloke na may id = "container" at may lapad na 860px. Sa kasong ito, sa CSS file kailangan mong isulat:
#container (
kulay ng background:#EEE;
lapad:860px;
margin:0px auto;
}
Gayunpaman, I.E. Ang mga mas lumang bersyon (halimbawa, 5.0) ay hindi ihanay ang block na ito na nakasentro. Siyempre, wala nang gumagamit ng ganoong mga sinaunang browser (mula sa 1800 sa aking pang-araw-araw na bisita - 1 lamang), ngunit kung sakali, mas mahusay na gawin itong gumana din doon :)
Upang gawin ito, ang parent element, iyon ay, ang isa kung saan namin isentro ang aming block (kadalasan ang parent element ay ang BODY tag), ay kailangang itakda ang text-align:center na parameter. Sa kasong ito, ang bloke ay ihahanay sa gitna, ngunit ang lahat ng nilalaman nito ay ihahanay din sa gitna, ngunit hindi namin iyon kailangan. Samakatuwid, sa loob ng bloke na ito itinakda namin ang default na pagkakahanay - text-align:left .
body (text-align:center)
#container (
kulay ng background:#EEE;
lapad:860px;
margin:0px auto;
text-align:left;
}
Mayroon ding isa pang paraan upang pahalang na ihanay ang isang bloke, batay sa . Tulad ng malamang na alam mo, bilang default, ang anumang elemento ng block ay pinindot sa kaliwang gilid elemento ng magulang. Samakatuwid, upang ihanay ito sa gitna kailangan mo:
2. Ilipat ito sa kanan ng 50% ng lapad ng browser window
3. Gamit ang negatibong padding, ilipat ito sa kaliwa sa layo na katumbas ng kalahati ng lapad ng bloke.
Sa ganitong paraan, ang bloke ay isentro. Para sa higit na kalinawan, panoorin ang video sa ibaba:
Halimbawa ng CSS code:
#container (
kulay ng background:#559964;
posisyon:ganap;
kaliwa:50%;
margin-left:-430px;
lapad:860px;
}
Dapat pansinin na kung nais mong iposisyon ang isang bloke na hindi nauugnay sa window ng browser, ngunit, halimbawa, nauugnay sa isa pang bloke, pagkatapos ay para sa iba pang bloke na ito kailangan mong magtakda ng posisyon: kamag-anak;
Sabihin nating ang aming #container block, na kailangang nakagitna, ay nasa loob ng #wrap block. Pagkatapos ang code ay magiging ganito:
#wrap(posisyon:kamag-anak)
#container (
kulay ng background:#559964;
posisyon:ganap;
kaliwa:50%;
margin-left:-430px;
lapad:860px;
}
Ngayon tingnan natin ang kaso kapag kailangan mong ihanay ang isang bloke sa gitna ng pahina, i.e. Ilapat ang pahalang at patayong pagsentro nang sabay-sabay. Ang pagpoposisyon ay muling naglaro dito. Kaya kailangan namin:
1. Itakda ang bloke sa ganap na pagpoposisyon
2. Ilipat ito sa kanan ng 50% at pababa ng 50%, sa gayon ay inilalagay ang kaliwang sulok sa itaas sa gitna ng window ng browser.
3. Gamit ang negatibong padding, itaas ito sa layo na katumbas ng kalahati ng taas ng block, at sa kaliwa ng distansya na katumbas ng kalahati ng lapad ng block.
Ilalagay nito ang block sa gitna ng web page.
Sabihin nating ang taas ng ating block ay 600px, at ang lapad ay 860px. Pagkatapos ang CSS code ay magiging ganito:
#container (
kulay ng background:#559964;
posisyon:ganap;
tuktok: 50%;
kaliwa:50%;
margin-top:-300px;
margin-left:-430px;
taas:600px;
lapad:860px;
}
Sana ang prinsipyo mismo ay malinaw sa iyo.
I-rate ang aralin: 1 2 3 4 5
Mga komento:
mauna na ako manood ng lesson!!!
Eh... Pangalawa =) Na-encounter ko kamakailan ang problemang ito sa IE, nagdusa ako ng matagal)) Salamat =)
Salamat, naka-bookmark na pahina)))
Maraming salamat, Andrey, para sa mga bagong aralin!
Salamat lang, I don't think there's anything to add here))
Salamat sa aral, literal na sinubukan kong gawin ito ilang araw na ang nakakaraan, nagdusa ng kaunti at pansamantalang isinantabi
Ngunit mayroon akong problema: ang site sa Mozille Firefox ay hindi nais na mai-align, ito ay natigil sa kaliwang gilid at iyon lang, wala sa itaas ang nakakatulong (pareho sa Opera).
bakit hindi ito gumagana? - "kung gusto mong iposisyon ang isang bloke na hindi nauugnay sa window ng browser, ngunit, halimbawa, nauugnay sa isa pang bloke, para sa ibang bloke na ito kailangan mong magtakda ng posisyon: relative;"
Maraming salamat po!!
Maayos ang lahat, ngunit sa ilang kadahilanan ang lahat ng mga imahe ay nahuhulog lamang pagkatapos i-update ang browser. Mangyaring sabihin sa akin kung bakit ito nangyayari?
Andrey, mangyaring magdagdag ng paghahanap sa site.
Magdagdag ng komento.
Kadalasan sa layout kinakailangan na isentro ang ilang elemento nang pahalang at/o patayo. Samakatuwid, nagpasya akong gumawa ng isang artikulo na may sa iba't ibang paraan pagsentro upang ang lahat ay nasa kamay sa isang lugar.
Pahalang na alignment margin: autoPahalang na pagkakahanay kapag tulong margin ginagamit kapag alam ang lapad ng nakasentro na elemento. Gumagana para sa mga elemento ng block:
Elem ( margin-kaliwa: auto; margin-right: auto; lapad: 50%; )
Ang pagtukoy ng auto para sa kanan at kaliwang mga margin ay ginagawa silang pantay, na nakasentro sa elemento nang pahalang sa loob ng parent block.
text-align: centerAng pamamaraang ito ay angkop para sa pagsentro ng teksto sa loob ng isang bloke. text-align: center:
Pag-align sa text-align .wrapper ( text-align: center; )
Naka-center aligned ako
posisyon at negatibong margin ang natitiraAngkop para sa pagsentro ng mga bloke ng alam na lapad. Ibinibigay namin ang posisyon ng parent block: kaugnay sa posisyong nauugnay dito, ang posisyong nakasentro ng elemento: absolute , kaliwa: 50% at isang negatibong margin-kaliwa na ang halaga ay katumbas ng kalahati ng lapad ng elemento:
Alignment sa position .wrapper ( position: relative; ) .wrapper p ( left: 50%; margin: 0 0 0 -100px; position: absolute; width: 200px; )
Naka-center aligned ako
display: inline-block + text-align: centerAng pamamaraan ay angkop para sa pag-align ng mga bloke ng hindi kilalang lapad, ngunit nangangailangan ng magulang ng wrapper. Halimbawa, maaari mong igitna ang isang pahalang na menu sa ganitong paraan:
Alignment sa display: inline-block + text-align: center;
Tungkol sa may-akdaVertical alignment line-height Upang ihanay ang isang linya ng teksto na maaari mong gamitin parehong mga halaga taas at line spacing
para sa parent block. Angkop para sa mga pindutan, mga item sa menu, atbp.
line-height .wrapper ( height: 100px; line-height: 100px; )
Naka-align ako patayoposisyon at negatibong margin up
Maaaring i-align nang patayo ang isang elemento sa pamamagitan ng pagbibigay dito ng isang nakapirming taas at paglalapat ng posisyon: absolute at isang negatibong margin hanggang katumbas ng kalahati ng taas ng elementong ini-align. Ang parent block ay dapat bigyan ng posisyon: relative:
Wrapper ( position: relative; ) elem ( height: 200px; margin: -100px 0 0; position: absolute; top: 50%; )
Sa ganitong paraan, gamit ang pagpoposisyon at mga negatibong margin, maaari mong isentro ang isang elemento sa page.display: table-cell
Para sa vertical alignment, ang display: table-cell property ay inilalapat sa elemento, na pumipilit dito na tularan ang isang table cell. Itinakda din namin ang taas nito at vertical-align: middle . I-wrap natin ang lahat ng ito sa isang lalagyan na may dislpay: table; :
line-height .wrapper ( height: 100px; line-height: 100px; )
Vertical alignment display: table-cell .wrapper ( display: table; width: 100%; ) .cell ( display: table-cell; height: 100px; vertical-align: middle; )Dynamic na pagkakahanay ng isang elemento sa isang page Tumingin kami sa mga paraan upang ihanay ang mga elemento sa isang pahina kung kailan Tulong sa CSS
. Ngayon tingnan natin ang pagpapatupad ng jQuery.
Ikonekta natin ang jQuery sa pahina: Iminumungkahi kong magsulat simpleng function
Function alignCenter(elem) ( // code dito )
Sa katawan ng function, dynamic naming kinakalkula at itinatalaga ang mga coordinate ng page center sa CSS sa kaliwa at nangungunang mga katangian:
Function alignCenter(elem) ( elem.css(( left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem. height()) / 2 + "px" // huwag kalimutang magdagdag ng posisyon: ganap sa elemento upang ma-trigger ang mga coordinate )) )
Sa unang linya ng function, nakukuha namin ang lapad ng dokumento at ibawas mula dito ang lapad ng elemento, nahahati sa kalahati - ito ang magiging pahalang na sentro ng pahina. Ang pangalawang linya ay gumagawa ng parehong bagay, tanging ang taas para sa vertical alignment.
Handa na ang function, ang natitira na lang ay ilakip ito sa kahandaan ng DOM at mga kaganapan sa pagbabago ng laki ng window:
$(function() ( // tawagan ang centering function kapag handa na ang DOM alignCenter($(elem)); // tawagan ang function kapag binabago ang laki ng window $(window).resize(function() ( alignCenter($(elem) )); )) // function ng pagsentro ng elemento alignCenter(elem) ( elem.css(( // pagkalkula sa kaliwa at itaas na mga coordinate sa kaliwa: ($(window).width() - elem.width()) / 2 + " px", tuktok: ($(window).height() - elem.height()) / 2 + "px")) ) ))
Application ng FlexboxAng mga bagong feature ng CSS3, gaya ng Flexbox, ay unti-unting nagiging karaniwan. Tumutulong ang teknolohiya na lumikha ng markup nang hindi gumagamit ng mga float, pagpoposisyon, atbp. Maaari rin itong gamitin upang isentro ang mga elemento. Halimbawa, ilapat ang Flexbox sa parent element.wrapper at igitna ang nilalaman sa loob:
Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; taas: 500px; lapad: 500px; ) .wrapper .content ( margin: auto; /* margin: 0 auto horizontal lang */ /* margin: vertical lang */ ) Lorem ipsum dolor sit amet
Ang panuntunang ito ay nakasentro sa elemento nang pahalang at patayo sa parehong oras - gumagana na ngayon ang margin hindi lamang para sa pahalang na pagkakahanay, kundi pati na rin para sa patayo. At walang alam na lapad/taas.
Mga kaugnay na mapagkukunan Tulungan ang proyektoKapag gumagawa ng mga div block, malamang na nakatagpo ka ng mga sitwasyon kung saan kailangan mong igitna ang iyong div nang pahalang at patayo gamit ang purong CSS. Halimbawa, kapag gumagawa ng mga pop-up na may . Mayroong ilang mga paraan upang ipatupad ang pagsentro, at sa artikulong ito ibabahagi ko ang aking mga paborito at pinakamadaling paraan, gamit ang CSS o jQuery.
Una, ang mga pangunahing kaalaman:
Pahalang na pagsentro sa CSSIto ay madaling gawin, ginagamit namin margin para sa ating div harangan.
ClassName( margin:0 auto; lapad:200px; taas:200px; )
Upang igitna ang isang div block nang pahalang lamang, kailangan mong tukuyin ang lapad ng bloke (lapad), gamitin ang auto property para sa kaliwa at kanang mga margin. Ang pamamaraang ito ay gagana para sa lahat ng mga elemento ng block (div, p, h1, at iba pa...). Para gamitin pahalang na pagsentro para sa mga inline na elemento (mga link, mga larawan...), kailangan mong ilapat ang display: block parameter;
Pahalang at patayong pagsentro sa CSSAng pagsentro ng isang div block nang pahalang at patayo sa parehong oras ay medyo nakakalito. Kailangan mong malaman ang mga sukat ng div block nang maaga.
ClassName( width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; )
Sa pamamagitan ng paggamit ng ganap na pagpoposisyon ng isang bloke, maaari nating alisin ito sa mga nakapaligid na elemento at matukoy ang posisyon nito kaugnay sa laki ng window ng browser. Ilipat ang div block 50% sa kaliwa at itaas ng window. Ang kaliwang sulok sa itaas ng block ay nasa gitna na ng browser window. Ang natitira na lang ay ilagay ang div block sa gitna ng pahina sa pamamagitan ng paglipat nito sa kalahati ng lapad nito sa kaliwa at kalahati ng taas nito pataas. Hooray! Ang resulta ay mahusay na pagsentro ng block sa puro css code.
Pahalang at patayong pagsentro sa jQueryGaya ng nabanggit kanina - pamamaraan ng CSS gumagana lamang ang pagsentro sa mga nakapirming dimensyon. Kung hindi tinukoy ang mga sukat, darating ang tulong paraan ng jQuery:
$(window).resize(function())( $(".className").css(( position:"absolute", left: ($(window).width() - $(".className").outerWidth ( ))/2, itaas: ($(window).height() - $(".className").outerHeight())/2 )); // Para patakbuhin ang function kapag na-load ang window: $(window).resize();
Operasyon ang pamamaraang ito ay patakbuhin ang resize() function gamit ang linyang $(window).resize() . Gumagana ang function na ito tuwing binabago ang window ng browser. Gumagamit kami ng outerWidth() at outerHeight() dahil, hindi tulad ng width() at height() , kasama sa mga ito ang padding at kapal ng mga border sa laki na ibinabalik nito. Huling linya, magsisimula sa proseso ng pagsentro sa div block kapag nag-load ang page.
Ang bentahe ng paggamit ng paraang ito ay maaaring hindi mo alam kung anong sukat ang div. Ang pangunahing disbentaha ay gumagana lamang ito kapag pinagana ang JavaScript. Samakatuwid, ang pamamaraang ito ay katanggap-tanggap para sa mga multifunctional na interface tulad ng VKontakte, Facebook, atbp.
Gaya ng nakasanayan, maaari mong imungkahi ang iyong paboritong paraan para sa pagsentro ng mga bloke sa pamamagitan ng pagkomento.
