Ċċentrata: CSS-tqassim

Meta it-tqassim tal-paġna spiss ikun meħtieġ li ssir ċċentrata CSS naħat: per eżempju, center l-unità prinċipali. Hemm diversi soluzzjonijiet għal din il-problema, li kull wieħed minnhom illum jew għada se jkollhom tuża kwalunkwe Coder.

Tallinja test center

Spiss għal skopijiet dekorattivi inti tixtieq li twaqqaf it-test ċċentrata, CSS f'dan il-każ, biex jitnaqqas il-ħin ta 'impożizzjoni. Preċedentement dan sar bl-użu HTML-attributi, iżda issa l-istandard meħtieġ biex tallinja t-test mal-karta tal-istil. B'kuntrast mal-blokk li għalih inti tixtieq li tibdel l-ikkuttunar estern fl-allinjament CSS ta 'test fin-nofs huwa magħmul ma' linja waħda:

• test allinjament: ċentru;

Din il-proprjetà tintiret u mgħoddi minn ġenitur għat-tfal kollha. Dan jaffettwa mhux biss it-test, iżda wkoll ma 'elementi oħra. Għal dan il-għan, huma għandhom jiġu zghar (eż medda) jew ringiela-blokk (kwalunkwe blokki li jispeċifikaw il-proprjetà wirja: blokk). L-għażla aħħar tippermetti wkoll li inti tbiddel il-wisa 'u għoli tal-element, aktar konfigurazzjoni flessibbli tas-indentazzjoni.

paġni spiss jallinjaw attribut li lilu nnifsu l-tikketta. Dan immedjatament jagħmel il-kodiċi invalida, peress W3C rikonoxxut attribut allinjament skaduti. Jużawh fuq paġna mhux rakkomandat.

blokk ċċentrata

Jekk inti tixtieq li tiffissa l-allinjament tal-div fin-nofs, CSS jistgħu joffru pjuttost b'mod komdu: l-użu ta 'marġni ikkuttunar esterna. Ikkuttunar jistgħu jiġu speċifikati l-elementi blokk, u l-linja-blokka. valur Svoysva għandu jkun 0 (ikkuttunar vertikali), u auto (indentazzjoni awtomatika orizzontalment):

• marġini: 0 auto;

Issa din l-għażla hija rikonoxxuta bħala assolutament validu. Bl-użu ikkuttunar estern tippermetti wkoll li inti li tiffissa l-allinjament taċ-ċentru: proprjetà CSS-marġni jippermetti li jissolvew bosta problemi assoċjati ma 'l-element pożizzjonament fuq il-paġna.

Allinjament tat-tarf tax-xellug jew dritt tal-blokka

Kultant CSS direzzjonijiet ma teħtieġx allinjament taċ-ċentru, iżda huwa meħtieġ li tpoġġi ż-żewġ blokki li jmiss, waħda minn fuq ix-xellug u l-ieħor --naħa leminija. Għal dan hemm l-proprjetà float, li jista 'jkollha waħda minn tliet valuri: xellug, lemin jew xejn. Ejja ngħidu li għandek żewġ blokki li għandhom jitpoġġew ħdejn xulxin. Imbagħad il-kodiċi huwa kif ġej:

• .left {float: xellug;}
• .right {float: id-dritt}

Jekk ikun hemm terz blokk, li għandu jkun jinsab taħt l-ewwel żewġ blokki (footer eż,), allura huwa neċessarju li tirreġistra karatteristika ċara:

• .left {float: xellug;}
• .right {float: id-dritt}
• footer {ċara: kemm}

Il-fatt li l-blokki ma 'l-klassijiet ta' xellug u lemin jaqgħu barra mill-fluss totali, jiġifieri, l-elementi l-oħra injorati l-eżistenza stess ta 'elementi allinjati. Proprjetà ċara: kemm jippermetti blokk footer jew kwalunkwe viżibbli ieħor preċipitat miċ-ċelloli tal-fluss u tipprojbixxi wrap (float) kemm fuq ix-xellug u lemin. Għalhekk, fl-eżempju tagħna, il-footer huwa spostati isfel.

