Ang bawat taga-disenyo ng layout ay patuloy na nahaharap sa pangangailangang ihanay ang nilalaman sa isang bloke: pahalang o patayo. Mayroong maraming magagandang artikulo sa paksang ito, ngunit lahat sila ay nag-aalok ng maraming kawili-wili, ngunit kakaunting praktikal na mga opsyon, kaya naman kailangan mong gumastos dagdag na oras upang i-highlight ang pangunahing bagay. Nagpasya akong ipakita ang impormasyong ito sa isang form na maginhawa para sa akin, upang hindi na mag-google.

Pag-align ng mga bloke na may alam na laki

Ang pinakamadaling paraan ay sa gamit ang CSS ihanay ang mga bloke na ang taas (para sa patayong pagkakahanay) o lapad (para sa pahalang na pagkakahanay).

Pag-align gamit ang padding

Minsan hindi mo maaaring isentro ang isang elemento, ngunit magdagdag ng mga hangganan dito gamit ang property na "padding".

Halimbawa, mayroong isang larawan ng 200 by 200 pixels, at kailangan mo itong igitna sa isang block na 240 by 300. Maaari naming itakda ang taas at lapad ng outer block = 200px, at magdagdag ng 20 pixels sa itaas at ibaba , at 50 sa kaliwa at kanan.