allinjament vertikali

Hemm każijiet fejn mhux biżżejjed biex jistabbilixxu l-allinjament taċ-ċentru ta 'l-CSS-modi, inti trid ukoll jibdel il-pożizzjoni vertikali tal-blokka tfal. Kwalunkwe linja jew ringiela-blokk element jista 'jiġi ppressata kontra l-tarf ta' fuq jew ta 'taħt, li jinsabu fin-nofs tal-element ġenitur jew tkun f'post arbitrarja. Ħafna drabi jeħtieġ allinjament taċ-ċentru tal-blokka, hija tuża attribut vertikali allinjament. Ejja ngħidu li jeżistu żewġ blokok, waħda nested fi ħdan l-oħra. F'din l-unità ta 'ġewwa - Element ringiela-blokk (wirja: inline-blokk). Huwa meħtieġ li tallinja l-blokk tfal vertikali:

• allinjament tal-fruntiera ta 'fuq - .child {vertikali allinjament: top};
• ċċentrata - .child {vertikali allinjament: nofs};
• allinjament tat-tarf tal-qiegħ - .child {vertikali allinjament: qiegħ};

Fil elementi ta 'awdjo test allinjament, jew vertikali allinjament ma japplikax.

problemi possibbli ta 'unitajiet Allineat

Xi kultant div jallinjaw l-ċentru tal-CSS-mod jista 'jikkawża problemi ftit. Per eżempju, meta jużaw float: per eżempju, hemm tliet blokki: .first, .second u .third. It-tieni u t-tielet blokki jinsabu fl-ewwel. Element bi klassi tieni xellug allinjati, u l-aħħar blokka - fuq il-lemin. Wara allinjament it-tnejn niżel mill-fluss. Jekk l-element ġenitur mhuwiex definit għoli (eż 30em), din għandha tieqaf milli jifirxu l-għoli ta 'unitajiet sussidjarja. Biex jiġi evitat dan l-iżball, jużaw il- "ispejser" - unità speċjali, li jara .second u .third. CSS-kodiċi:

• .second {float: xellug}
• .third {float: id-dritt}
• .clearfix {għoli: 0; ċara: it-tnejn;}

psewdo spiss użati: wara, li tippermetti wkoll li jirritornaw il-blokki fis-seħħ permezz tal-ħolqien psevdorasporki (fl-eżempju fil-div mal-klassi tinsab ġewwa l-kontenitur u jinkludi .left .first u .right):

• .left {float: xellug}
• .right {float: id-dritt}
• .container: wara {kontenut: ''; wiri: Tabella; ċara: it-tnejn;}

L-għażliet ta 'hawn fuq - l-aktar komuni, għalkemm hemm xi varjazzjonijiet. Inti tista 'dejjem issib l-eħfef u aktar konvenjenti biex joħolqu psevdorasporki mill-esperimenti.

Problema oħra jokkorru frekwentament tqassim - allinjament ta 'elementi linja kbar. Wara kull wieħed minnhom spazju huwa miżjud awtomatikament. Opera jgħin lill-proprjetà marġni, li huwa definit mill-indentazzjoni negattiv. Hemm modi oħra, li huma użati anqas spiss, per eżempju, reset -daqs tat-tipa. F'dan il-każ, il-proprjetajiet tal-element ġenitur reġistri font-size: 0. Jekk jinsabu sa blokki ta 'test, il-proprjetajiet ta' elementi line-blokk marru lura lejn id-daqs tat-tipa mixtieq. Per eżempju, font-size: 1em. Il-metodu mhuwiex dejjem konvenjenti, u għalhekk huwa ferm aktar komunement użati verżjoni b'marġini esterni.

Allinjament Blokki jippermettilek li toħloq paġni sbieħ u funzjonali: it-tqassim ġenerali u t-tqassim, u l-post tal-merkanzija fil-ħwienet, u ritratti fuq is-sit ta 'żgħar.