.example-wrapper1 ( background : #535E73 ; width : 200px ; height : 200px ; padding : 20px 50px ; ) Ihanay ang ganap na nakaposisyon na mga bloke

Kung ang isang bloke ay nakatakda sa "posisyon: ganap", maaari itong iposisyon na may kaugnayan sa pinakamalapit na magulang nito na may "posisyon: kamag-anak." Upang gawin ito, kailangan mong magtalaga ng parehong halaga sa lahat ng mga katangian ("itaas","kanan", "ibaba","kaliwa") ng panloob na bloke, pati na rin ang "margin: auto".

*May isang nuance: Ang lapad (taas) ng panloob na bloke + ang halaga ng kaliwa (kanan, ibaba, itaas) ay hindi dapat lumampas sa mga sukat ng parent block. Mas maaasahan mga ari-arian na natitira(kanan, ibaba, itaas) magtalaga ng 0 (zero).

.example-wrapper2 ( position : relative ; height : 250px ; background : url(space.jpg) ; ) .cat-king ( width : 200px ; height : 200px ; position : absolute ; top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; margin : auto ;

Upang i-align ang text sa isang block, mayroong isang espesyal na property na "text-align". Kapag nakatakda sa "gitna", ang bawat linya ng teksto ay ihahanay nang pahalang. Para sa multiline na teksto Ang solusyon na ito ay bihirang ginagamit;

Minsan ay kinailangan kong makabuo ng ilang teksto upang ipakita kung paano gumagana ang pag-align ng teksto gamit ang CSS, ngunit walang kawili-wiling naisip. Sa una ay nagpasya akong kopyahin ang isang tula ng mga bata sa isang lugar, ngunit naalala ko na maaaring masira nito ang pagiging natatangi ng artikulo, at hindi ito mahahanap ng aming mahal na mga mambabasa sa Google. At pagkatapos ay nagpasya akong isulat ang talatang ito - pagkatapos ng lahat, ang punto ay hindi kasama nito, ngunit ang punto ay nasa pagkakahanay.

.example-text ( text-align : center ; padding : 10px ; background : #FF90B8 ; )

Kapansin-pansin na ang pag-aari na ito ay gagana hindi lamang para sa teksto, kundi pati na rin para sa anuman mga inline na elemento("display: inline").

Ngunit ang tekstong ito ay nakahanay sa kaliwa, ngunit ito ay nasa isang bloke na nakasentro kaugnay sa wrapper.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; lapad : 40% ; padding : 10px ; text-align : left ; background : #FFE5E5 ; ) Alignment mga bloke sa tulong margin

Ang mga elemento ng block na may alam na lapad ay madaling mai-align nang pahalang sa pamamagitan ng pagtatakda sa mga ito sa "margin-left: auto; margin-right: auto". Karaniwan ang shorthand notation ay ginagamit: "margin: 0 auto" (anumang value ay maaaring gamitin sa halip na zero). Ngunit ang pamamaraang ito ay hindi angkop para sa vertical alignment.

.lama-wrapper ( height : 200px ; background : #F1BF88 ; ) .lama1 ( height : 200px ; width : 200px ; background : url(lama.jpg) ; margin : 0 auto ; )

Ito ay kung paano mo dapat ihanay ang lahat ng mga bloke, kung saan posible (kung saan ang isang nakapirming o ganap na pagpoposisyon) - siya ang pinaka-lohikal at sapat. Bagama't mukhang halata ito, minsan ay nakakita ako ng mga nakakatakot na halimbawa na may mga negatibong indent, kaya nagpasya akong linawin.

Vertical alignment

Sa vertical alignment magkano mas maraming problema- tila, hindi ito ibinigay sa CSS. Mayroong ilang mga paraan upang makamit ang ninanais na resulta, ngunit lahat ng mga ito ay hindi masyadong maganda.

Pag-align sa line-height property

Sa kaso kapag mayroon lamang isang linya sa isang bloke, maaari mong makamit ang vertical alignment nito sa pamamagitan ng paglalapat ng property na "line-height" at pagtatakda nito sa nais na taas. Upang maging ligtas, dapat mo ring itakda ang "taas", ang halaga nito ay magiging katumbas ng halaga ng "line-height", dahil ang huli ay hindi sinusuportahan sa lahat ng browser.

.example-wrapper4 ( line-height : 100px ; color : #DC09C0 ; background : #E5DAE1 ; height : 100px ; text-align : center ; )

Posible rin na makamit ang block alignment na may ilang linya. Upang gawin ito, kakailanganin mong gumamit ng karagdagang bloke ng wrapper at itakda ang taas ng linya dito. Ang isang panloob na bloke ay maaaring multi-line, ngunit dapat ay "inline". Kailangan mong ilapat ang "vertical-align: middle" dito.

.example-wrapper5 ( line-height : 160px ; height : 160px ; font-size : 0 ; background : #FF9B00 ; ) .example-wrapper5 .text1 ( display : inline-block ; font-size : 14px ; line-height : 1.5 ; vertical-align : gitna ;

Dapat ay may set na "font-size: 0" ang wrapper block. Kung hindi naka-install walang sukat font, pagkatapos ay magdaragdag ang browser ng ilan mga dagdag na pixel. Kakailanganin mo ring tukuyin ang laki ng font at taas ng linya para sa panloob na bloke, dahil ang mga katangiang ito ay minana mula sa magulang.

Vertical alignment sa mga talahanayan

Naaapektuhan din ng property na "vertical-align" ang mga cell ng talahanayan. C itakda ang halaga"gitna", ang nilalaman sa loob ng cell ay nakahanay sa gitna. Siyempre, ang layout ng talahanayan ay itinuturing na archaic sa kasalukuyan, ngunit sa mga pambihirang kaso maaari mo itong gayahin sa pamamagitan ng pagtukoy sa "display: table-cell".

Karaniwang ginagamit ko ang opsyong ito para sa vertical alignment. Nasa ibaba ang isang halimbawa ng layout na kinuha mula sa isang nakumpletong proyekto. Ito ay ang larawan na nakasentro patayo sa paraang ito na interesante.

.one_product .img_wrapper ( display : table-cell ; height : 169px ; vertical-align : middle ; overflow : hidden ; background : #fff ; width : 255px ; ) .one_product img ( max-height : 169px ; max-width : 100 % ; min-width : 140px display : block ;

Dapat alalahanin na kung ang isang elemento ay may set na "float" maliban sa "wala", sa anumang kaso ito ay magiging block (display: block) - pagkatapos ay kailangan mong gumamit ng karagdagang block wrapper.

Pag-align sa isang karagdagang inline na elemento

At para sa mga inline na elemento maaari mong gamitin ang "vertical-align: middle". I-align nito ang lahat ng elemento sa "display: inline" na nasa parehong linya na nauugnay sa isang karaniwang center line.

Kailangan mong lumikha ng isang pantulong na bloke na may taas pantay na taas parent block, pagkatapos ay ang nais na block ay igitna. Upang gawin ito, maginhawang gamitin ang mga pseudo-elemento:bago o:pagkatapos.

.example-wrapper6 ( height : 300px ; text-align : center ; background : #70DAF1 ; ) .pudge ( display : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : # fff ; lapad : 200px ; taas : 200px .riki ( display : inline-block ; taas : 100% ; vertical-align : middle ; ) Display: flex at alignment

Kung wala kang pakialam sa mga user ng Explorer 8, o labis kang nagmamalasakit na handa kang magpasok ng isang piraso ng karagdagang javascript para sa kanila, maaari mong gamitin ang "display: flex". Ang mga Flex box ay mahusay sa pagharap sa mga isyu sa pagkakahanay, at isulat lang ang "margin: auto" upang isentro ang nilalaman sa loob.

Sa ngayon, halos hindi ko nakatagpo ang pamamaraang ito, ngunit walang mga espesyal na paghihigpit para dito.

.example-wrapper7 ( display : flex ; height : 300px ; background : #AEB96A ; ) .example-wrapper7 img ( margin : auto ; )

Well, iyon lang ang gusto kong isulat tungkol sa CSS alignment. Ngayon ang pagsentro ng nilalaman ay hindi magiging isang problema!

Vlad Merzhevich

Dahil sa ang katunayan na ang mga nilalaman ng mga cell ng talahanayan ay maaaring sabay-sabay na nakahanay nang pahalang at patayo, ang mga posibilidad para sa pagkontrol sa posisyon ng mga elemento na may kaugnayan sa bawat isa ay pinalawak. Binibigyang-daan ka ng mga talahanayan na itakda ang pagkakahanay ng mga larawan, teksto, mga field ng form, at iba pang mga elemento na nauugnay sa isa't isa at sa web page sa kabuuan. Sa pangkalahatan, ang pagkakahanay ay pangunahing kinakailangan upang maitaguyod ang visual na komunikasyon sa pagitan iba't ibang elemento, pati na rin ang kanilang mga pagpapangkat.

Vertical centering

Ang isang paraan upang ipakita sa bisita ang focus at pangalan ng site ay ang paggamit ng splash page. Ito ang unang pahina kung saan, bilang panuntunan, mayroong isang flash splash screen o isang larawan na nagpapahayag ng pangunahing ideya ng site. Ang larawan ay isa ring link sa iba pang mga seksyon ng site. Kailangan mong ilagay ang larawang ito sa gitna ng window ng browser, anuman ang resolution ng monitor. Para sa layuning ito, maaari kang gumamit ng isang talahanayan na may lapad at taas na 100% (halimbawa 1).

Halimbawa 1: Pagsentro sa pagguhit

Alignment TABLE ( width: 100%; /* Table width */ height: 100%; /* Table height */ )

SA sa halimbawang ito nakatakda ang pahalang na alignment gamit ang align="center" na parameter ng tag , at ang mga nilalaman ng cell ay maaaring hindi nakasentro patayo, dahil ito ang default na posisyon.

Upang itakda ang taas ng talahanayan sa 100%, kailangan mong alisin , hindi na magiging wasto ang code.

Ang paggamit ng lapad at taas upang masakop ang buong magagamit na lugar ng web page ay nagsisiguro na ang nilalaman ng talahanayan ay eksaktong nakahanay sa gitna ng window ng browser, anuman ang laki nito.

Pahalang na pagkakahanay

Sa pamamagitan ng pagsasama-sama ng mga attribute ng align (horizontal alignment) at valign (vertical alignment) ng tag , pinahihintulutang magtakda ng ilang uri ng mga posisyon ng mga elemento na nauugnay sa bawat isa. Sa Fig. Ipinapakita ng Figure 1 ang mga paraan upang ihanay ang mga elemento nang pahalang.

Tingnan natin ang ilang halimbawa ng pagkakahanay ng teksto ayon sa figure sa ibaba.

Nangungunang Alignment

Upang tukuyin ang tuktok na pagkakahanay ng mga nilalaman ng cell, para sa isang tag kailangan mong itakda ang valign attribute na may value sa itaas (halimbawa 2).

Halimbawa 2: Paggamit ng valign

Pag-align

Hanay 1

Hanay 2

Sa halimbawang ito, kinokontrol ang mga katangian ng cell gamit ang mga parameter ng tag , ngunit mas maginhawa ring magbago sa pamamagitan ng mga istilo.

Sa partikular, ang pagkakahanay sa mga cell ay tinukoy ng vertical-align at text-align na mga katangian (halimbawa 3).

Halimbawa 3: Paglalapat ng mga istilo para sa pagkakahanay

Hanay 1

Hanay 2

Alignment TABLE ( width: 100%; /* Table width */ ) #col1 ( width: 75%; /* First column width */ background: #f0f0f0; /* First column background color */ ) #col2 ( width: 25 %; /* Lapad ng ikalawang column */ background: #fc5; ; / * Top alignment */ padding: 5px /* Mga margin sa paligid ng mga nilalaman ng cell */ )

Upang paikliin ang code, ang halimbawang ito ay gumagamit ng pagpapangkat ng mga tagapili dahil ang vertical-align at padding na mga katangian ay inilalapat sa dalawang cell sa parehong oras.

Ang pag-align sa ibaba ay ginagawa sa parehong paraan, ngunit sa halip na ang pinakamataas na halaga, ibaba ang ginagamit.

Pag-align sa gitna Bilang default, ang mga nilalaman ng cell ay nakahanay sa gitna ng kanilang patayong linya, kaya kung ang mga column ay may iba't ibang taas, kailangan mong itakda ang pagkakahanay sa tuktok na gilid. Minsan kailangan mo pang umalis

orihinal na pamamaraan

Halimbawa 4: Pag-align ng Formula

Pag-align

(18.6)

Sa halimbawang ito, ang unang cell ng talahanayan ay naiwan na walang laman;

Pag-align ng Mga Elemento ng Form

Gamit ang mga talahanayan, ito ay maginhawa upang matukoy ang posisyon ng mga patlang ng form, lalo na kapag ang mga ito ay interspersed sa teksto. Ang isa sa mga pagpipilian sa disenyo para sa form, na inilaan para sa pagpasok ng isang komento, ay ipinapakita sa Fig. 3.

Upang ang teksto malapit sa mga patlang ng form ay nakahanay sa kanan, at ang mga elemento ng form mismo ay nakahanay sa kaliwa, kakailanganin mo ng isang talahanayan na may hindi nakikitang hangganan at dalawang hanay. Ang kaliwang column ay maglalaman ng text mismo, at ang kanang column ay maglalaman ng mga text field (halimbawa 5).

Halimbawa 5: Pag-align ng Form Fields

Pag-align

Pangalan
Email
Magkomento

Sa halimbawang ito, para sa mga cell kung saan kinakailangan ang tamang pagkakahanay, idinaragdag ang attribute na align="right".

Upang matiyak na ang label ng Komento ay nakaposisyon sa tuktok ng multiline na text, ang katumbas na cell ay nakatakda sa top-aligned gamit ang valign attribute. Ang CSS vertical-align property ay responsable para sa vertical alignment ng text at mga larawan sa page. Mahalagang tampok ay gumagana lamang ito sa mga elemento ng talahanayan, inline at inline-block na mga elemento

. Sinusuportahan ng lahat ng modernong browser. CSS Syntax

patayo-align

• ... vertical-align : value ; ...
• baseline - pagkakahanay sa baseline ng ninuno (o simpleng mas mababang hangganan ng magulang)
• ibaba - ihanay sa ilalim ng linya (o ang elementong nasa ibaba ng lahat) gitna - ihanay ang midpoint ng elemento sa baseline ng magulang kasama ang kalahati ng taas
• elemento ng magulang
• sub - ang display ay nangyayari sa ibaba ng linya (mukhang isang subscript)
• super - ang pagpapakita ay nangyayari sa itaas ng linya (bilang isang superscript) text-bottom - pagkakahanay mababang limitasyon
• elemento sa ibaba ng linya
• text-top - ihanay ang tuktok na hangganan ng elemento sa tuktok na gilid ng linya
• itaas - ihanay ang tuktok na gilid ng elemento sa tuktok ng pinakamataas na elemento sa linya
• magmana - nagmamana ng halaga ng magulang halaga - ipinahiwatig sa mga pixel. Positibong numero
• lumilipat paitaas kaugnay sa baseline. Negative pababa

interes - ipinahiwatig sa mga porsyento. Ang isang positibong numero ay lumilipat paitaas na may kaugnayan sa baseline. Negative pababa

• Default na vertical-align na halaga:
• baseline (para sa mga inline na elemento)

gitna (para sa mga cell ng talahanayan)

Ang pinakakaraniwang paggamit ng vertical-align ay sa mga cell ng talahanayan. Sa tag

gamitin ang valign attribute.

CSS valign syntax para sa mga talahanayan

Saan maaaring kunin ng halaga ang mga sumusunod na halaga:

• baseline - pagkakahanay sa unang baseline string ng teksto
• ibaba - ihanay sa ilalim na gilid ng cell ng talahanayan
• gitna - pagkakahanay sa gitna ng cell
• tuktok - align sa tuktok na gilid ng cell

Halimbawa:

o

I-align sa itaas

Pag-align sa gitna

Pagkahanay sa ibaba

I-align sa itaas

Pag-align sa gitna

Pagkahanay sa ibaba

Mga halimbawang may vertical alignment Halimbawa 1: vertical-align values: baseline, bottom, top, sub .vert_align_baseline ( display : inline-block ; vertical-align : baseline ; background : #ccc ; ) .vert_align_top ( display : inline-block ; vertical -align : itaas ; background : #ccc ; ) .vert_align_bottom ( display : inline-block ; vertical-align : bottom ; background : #ccc ; ) .vert_align_sub ( display : inline-block ; vertical-align : sub ; background : # ccc ; ) .vert_align_text_top ( display : inline-block ; vertical-align : top ; background : #ccc ; )
Naka-align na text vert_align_baseline
Naka-align na text vert_align_bottom
Naka-align na text vert_align_top
Text na may vert_align_sub alignment Halimbawa 2: vertical-align values: absolute values ​​​​and percentages

Nasa ibaba ang mga halimbawa ng patayong pagkakahanay sa ganap na halaga at mga porsyento.

.vert_align_abs_plus ( display : inline-block ; vertical-align : 10px ; background : #aaa ; ) .vert_align_abs_minus ( display : inline-block ; vertical-align : -5px ; background : #aaa ; ) .vert_align_per_plus ( display : inline- block ; vertical-align : 50% ; background : #aaa ;

Nagko-convert sa sumusunod sa pahina:

Pinagmulan na string. Naka-align ang text nang 10 pixels pataas
Pinagmulan na string. Naka-align ang text nang 5 pixels pababa
Pinagmulan na string. Naka-align ang text nang 50% pataas
Pinagmulan na string. Naka-align ang text nang 30% pababa

Tandaan

Ang vertical-align: middle value ay hindi nakahanay sa inline na elemento sa gitna ng malaking elemento sa linya (tulad ng inaasahan ng isa). Sa halip, inihanay ng gitnang halaga ang elementong nauugnay sa hypothetical maliit na titik"X" (tinatawag ding x-height).

Upang ma-access ang vertical-align mula sa JavaScript, kailangan mong isulat ang sumusunod na construction:

object.style.verticalAlign ="VALUE "

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: auto

Horizontal alignment gamit ang margin ay ginagamit kapag ang lapad ng nakasentro na elemento ay kilala. 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: center

Ang pamamaraang ito Angkop para sa nakasentro na 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 natitira

Angkop 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: center

Ang 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;

• .navigation ( text-align: center; ) .navigation li ( display: inline-block; )
• Bahay

Tungkol sa may-akda

Vertical 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 patayo

posisyon 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.

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; :

Vertical alignment display: table-cell .wrapper ( display: table; width: 100%; ) .cell ( display: table-cell; height: 100px; vertical-align: middle; )

line-height .wrapper ( height: 100px; line-height: 100px; )

Dynamic na pagkakahanay ng isang elemento sa isang page

Tumingin kami sa mga paraan upang ihanay ang mga elemento sa isang pahina gamit ang CSS. Ngayon tingnan natin ang pagpapatupad ng jQuery.

Ikonekta natin ang jQuery sa pahina:

Iminumungkahi kong magsulat simpleng function pagsentro ng isang elemento sa pahina, tawagin natin itong alignCenter() . Ang elemento mismo ay gumaganap bilang isang argumento sa 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 Flexbox

Ang 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 proyekto

ngayon, mahal na mambabasa, haharapin natin ang problema ng vertical alignment sa block div.

Malamang, alam mo na ang tungkol sa pagkakaroon ng magandang CSS property vertical-align.

At ang Diyos mismo ang nag-utos sa amin na gamitin nang tumpak ang pag-aari na ito para sa patayong pagkakahanay (ito ay hindi para sa wala na mayroon itong isang maliwanag na pangalan).

Paglalahad ng problema: Kinakailangang ihanay ang mga nilalaman ng isang variable na bloke ng taas na nakasentro sa vertical.

Ngayon simulan natin ang paglutas ng problema.

At kaya, mayroon kaming isang bloke, ang taas nito ay maaaring magbago:

I-block ang nilalaman

At kaya, mayroon kaming isang bloke, ang taas nito ay maaaring magbago:

Ang unang bagay na nasa isip ay gawin ang sumusunod na pagkukunwari: At kaya, mayroon kaming isang bloke, ang taas nito ay maaaring magbago: Mayroong lahat ng dahilan upang maniwala na ang parirala

ay ihahanay sa gitnang taas ng div container. Ngunit hindi iyon ang kaso! Hindi namin makakamit ang anumang inaasahang center alignment sa ganitong paraan. bakit naman Tila ang lahat ay ipinahiwatig nang tama. Ito ay lumabas na ito ang kuskusin: ang ari-arian patayo-align

maaari lamang gamitin upang ihanay ang mga nilalaman ng mga cell ng talahanayan o upang ihanay ang mga inline na elemento na nauugnay sa bawat isa.

Tungkol sa pagkakahanay sa loob ng isang table cell, sa tingin ko ang lahat ay malinaw. Ngunit ipapaliwanag ko ang isa pang kaso na may mga inline na elemento.

Vertical alignment ng mga inline na elemento Ipagpalagay na mayroon kang isang linya ng teksto na pinaghiwa-hiwalay ng mga tag ng linya

sa mga bahagi:

Isang piraso ng text ang malugod kang tinatanggap! Ang inline na tag ay isang container na ang hitsura ay hindi nagreresulta sa paglilipat ng nilalaman.

bagong linya

Ang pagkilos ng block tag ay nagiging sanhi ng mga nilalaman ng container na bumalot sa isang bagong linya. , ay isang block tag. Kung isasama natin ang mga piraso ng teksto sa mga bloke pagkatapos ay ang bawat isa sa kanila ay nasa isang bagong linya. Gamit ang tag , na, hindi katulad , ay lowercase, hindi ililipat ang mga container sa isang bagong linya, lahat ng container

mananatili sa isang linya. Lalagyan

maginhawang gamitin kapag tinukoy ang isang bahagi ng teksto na may espesyal na pag-format (pagha-highlight nito gamit ang isang kulay, ibang font, atbp.) Para sa mga lalagyan

#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

Ang resultang linya ng teksto ay magiging ganito:

Ito ay walang iba kundi ang patayong pagkakahanay ng mga inline na elemento, at CSS property ang vertical-align ay ganap na nakayanan ang gawaing ito.

Medyo nagambala kami, ngayon ay bumalik kami sa aming pangunahing gawain.

Vertical alignment sa div container

Anuman ang mangyari, gagamitin namin ang vertical-align na property para sa alignment sa loob ng div container. Gaya ng sinabi ko na, ari-arian na ito maaaring magamit sa kaso ng pag-align ng mga inline na elemento (tinalakay namin ang kasong ito nang detalyado sa itaas at hindi ito angkop para sa amin para sa pagkakahanay sa isang div container); ang natitira na lang ay gamitin ang katotohanang iyon Ngunit hindi iyon ang kaso! Hindi namin makakamit ang anumang inaasahang center alignment sa ganitong paraan. bakit naman Tila ang lahat ay ipinahiwatig nang tama. Ito ay lumabas na ito ang kuskusin: ang ari-arian gumagana para sa mga cell ng talahanayan.

Paano natin ito magagamit? Wala kaming table, nagtatrabaho kami sa isang div container.

Ha, napakasimple pala.

Ang CSS display property ay nagbibigay-daan sa amin na gawing table cell ang aming div block, madali at natural itong magagawa:

Sabihin na nating may class div tayo textalign:

At kaya, mayroon kaming isang bloke, ang taas nito ay maaaring magbago:

Para sa block na ito, tinukoy namin ang sumusunod na CSS property:

Textalign( display: table-cell; )

Ang pagtuturo ng CSS na ito ay mahimalang gagawing isang table cell ang aming div nang hindi ito nakikitang binabago sa anumang paraan. At para sa isang table cell maaari naming ilapat ang ari-arian Ngunit hindi iyon ang kaso! Hindi namin makakamit ang anumang inaasahang center alignment sa ganitong paraan. bakit naman Tila ang lahat ay ipinahiwatig nang tama. Ito ay lumabas na ito ang kuskusin: ang ari-arian ganap at gagana ang nais na vertical alignment.

Gayunpaman, ang lahat ay hindi maaaring magtapos nang simple. Mayroon kaming magandang IE browser. Hindi niya alam kung paano magtrabaho sa ari-arian display: table-cell(Iminumungkahi kong basahin mo ang talahanayan na naglalarawan ng pag-andar ng CSS property na ito sa iba't ibang browser sa website na htmlbook.ru). Samakatuwid, kailangan nating gumamit ng iba't ibang mga trick.

Mayroong maraming mga paraan upang makamit ang pagkakahanay sa isang div container para sa lahat ng mga browser:

• Paraan gamit ang isang karagdagang auxiliary div container
• Pamamaraan gamit ang pagpapahayag. Ito ay konektado sa isang nakakalito na pagkalkula ng mga taas ng bloke. Hindi mo ito magagawa nang walang kaalaman sa JavaScript.
• Gamit ang line-height property. Ang pamamaraang ito ay angkop lamang para sa patayong pagkakahanay sa isang bloke na alam ang taas, at samakatuwid ay hindi naaangkop sa pangkalahatang kaso.
• Paggamit ng ganap at kamag-anak na nilalaman na offset sa kaso ng IE browser. Ang pamamaraang ito ay tila sa akin ang pinaka-naiintindihan at simple. Bukod pa rito, ito ay maipapatupad para sa isang variable na taas ng div container. Tatalakayin natin ito nang mas detalyado.

Tulad ng naiintindihan mo, kailangan lang nating lutasin ang problema ng vertical alignment sa IE, na nauugnay sa hindi pagkakaunawaan nito sa property display: table-cell(ni IE6, o IE7, o IE8 ay hindi pamilyar sa property na ito). Samakatuwid, gamit ang isang kondisyon na komento partikular para sa mga browser ng pamilya ng IE, ipahiwatig namin ang iba pang mga katangian ng CSS.

May kondisyong komento

Uri ng konstruksiyon:

... Mga tagubilin na nalalapat lamang kung ang kundisyon sa mga square bracket ay totoo...

ay tinatawag na isang kondisyon na komento (mag-ingat, ang uri may kondisyong komento dapat ganap na tumutugma sa halimbawang ibinigay, hanggang sa isang espasyo).

Ang mga tagubiling nakapaloob sa naturang kondisyon na komento ay isasagawa lamang kung ang browser ay nag-interpret ang code na ito, ay kabilang sa pamilya ng IE.

Kaya, gamit ang isang kondisyon na komento, maaari naming itago ang isang piraso ng code mula sa lahat ng mga browser maliban sa IE.

Solusyon sa problema

Dahil sa lahat ng parsley na ito, kakailanganin naming ibigay ang aming HTML code ng dalawang karagdagang lalagyan. Ito ang magiging hitsura ng aming text block:

Ito ay ilang uri ng verification text.
Binubuo ito ng dalawang linya.

Para sa lalagyan ng div ng klase textalign Ang mga katangian ng CSS ay nakatakda na nakahanay sa nilalaman nito nang patayo para sa lahat normal na mga browser(maliban sa IE, siyempre):

Display: table-cell; vertical-align: gitna;

At dalawa pang katangian na nagtatakda ng lapad at taas para sa bloke:

Lapad:500px; taas: 500px;

Ito ay sapat na upang ihanay ang mga nilalaman ng lalagyan nang patayo, sa lahat ng mga browser maliban sa IE.

Ngayon nagsisimula kaming magdagdag ng mga katangian na nauugnay sa pagkakahanay para sa mga browser ng pamilya ng IE (para sa kanila na gumamit kami ng mga karagdagang bloke div At span):

Nagre-refer sa tag div sa loob ng isang bloke ng klase textalign. Upang gawin ito, kailangan mo munang ipahiwatig ang pangalan ng klase, at pagkatapos, pinaghihiwalay ng isang puwang, ang tag kung saan kami nag-a-access.

Textalign div( posisyon: ganap; tuktok: 50%; )

Ang disenyong ito ay nangangahulugang: para sa lahat mga tag ng div sa loob ng isang bloke na may klase textalign ilapat ang mga nakalistang katangian.

Alinsunod dito, ang mga istilong tinukoy para sa bloke textalign ay binago:

Textalign( display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; )

Ngayon ang tuktok na kaliwang punto ng bloke ng teksto ay inilipat pababa ng 50%.

Upang ipaliwanag kung ano ang nangyayari, gumuhit ako ng isang ilustrasyon:

Tulad ng nakikita mo mula sa larawan, nakagawa kami ng ilang pag-unlad. Ngunit hindi lang iyon! Ang kaliwang bahagi sa itaas ng dilaw na bloke ay talagang 50% pababa, na nauugnay sa parent (purple) na bloke. Ngunit kailangan natin ng limampung porsyento ng taas ng purple block upang maging sentro ng dilaw na bloke, at hindi ang tuktok na kaliwang punto nito.

Ngayon papasok na ang tag span at ang relatibong pagpoposisyon nito:

Textalign span( posisyon: kamag-anak; tuktok: -50%; )

Kaya, inilipat namin ang dilaw na bloke ng 50% ng taas nito, kaugnay sa panimulang posisyon. Tulad ng naiintindihan mo, ang taas ng dilaw na bloke ay katumbas ng taas ng nakasentro na nilalaman. At ang huling operasyon sa lalagyan ng span ay inilagay ang aming nilalaman sa gitna ng lilang bloke. Hooray!

Magdaya tayo ng kaunti

Una sa lahat, kailangan nating itago ang parsley mula sa lahat ng normal na browser at buksan ito para sa IE. Magagawa ito, siyempre, gamit ang isang kondisyong komento;

.textalign div( position: absolute; top: 50%; ) .textalign span( position: relative; top: -50%; )

May maliit na problema.

Kung ang nakasentro na nilalaman ay masyadong mataas, kung gayon ito ay humahantong sa hindi kasiya-siyang mga kahihinatnan: mayroong dagdag na taas para sa vertical scroll. Solusyon sa problema: kailangan mong magdagdag ng property overflow: nakatago harangan

textalign. Alamin ang property nang detalyado umaapaw

posible sa . textalign Ang huling mga tagubilin sa CSS para sa block

ay may anyo:

Textalign( display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; overflow: hidden; border: 1px solid black; ) Paumanhin, nakalimutan kong banggitin ang isa mahalagang punto textalign. Kung susubukan mong itakda ang taas ng isang bloke ng klase

sa mga tuntunin ng porsyento, pagkatapos ay walang gagana para sa iyo.

Pagsentro sa bloke ng variable na taas textalign Kadalasan mayroong pangangailangan na itakda ang taas ng isang bloke ng klase

hindi sa mga pixel, ngunit bilang isang porsyento ng taas ng parent block, at ihanay ang mga nilalaman ng div container sa gitna. textalign Ang catch ay imposibleng gawin ito para sa isang table cell (ngunit ang class block eksaktong nagiging isang table cell, salamat sa property).

display:table-cell Sa kasong ito kailangan mong gamitin panlabas na yunit , kung saan tinukoy ang CSS property display:table eksaktong nagiging isang table cell, salamat sa property at naitakda na ang porsyento na halaga ng taas para dito. Pagkatapos ay naka-nest ang block dito, kasama ang direktiba ng CSS

, ay masayang magmamana ng taas ng parent block.

Upang maipatupad ang isang variable na bloke ng taas sa aming halimbawa, i-edit namin ang CSS nang kaunti: textalign Sa klase babaguhin natin ang halaga ng ari-arian display Sa mesa-cell sa mesa at alisin ang direktiba sa pagkakahanay vertical-align: gitna

. Ngayon ay ligtas na nating mababago ang halaga ng taas mula 500 pixels sa, halimbawa, 100%. textalign Kaya ang mga katangian ng CSS para sa block ng klase

magiging ganito ang hitsura:

Ang natitira na lang ay ipatupad ang content centering. Upang gawin ito, isang div container ang naka-nest sa isang class block textalign(ito ay ang parehong dilaw na bloke sa larawan), kailangan mong itakda ang CSS property eksaktong nagiging isang table cell, salamat sa property, pagkatapos ay mamanahin nito ang taas na 100% mula sa parent block textalign(lilang bloke). At walang makakapigil sa amin na ihanay ang mga nilalaman ng nested div container sa gitna sa property at alisin ang direktiba sa pagkakahanay.

Kumuha kami ng isa pa karagdagang listahan CSS properties para sa div block nakapugad sa isang lalagyan textalign.

Textalign div( display: table-cell; vertical-align: middle; )

Iyan ang buong trick. Kung ninanais, maaari kang magkaroon ng variable na taas na nakasentro ang nilalaman.

Para sa higit pang impormasyon sa vertical alignment ng variable height block, tingnan ang .