Rreshtimi horizontal i div në qendër css. Përqendrimi i div dhe hollësive të tjera të pozicionimit

CSS

HTML

Unë mendoj se shumë prej jush që ju është dashur të merren me paraqitjen, keni hasur nevojën për të rreshtuar elementët vertikalisht dhe i dini vështirësitë që lindin kur vendosni një element në qendër.

Po, për shtrirjen vertikale ekziston një pronë e veçantë vertikale-linjë në CSS me vlera të shumëfishta. Sidoqoftë, në praktikë nuk funksionon aspak siç pritej. Le të përpiqemi ta kuptojmë këtë.

Le të krahasojmë qasjet e mëposhtme. Rreshtoni duke përdorur:

• tavolina,
• dhëmbëzimi,
• vija e gjatesise
• shtrirje,
• marzhi negativ,
• transformoj
• pseudo element
• flexbox.

Për ta ilustruar, merrni parasysh shembullin e mëposhtëm.

Ka dy elemente div, me njërin prej tyre të folezuar brenda tjetrit. Le t'u japim atyre klasat përkatëse - të jashtme dhe të brendshme.

Sfida është të rreshtoni elementin e brendshëm me qendrën e elementit të jashtëm.

Së pari, le të shqyrtojmë rastin kur dimensionet e blloqeve të jashtme dhe të brendshme i njohur. Le të shtojmë shfaqjen e rregullave: blloku inline në elementin e brendshëm, dhe rreshtimi i tekstit: në qendër dhe rreshtimi vertikal: nga mes në elementin e jashtëm.

Mos harroni se shtrirja zbatohet vetëm për elementët që kanë një modalitet ekrani në linjë ose në blloqe të brendshme.

Le të vendosim madhësitë e blloqeve, si dhe ngjyrat e sfondit në mënyrë që të shohim kufijtë e tyre.

E jashtme ( gjerësia: 200 pikselë; lartësia: 200 pikselë; rreshtimi i tekstit: në qendër; rreshtimi vertikal: i mesëm; ngjyra e sfondit: #ffc; ) . i brendshëm ( ekrani: blloku i brendshëm; gjerësia: 100 pikselë; lartësia: 100 pikselë; ngjyra e sfondit : #fcc )
Pas aplikimit të stileve, do të shohim që blloku i brendshëm është i rreshtuar horizontalisht, por jo vertikalisht:
http://jsfiddle.net/c1bgfffq/

Pse ndodhi? Puna është se vetia vertikale e rreshtimit ndikon në shtrirjen vetë elementi, jo përmbajtja e tij(përveç rasteve kur aplikohet në qelizat e tabelës). Prandaj, aplikimi i kësaj vetie në elementin e jashtëm nuk prodhoi asgjë. Për më tepër, aplikimi i kësaj vetie në një element të brendshëm gjithashtu nuk do të bëjë asgjë, pasi blloqet inline janë rreshtuar vertikalisht në lidhje me blloqet ngjitur, dhe në rastin tonë kemi një bllok inline.

Ka disa teknika për të zgjidhur këtë problem. Më poshtë do të hedhim një vështrim më të afërt në secilën prej tyre.

Rreshtimi duke përdorur një tabelë

Zgjidhja e parë që vjen në mendje është zëvendësimi i bllokut të jashtëm me një tabelë me një qelizë. Në këtë rast, shtrirja do të zbatohet në përmbajtjen e qelizës, domethënë në bllokun e brendshëm.

http://jsfiddle.net/c1bgfffq/1/

Disavantazhi i dukshëm i kësaj zgjidhjeje është se, nga pikëpamja semantike, është e gabuar të përdoren tabela për shtrirje. Disavantazhi i dytë është se krijimi i një tabele kërkon shtimin e një elementi tjetër rreth bllokut të jashtëm.

Minusi i parë mund të hiqet pjesërisht duke zëvendësuar etiketat e tabelës dhe td me div dhe duke vendosur modalitetin e shfaqjes së tabelës në CSS.

.mbështjellësi i jashtëm ( shfaqja: tabela; ) .i jashtëm ( shfaqja: qeliza e tabelës; )
Megjithatë, blloku i jashtëm do të mbetet ende një tabelë me të gjitha pasojat që pasojnë.

Rreshtimi duke përdorur dhëmbëzimet

Nëse dihen lartësitë e blloqeve të brendshme dhe të jashtme, atëherë shtrirja mund të vendoset duke përdorur dhëmbëzimet vertikale të bllokut të brendshëm duke përdorur formulën: (H e jashtme – H e brendshme) / 2.

E jashtme (lartësia: 200 px; ) . e brendshme (lartësia: 100 px; margjina: 50 px 0; )
http://jsfiddle.net/c1bgfffq/6/

Ana negative e zgjidhjes është se ajo është e zbatueshme vetëm në një numër të kufizuar rastesh kur dihen lartësitë e të dy blloqeve.

Rreshtimi duke përdorur lartësinë e vijës

Nëse e dini se blloku i brendshëm nuk duhet të zërë më shumë se një rresht teksti, atëherë mund të përdorni veçorinë line-height dhe ta vendosni atë të barabartë me lartësinë e bllokut të jashtëm. Meqenëse përmbajtja e bllokut të brendshëm nuk duhet të mbyllet në rreshtin e dytë, rekomandohet të shtoni edhe hapësirën e bardhë: nowrap dhe tejmbushje: rregulla të fshehura.

E jashtme (lartësia: 200 px; lartësia e vijës: 200 px; ) . e brendshme (hapësirë ​​e bardhë: tanirap; vërshimi: i fshehur; )
http://jsfiddle.net/c1bgfffq/12/

Kjo teknikë mund të përdoret gjithashtu për të rreshtuar tekstin me shumë rreshta nëse ripërcaktoni vlerën e lartësisë së rreshtit për bllokun e brendshëm dhe gjithashtu shtoni ekranin: blloku inline dhe rreshtimi vertikal: rregullat e mesme.

E jashtme (lartësia: 200 px; lartësia e vijës: 200 px; ) . e brendshme (lartësia e vijës: normale; ekrani: blloku i brendshëm; rreshtimi vertikal: në mes; )
http://jsfiddle.net/c1bgfffq/15/

Disavantazhi i kësaj metode është se lartësia e bllokut të jashtëm duhet të dihet.

Rreshtimi duke përdorur "stretch"

Kjo metodë mund të përdoret kur lartësia e bllokut të jashtëm është e panjohur, por lartësia e bllokut të brendshëm është e njohur.

Për ta bërë këtë ju duhet:

1. vendosni pozicionimin relativ në bllokun e jashtëm dhe pozicionimin absolut në bllokun e brendshëm;
2. shtoni rregullat lart: 0 dhe poshtë: 0 në bllokun e brendshëm, si rezultat i të cilit do të shtrihet në të gjithë lartësinë e bllokut të jashtëm;
3. vendosni mbushjen vertikale të bllokut të brendshëm në automatik.

.i jashtëm (pozicioni: relative; ) .i brendshëm (lartësia: 100 px; pozicioni: absolut; sipër: 0; poshtë: 0; margjina: automatike 0; )
http://jsfiddle.net/c1bgfffq/4/

Ideja prapa kësaj teknike është se vendosja e një lartësie për një bllok të shtrirë dhe absolutisht të pozicionuar bën që shfletuesi të llogarisë mbushjen vertikale në një raport të barabartë nëse është vendosur në automatik.

Rreshtimi me marzh negativ-lart

Kjo metodë është bërë e njohur gjerësisht dhe përdoret shumë shpesh. Ashtu si ai i mëparshmi, përdoret kur nuk dihet lartësia e bllokut të jashtëm, por dihet lartësia e atij të brendshëm.

Ju duhet të vendosni bllokun e jashtëm në pozicionim relativ dhe bllokun e brendshëm në pozicionim absolut. Më pas ju duhet ta zhvendosni bllokun e brendshëm me gjysmën e lartësisë së pjesës së sipërme të bllokut të jashtëm: 50% dhe ta ngrini atë me gjysmën e lartësisë së tij margjinale-maja: -H e brendshme / 2.

E jashtme ( pozicioni: relative; ) . i brendshëm (lartësia: 100 px; pozicioni: absolut; sipër: 50%; margjina-lart: -50 px; )
http://jsfiddle.net/c1bgfffq/13/

Disavantazhi i kësaj metode është se lartësia e njësisë së brendshme duhet të dihet.

Përafrimi me transformimin

Kjo metodë është e ngjashme me atë të mëparshme, por mund të përdoret kur lartësia e njësisë së brendshme nuk dihet. Në këtë rast, në vend që të vendosni një mbushje negative të pikselit, mund të përdorni vetinë e transformimit dhe ta zhvendosni bllokun e brendshëm lart duke përdorur funksionin translateY dhe një vlerë prej -50%.

E jashtme ( pozicioni: relative; ) .i brendshëm ( pozicioni: absolut; sipër: 50%; transformimi: përktheY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Pse ishte e pamundur të vendosej vlera si përqindje në metodën e mëparshme? Meqenëse vlerat e marzhit të përqindjes llogariten në lidhje me elementin mëmë, një vlerë prej 50% do të ishte gjysma e lartësisë së kutisë së jashtme dhe do të na duhej ta ngrinim kutinë e brendshme në gjysmën e lartësisë së saj. Vetia e transformimit është e përkryer për këtë.

Disavantazhi i kësaj metode është se nuk mund të përdoret nëse njësia e brendshme ka pozicionim absolut.

Përafrimi me Flexbox

Mënyra më moderne e shtrirjes vertikale është përdorimi i Flexible Box Layout (i njohur gjerësisht si Flexbox). Ky modul ju lejon të kontrolloni në mënyrë fleksibël pozicionimin e elementeve në faqe, duke i renditur ato pothuajse kudo. Shtrirja në qendër për Flexbox është një detyrë shumë e thjeshtë.

Blloku i jashtëm duhet të vendoset për të shfaqur: flex dhe blloku i brendshëm në diferencë: auto . Dhe kjo është e gjitha! E bukur, apo jo?

E jashtme (ekrani: përkul; gjerësia: 200 px; lartësia: 200 px; ) . e brendshme ( gjerësia: 100 px; diferenca: automatike; )
http://jsfiddle.net/c1bgfffq/14/

Disavantazhi i kësaj metode është se Flexbox mbështetet vetëm nga shfletuesit modernë.

Cila metodë duhet të zgjedh?

Ju duhet të filloni nga deklarata e problemit:

• Për të rreshtuar tekstin vertikalisht, është më mirë të përdorni dhëmbëzimet vertikale ose vetitë e lartësisë së vijës.
• Për elementët e pozicionuar absolutisht me një lartësi të njohur (për shembull, ikona), metoda me një veti negative të marzhit në krye është ideale.
• Për raste më komplekse, kur lartësia e bllokut është e panjohur, duhet të përdorni një pseudo element ose vetinë e transformimit.
• Epo, nëse jeni aq me fat sa nuk keni nevojë të mbështesni versionet më të vjetra të shfletuesit IE, atëherë, natyrisht, është më mirë të përdorni Flexbox.

Sot, i dashur lexues, do të merremi me problemin e shtrirjes vertikale në një bllok div.

Me shumë mundësi ju tashmë e dini për ekzistencën e një prone të mrekullueshme CSS vertikal-rreshtoj. Dhe vetë Zoti na urdhëroi të përdorim pikërisht këtë pronë për shtrirjen vertikale (nuk është më kot që ka një emër të tillë vetë-shpjegues).

Formulimi i problemit: Ju duhet të përqendroni përmbajtjen e një blloku me lartësi të ndryshueshme në lidhje me vertikalen.

Tani le të fillojmë të zgjidhim problemin.

Dhe kështu, ne kemi një bllok, lartësia e tij mund të ndryshojë:

Gjëja e parë që ju vjen në mendje është të bëni shakanë e mëposhtme:

Ka çdo arsye për të besuar se fraza Blloko përmbajtjen do të përafrohet në lartësinë qendrore të kontejnerit div.

Por nuk ishte aty! Ne nuk do të arrijmë asnjë shtrirje të pritshme në qendër në këtë mënyrë. Dhe pse? Duket se gjithçka tregohet saktë. Rezulton se kjo është fërkimi: prona vertikal-rreshtoj mund të përdoret vetëm për të lidhur përmbajtjen e qelizave të tabelës ose për të lidhur elementët e linjës në lidhje me njëri-tjetrin.

Lidhur me shtrirjen brenda një qelize tabele, mendoj se gjithçka është e qartë. Por unë do të shpjegoj një rast tjetër me elementë inline.

Rreshtimi vertikal i elementeve inline

Supozoni se keni një rresht teksti që ndahet nga etiketat e rreshtave në pjesë:

Ju mirëpret copë tekst!

Një etiketë inline është një kontejner, pamja e të cilit nuk bën që përmbajtja të mbështillet në një rresht të ri.

Veprimi i etiketës bllok bën që përmbajtja e kontejnerit të mbështillet në një rresht të ri.

është një etiketë blloku. Nëse i bashkojmë pjesët e tekstit në blloqe

, atëherë secili prej tyre do të jetë në një linjë të re. Duke përdorur etiketën , e cila, ndryshe nga

, është me shkronja të vogla, kontejnerët nuk do të zhvendosen në një linjë të re, të gjithë kontejnerët do të mbetet në një linjë.

Enë i përshtatshëm për t'u përdorur kur specifikoni një pjesë të tekstit me formatim të veçantë (duke theksuar atë me një ngjyrë, një font të ndryshëm, etj.)

Për kontejnerë Aplikoni vetitë e mëposhtme CSS:

#perviy( vertikal-linjë:sub; ) #vtoroy(vertikal-linjë:3px; ) #tretiy(vertikal-linjë:-3px; )

Rreshti i tekstit që rezulton do të duket si ky:

Kjo nuk është asgjë më shumë se shtrirja vertikale e elementeve inline dhe vetia CSS vertikal-rreshtoj përballon në mënyrë të përsosur këtë detyrë.

U shpërqëndruam pak, tani kthehemi në detyrën tonë kryesore.

Rreshtimi vertikal në kontejnerin div

Pavarësisht se çfarë, për shtrirjen brenda kontejnerit div ne do të përdorim pronën vertikal-rreshtoj. Siç e thashë tashmë, kjo veti mund të përdoret në rastin e rreshtimit të elementeve inline (ne e diskutuam këtë rast në detaje më lart dhe nuk është i përshtatshëm për ne për shtrirje në një kontejner div); ajo që mbetet është të përdoret fakti që vertikal-rreshtoj punon për qelizat e tabelës.

Si mund ta përdorim këtë? Ne nuk kemi një tavolinë, ne punojmë me një enë div.

Ha, rezulton të jetë shumë e thjeshtë.

Vetia CSS shfaqja ju lejon të ktheni bllokun tonë div në një qelizë tabele, kjo mund të bëhet lehtësisht dhe natyrshëm:

Le të themi se kemi një ndarje klase teksti:

Për këtë bllok ne specifikojmë pronën e mëposhtme CSS:

Textalign (ekrani: qeliza e tabelës; )

Ky udhëzim CSS do ta kthejë mrekullisht div-në tonë në një qelizë tabele pa e ndryshuar vizualisht atë në asnjë mënyrë. Dhe për një qelizë tabele mund të aplikojmë vetinë vertikal-rreshtoj plotësisht dhe shtrirja e dëshiruar vertikale do të funksionojë.

Megjithatë, gjithçka nuk mund të përfundojë kaq thjesht. Ne kemi një shfletues të mrekullueshëm IE. Ai nuk di të punojë me pronën shfaqja: qeliza e tabelës(Unë ju sugjeroj të lexoni tabelën që ilustron funksionalitetin e kësaj veçorie CSS në shfletues të ndryshëm në faqen e internetit htmlbook.ru). Prandaj, do të duhet të drejtohemi në truket e ndryshme.

Ka shumë mënyra për të arritur shtrirjen në një kontejner div për të gjithë shfletuesit:

• Metoda duke përdorur një enë shtesë div ndihmëse
• Metoda e përdorimit të shprehjes. Ajo është e lidhur me një llogaritje të ndërlikuar të lartësive të bllokut. Ju nuk mund ta bëni këtë pa njohuri të JavaScript.
• Përdorimi i vetive line-height. Kjo metodë është e përshtatshme vetëm për shtrirje vertikale në një bllok me lartësi të njohur, dhe për këtë arsye nuk është e zbatueshme në rastin e përgjithshëm.
• Përdorimi i kompensimit të përmbajtjes absolute dhe relative në rastin e shfletuesit IE. Kjo metodë më duket më e kuptueshme dhe e thjeshtë. Për më tepër, është i zbatueshëm për një enë div me lartësi të ndryshueshme. Ne do të ndalemi në të më në detaje.

Siç e kuptoni, ne vetëm duhet të zgjidhim problemin e shtrirjes vertikale në IE lidhur me keqkuptimin e saj të pronës shfaqja: qeliza e tabelës(as IE6, as IE7, as IE8 jo të njohur me këtë pronë). Prandaj, duke përdorur koment i kushtëzuar Ne do të specifikojmë veti të ndryshme CSS posaçërisht për shfletuesit IE.

Koment me kusht

Lloji i ndërtimit:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

quhet koment i kushtëzuar (kujdes, lloji i komentit me kusht duhet të korrespondojë plotësisht me shembullin e dhënë, deri në një hapësirë).

Udhëzimet e përfshira në një koment të tillë të kushtëzuar do të ekzekutohen vetëm nëse shfletuesi që interpreton këtë kod i përket familjes IE.

Kështu, duke përdorur një koment të kushtëzuar, ne mund të fshehim një pjesë të kodit nga të gjithë shfletuesit përveç IE.

Zgjidhja e problemit

Për shkak të gjithë këtij majdanozi, do të na duhet të sigurojmë kodin tonë HTML me dy kontejnerë shtesë. Kështu do të duket blloku ynë i tekstit:

Për kontejnerin div të klasës përafrimi i tekstit Vetitë e CSS janë vendosur që rreshtojnë përmbajtjen e saj vertikalisht për të gjithë shfletuesit normalë (përveç IE, natyrisht):

Ekrani: qeliza e tabelës; vertikale-linjë: në mes;

Dhe dy veti të tjera që vendosin gjerësinë dhe lartësinë për bllokun:

Gjerësia: 500 px; lartësia: 500 px;

Kjo është mjaft e mjaftueshme për të lidhur përmbajtjen e kontejnerit të përqendruar në lidhje me vertikale, në të gjithë shfletuesit përveç IE.

Tani fillojmë të shtojmë vetitë që lidhen me shtrirjen për shfletuesit e familjes IE(është për ta që kemi përdorur blloqe shtesë div Dhe shtrirje):

Duke iu referuar etiketës div brenda një blloku klase përafrimi i tekstit. Për ta bërë këtë, së pari duhet të tregoni emrin e klasës, dhe më pas, të ndarë me një hapësirë, etiketën në të cilën po aksesojmë.

Textalign div (pozicioni: absolute; lart: 50%; )

Ky dizajn do të thotë: për të gjitha etiketat div brenda një blloku me një klasë përafrimi i tekstit zbatoni vetitë e listuara.

Prandaj, stilet e specifikuara për bllokun përafrimi i tekstit modifikohen:

Textalign (ekrani: qeliza e tabelës; rreshtimi vertikal: mes; gjerësia: 500 px; lartësia: 500 px; pozicioni: relative; )

Tani pika e sipërme majtas e bllokut të tekstit është zhvendosur poshtë me 50%.

Për të shpjeguar se çfarë po ndodh, unë vizatova një ilustrim:

Siç mund ta shihni nga fotografia, ne kemi bërë disa përparime. Por kjo nuk është e gjitha! Pika e sipërme majtas e bllokut të verdhë është zhvendosur me të vërtetë 50% poshtë, në krahasim me bllokun mëmë (vjollcë). Por ne kemi nevojë që ajo të jetë në pesëdhjetë për qind të lartësisë së bllokut të purpurt. qendra e bllokut të verdhë, jo pika e sipërme majtas.

Tani etiketa do të hyjë në lojë shtrirje dhe pozicionimi i tij relativ:

Hapësira e tekstit (pozicioni: relative; lart: -50%; )

Kështu, ne e kemi zhvendosur bllokun e verdhë me 50% të lartësisë së tij, në krahasim me pozicionin e tij fillestar. Siç e kuptoni, lartësia e bllokut të verdhë është e barabartë me lartësinë e përmbajtjes së përqendruar. Dhe operacioni i fundit në enën e hapësirës vendosi përmbajtjen tonë në mes të bllokut të purpurt. Hora!

Le të luajmë pak hile

Para së gjithash, ne duhet të fshehim majdanozin nga të gjithë shfletuesit normalë dhe ta hapim atë për IE. Kjo mund të bëhet, natyrisht, duke përdorur një koment të kushtëzuar, jo më kot u njohëm me të:

Ka një problem të vogël. Nëse përmbajtja e përqendruar është shumë e lartë, atëherë kjo çon në pasoja të pakëndshme: ka një lartësi shtesë për rrotullën vertikale.

Zgjidhja e problemit: duhet të shtoni një pronë vërshoj: i fshehur bllokoj përafrimi i tekstit.

Njihuni me pronën në detaje vërshoj e mundur në.

Udhëzimet përfundimtare të CSS për bllokun përafrimi i tekstit ka formën:

Textalign (ekrani: qeliza e tabelës; rreshtimi vertikal: mes; gjerësia: 500 px; lartësia: 500 px; pozicioni: relative; tejmbushja: i fshehur; kufiri: 1 px i zi; )

Më falni, harrova të përmend një pikë të rëndësishme. Nëse provoni caktoni lartësinë e bllokut të klasës përafrimi i tekstit si përqindje, atëherë keni asgjë nuk do të funksionojë.

Përqendrimi në bllok me lartësi të ndryshueshme

Shumë shpesh ekziston nevoja për të vendosur lartësinë e një blloku të klasës përafrimi i tekstit jo në piksel, por si përqindje e lartësisë së bllokut prind dhe rreshtoni përmbajtjen e kontejnerit div në mes.

Kapja është se është e pamundur ta bësh këtë për një qelizë tabele (por blloku i klasës përafrimi i tekstit kthehet pikërisht në një qelizë tavoline, falë pronës ekran:tabela-qelizë).

Në këtë rast, duhet të përdorni një bllok të jashtëm për të cilin është specifikuar vetia CSS shfaqja: tabela dhe tashmë vendosni vlerën e përqindjes së lartësisë për të. Pastaj blloku u fut në të, me direktivën CSS ekran:tabela-qelizë, do të trashëgojë me kënaqësi lartësinë e bllokut prind.

Për të zbatuar një bllok me lartësi të ndryshueshme në shembullin tonë, ne do të modifikojmë pak CSS:

Tek klasa përafrimi i tekstit do të ndryshojmë vlerën e pasurisë shfaqja Me qelizë tavoline në tabela dhe hiqni direktivën e shtrirjes vertikal-linjë: në mes. Tani mund të ndryshojmë me siguri vlerën e lartësisë nga 500 piksele në, për shembull, 100%.

Pra, vetitë CSS për bllokun e klasës përafrimi i tekstit do të duket kështu:

Textalign (ekrani: tabela; gjerësia: 500 px; lartësia: 100%; pozicioni: relative; vërshimi: i fshehur; kufiri: 1 px i zi; )

Gjithçka që mbetet është të zbatohet përqendrimi i përmbajtjes. Për ta bërë këtë, një kontejner div u vendos në një bllok klase përafrimi i tekstit(ky është i njëjti bllok i verdhë në foto), ju duhet të vendosni pronën CSS ekran:tabela-qelizë, atëherë do të trashëgojë lartësinë 100% nga blloku mëmë përafrimi i tekstit(blloku vjollcë). Dhe asgjë nuk do të na ndalojë të përafrim përmbajtjen e kontejnerit të mbivendosur div në qendër me pronën vertikal-linjë: në mes.

Ne marrim një listë tjetër shtesë të vetive CSS për bllokun div të vendosur në kontejner përafrimi i tekstit.

Textalign div (ekrani: qeliza e tabelës; rreshtimi vertikal: në mes; )

Ky është i gjithë truku. Nëse dëshironi, mund të keni një lartësi të ndryshueshme me përmbajtjen në qendër.

Për më shumë informacion mbi shtrirjen vertikale të një blloku me lartësi të ndryshueshme, shihni .

Nga autori: Ju mirëpres përsëri në faqet e blogut tonë. Në artikullin e sotëm do të doja të flisja për teknika të ndryshme të shtrirjes që mund të aplikohen si për blloqet ashtu edhe për përmbajtjen e tyre. Në veçanti, si të rreshtoni blloqet në css, si dhe shtrirjen e tekstit.

Përafrimi i blloqeve në qendër

Në CSS, përqendrimi i një blloku është i lehtë. Kjo është teknika më e njohur për shumë njerëz, por unë do të doja të flisja për të tani, para së gjithash. Kjo do të thotë shtrirje e përqendruar horizontalisht në lidhje me elementin prind. Si bëhet? Le të themi se kemi një enë dhe lënda jonë eksperimentale është në të:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Le të supozojmë se ky është titulli i faqes. Nuk shtrihet në të gjithë gjerësinë e dritares dhe duhet ta përqendrojmë atë. Ne shkruajmë kështu:

#header( gjerësia / gjerësia maksimale : 800 px ; marzhi: 0 auto;

Duhet të specifikojmë gjerësinë e saktë ose maksimale, dhe më pas të shkruajmë veçorinë kryesore - margjina: 0 auto. Ajo vendos kufijtë e jashtëm të kokës sonë, vlera e parë përcakton kufijtë e sipërm dhe të poshtëm, dhe e dyta përcakton kufijtë e djathtë dhe të majtë. Vlera automatike i tregon shfletuesit që të llogarisë automatikisht mbushjen në të dyja anët, në mënyrë që elementi të përqendrohet saktësisht në prindin e tij. Të rehatshme!

Rreshtimi i tekstit

Kjo është gjithashtu një teknikë shumë e thjeshtë. Për të rreshtuar të gjithë elementët e linjës, mund të përdorni veçorinë e rreshtimit të tekstit dhe vlerat e saj: majtas, djathtas, qendër. Ky i fundit përqendron tekstin, gjë që na nevojitet. Ju madje mund të rreshtoni një fotografi në të njëjtën mënyrë, sepse ajo është gjithashtu një element inline si parazgjedhje.

Rreshtoni tekstin vertikalisht

Por kjo është më e ndërlikuar. Si parazgjedhje, nuk ka asnjë veçori të thjeshtë dhe të njohur që e përqendron lehtësisht tekstin vertikalisht në një enë blloku. Megjithatë, ka disa teknika që dizajnerët e paraqitjes kanë dalë me gjatë viteve.

Vendosni lartësinë e bllokut duke përdorur mbushjen. Mënyra nuk është të vendosni një lartësi të qartë duke përdorur lartësinë, por ta krijoni atë artificialisht duke përdorur mbushje në krye dhe në fund, të cilat duhet të jenë të njëjta. Le të krijojmë çdo bllok dhe t'i shkruajmë vetitë e mëposhtme:

div( sfond: #ccc; mbushje: 30px 0; )

div( sfond : #ccc; mbushje: 30px 0;

Sfondi është vetëm për të treguar vizualisht skajet si dhe mbushjen. Tani lartësia e bllokut përbëhet nga këto dy dhëmbëza dhe vetë rreshti, dhe gjithçka duket kështu:

Përcaktoni lartësinë e vijës për bllokun. Unë mendoj se kjo është një mënyrë më e saktë nëse ju duhet të rreshtoni një rresht teksti. Me të, ju mund të shkruani lartësinë sipas normales, duke përdorur veçorinë lartësi. Pas kësaj, ai gjithashtu duhet të vendosë lartësinë e linjës, të njëjtë me lartësinë e bllokut në tërësi.

div (lartësia: 60 px; lartësia e vijës: 60 px; )

div( lartësia: 60 px; lartësia e vijës: 60 px;

Rezultati do të jetë i ngjashëm me foton e mësipërme. Gjithçka do të funksionojë edhe nëse shtoni mbushje. Megjithatë, vetëm për një rresht. Nëse keni nevojë për më shumë tekst në element, atëherë kjo metodë nuk do të funksionojë.

Konvertoni një bllok në një qelizë tabele. Thelbi i kësaj metode është se qeliza e tabelës ka veçorinë vertikale-align: mesme, e cila e përqendron elementin vertikalisht. Prandaj, në këtë rast blloku duhet të vendoset në sa vijon:

div (ekrani: qeliza e tabelës; rreshtimi vertikal: në mes; )

div( shfaqja: tabela - qelizë; vertikale - rresht: në mes;

Kjo metodë është e mirë sepse mund të rreshtoni sa më shumë tekst që dëshironi në qendër. Por është më mirë të shkruani tabelën display: në bllokun në të cilin është vendosur div-ja jonë, përndryshe mund të mos funksionojë.

Epo, këtu kemi ardhur te teknika e fundit për sot - kjo është shtrirja vertikale e vetë blloqeve. Duhet thënë se, përsëri, nuk ka asnjë pronë që është projektuar posaçërisht për këtë, por ka disa truke që duhet të keni parasysh.

Vendosni dhëmbëzimet si përqindje. Nëse e dini lartësinë e një elementi prind dhe vendosni një element tjetër bllok brenda tij, mund ta përqendroni atë duke përdorur mbushjen e përqindjes. Për shembull, prindi ka një lartësi prej 600 pikselësh. Ju vendosni një bllok në të që është 300 piksel i lartë. Sa ju duhet të tërhiqeni në krye dhe në fund për ta përqendruar atë? 150 piksel secila, që është 25% e gjatësisë së prindit.

Kjo metodë lejon përafrimin vetëm kur dimensionet lejojnë llogaritjet. Dhe nëse prindi juaj është 887 piksele në lartësi, atëherë nuk do të jeni në gjendje të regjistroni asgjë me saktësi, kjo tashmë është e qartë.

Futni një element në një qelizë tabele. Përsëri, nëse e transformojmë elementin prind në një qelizë tabele, atëherë blloku i futur në të do të përqendrohet automatikisht vertikalisht. Për ta bërë këtë, prindi duhet vetëm të vendosë vertikal-align: mes.

Dhe nëse, përveç kësaj, shkruajmë edhe marzhin: 0 auto, atëherë elementi do të përqendrohet horizontalisht!

Rreshtoni tekstin vertikalisht në CSS- një punë shumë e vështirë. Kam parë mjaft njerëz që luftojnë me këtë saqë vazhdimisht gjej gabime "kritike" kur bëhet fjalë për dizajnin aktual të përgjegjshëm.

Por mos kini frikë: nëse tashmë jeni duke luftuar me shtrirjen vertikale të CSS, keni ardhur në vendin e duhur.

Le të flasim për vetinë vertikale të rreshtimit CSS

Kur fillova të punoja për herë të parë në zhvillimin e uebit, u mundova pak me këtë pronë. Mendova se duhet të funksionojë si një pronë klasike" rreshtimi i tekstit" Ah, sikur gjithçka të ishte kaq e thjeshtë...

Vetia CSS e rreshtimit vertikal funksionon shkëlqyeshëm me tabela, por jo me div ose elementë të tjerë. Kur e përdorni atë në një div, ai rreshton elementin në lidhje me div-të e tjerë, por jo përmbajtjen e tij. Në këtë rast, prona funksionon vetëm me ekran: inline-block; .

Shih shembullin

Ne duam të përqendrojmë përmbajtjen, jo vetë div!

Ju keni dy opsione. Nëse keni vetëm elementë div me tekst, atëherë mund të përdorni veçorinë line-height. Kjo do të thotë që ju duhet të dini lartësinë e elementit, por nuk mund ta vendosni atë. Në këtë mënyrë teksti juaj do të jetë gjithmonë në qendër.

E vërteta për këtë qasje Rreshtimi vertikal i CSS ka një pengesë. Nëse teksti është me shumë rreshta, atëherë lartësia e rreshtit do të shumëzohet me numrin e rreshtave. Me shumë mundësi, në këtë rast, do të përfundoni me një faqe të shtruar tmerrësisht.

Hidhini një sy këtij shembulli

Nëse përmbajtja që dëshironi të përqendroni përbëhet nga më shumë se një rresht, atëherë është më mirë të përdorni ndarjet e tabelave. Mund të përdorni edhe tabela, por kjo nuk është e saktë semantikisht. Nëse keni nevojë për pushime për qëllime të përgjegjshme, është më mirë të përdorni elementë div.

Që kjo të funksionojë, duhet të ketë një kontejner prind me ekran: tabelë dhe brenda saj numrin e dëshiruar të kolonave që dëshironi të përqendroni duke përdorur ekranin: qeliza e tabelës dhe rreshtimi vertikal: në mes .

Shih shembullin

Pse funksionon kjo me shënjimin e tabelës, por jo me elementët div? Sepse rreshtat në tabelë kanë të njëjtën lartësi. Kur përmbajtja e një qelize tabele nuk përdor të gjithë hapësirën e disponueshme të lartësisë, shfletuesi automatikisht shton mbushje vertikale për të përqendruar përmbajtjen.

pronë e pozicionit

Le të fillojmë me bazat e shtrirjes vertikale të CSS div:

• pozicioni: static është i paracaktuar. Elementi është dhënë sipas rendit HTML;
• pozicion: absolut - përdoret për të përcaktuar pozicionin e saktë të një elementi. Ky pozicion lidhet gjithmonë me elementin mëmë të pozicionuar relativisht afër (jo statike). Nëse nuk përcaktoni pozicionin e saktë të një elementi, do të humbni kontrollin e tij. Do të shfaqet rastësisht, duke injoruar plotësisht rrjedhën e dokumentit. Si parazgjedhje, elementi shfaqet në këndin e sipërm të majtë;
• pozicion: relative - përdoret për të pozicionuar një element në lidhje me pozicionin e tij normal (statik). Kjo vlerë ruan rendin e rrjedhës së dokumentit;
• pozicioni: fiks - përdoret për të pozicionuar elementin në lidhje me dritaren e shfletuesit në mënyrë që të jetë gjithmonë i dukshëm në portin e shikimit.

Shënim: disa veti ( krye dhe z-indeksi) funksionon vetëm nëse elementi është vendosur në pozicion (jo statike).

Le të fillojmë me biznesin!

Dëshironi të zbatoni Shtrirja vertikale e qendrës CSS? Fillimisht krijoni një element me pozicion dhe dimensione relative. Për shembull: 100% në gjerësi dhe lartësi.

Hapi i dytë mund të ndryshojë në varësi të shfletuesve të synuar, por ju mund të përdorni një nga dy opsionet:

• Prona e vjetër: duhet të dihet madhësia e saktë e dritares për të hequr gjysmën e gjerësisë dhe gjysmën e lartësisë. Shih shembullin;
• Veti e re CSS3: Mund të shtoni një pronë transformimi me një vlerë përkthimi prej 50% dhe blloku do të jetë gjithmonë në qendër. Shiko shembullin.

Në thelb, nëse doni të përqendroni përmbajtjen, asnjëherë mos përdorni pjesën e sipërme: 40% ose majtas: 300 px . Kjo funksionon mirë në ekranet e provës, por nuk është në qendër.

Mbani mend pozicionin: fiks? Ju mund të bëni të njëjtën gjë me të si me një pozicion absolut, por nuk keni nevojë për një pozicion relativ për elementin prind - ai gjithmonë do të pozicionohet në lidhje me dritaren e shfletuesit.

A keni dëgjuar për specifikimet flexbox?

Mund të përdorni flexbox. Kjo është shumë më e mirë se çdo opsion tjetër rreshtimi i tekstit në qendër CSS vertikalisht. Me flexbox, menaxhimi i elementeve është si lojë fëmijësh. Problemi është se disa shfletues duhet të hidhen poshtë, si IE9 dhe versionet më poshtë. Këtu është një shembull se si të përqendroni vertikalisht një bllok:

Shiko shembullin

Duke përdorur një plan urbanistik flexbox, mund të përqendroni shumë blloqe.

Nëse zbatoni atë që mësoni nga këta shembuj, mund ta zotëroni Rreshtimi vertikal i bllokut CSS sa me shpejt te jete e mundur.

Lidhje dhe lexim të mëtejshëm

Mësoni shënimin CSS

FlexBox Froggy

Sandbox Flexbox

Përkthimi i artikullit " Rreshtimi vertikal i CSS për të gjithë (përfshihen bedelet)” u përgatit nga ekipi miqësor i projektit.

Unë mendoj se shumë prej jush që ju është dashur të merren me paraqitjen, keni hasur nevojën për të rreshtuar elementët vertikalisht dhe i dini vështirësitë që lindin kur vendosni një element në qendër.

Po, për shtrirjen vertikale ekziston një pronë e veçantë vertikale-linjë në CSS me vlera të shumëfishta. Sidoqoftë, në praktikë nuk funksionon aspak siç pritej. Le të përpiqemi ta kuptojmë këtë.

Le të krahasojmë qasjet e mëposhtme. Rreshtoni duke përdorur:

• tavolina,
• dhëmbëzimi,
• vija e gjatesise
• shtrirje,
• marzhi negativ,
• transformoj
• pseudo element
• flexbox.

Për ta ilustruar, merrni parasysh shembullin e mëposhtëm.

Ka dy elemente div, me njërin prej tyre të folezuar brenda tjetrit. Le t'u japim atyre klasat përkatëse - të jashtme dhe të brendshme.

Sfida është të rreshtoni elementin e brendshëm me qendrën e elementit të jashtëm.

Së pari, le të shqyrtojmë rastin kur dimensionet e blloqeve të jashtme dhe të brendshme i njohur. Le të shtojmë shfaqjen e rregullave: blloku inline në elementin e brendshëm, dhe rreshtimi i tekstit: në qendër dhe rreshtimi vertikal: nga mes në elementin e jashtëm.

Mos harroni se shtrirja zbatohet vetëm për elementët që kanë një modalitet ekrani në linjë ose në blloqe të brendshme.

Le të vendosim madhësitë e blloqeve, si dhe ngjyrat e sfondit në mënyrë që të shohim kufijtë e tyre.

E jashtme ( gjerësia: 200 pikselë; lartësia: 200 pikselë; rreshtimi i tekstit: në qendër; rreshtimi vertikal: i mesëm; ngjyra e sfondit: #ffc; ) . i brendshëm ( ekrani: blloku i brendshëm; gjerësia: 100 pikselë; lartësia: 100 pikselë; ngjyra e sfondit : #fcc )
Pas aplikimit të stileve, do të shohim që blloku i brendshëm është i rreshtuar horizontalisht, por jo vertikalisht:
http://jsfiddle.net/c1bgfffq/

Pse ndodhi? Puna është se vetia vertikale e rreshtimit ndikon në shtrirjen vetë elementi, jo përmbajtja e tij(përveç rasteve kur aplikohet në qelizat e tabelës). Prandaj, aplikimi i kësaj vetie në elementin e jashtëm nuk prodhoi asgjë. Për më tepër, aplikimi i kësaj vetie në një element të brendshëm gjithashtu nuk do të bëjë asgjë, pasi blloqet inline janë rreshtuar vertikalisht në lidhje me blloqet ngjitur, dhe në rastin tonë kemi një bllok inline.

Ka disa teknika për të zgjidhur këtë problem. Më poshtë do të hedhim një vështrim më të afërt në secilën prej tyre.

Rreshtimi duke përdorur një tabelë

Zgjidhja e parë që vjen në mendje është zëvendësimi i bllokut të jashtëm me një tabelë me një qelizë. Në këtë rast, shtrirja do të zbatohet në përmbajtjen e qelizës, domethënë në bllokun e brendshëm.

http://jsfiddle.net/c1bgfffq/1/

Disavantazhi i dukshëm i kësaj zgjidhjeje është se, nga pikëpamja semantike, është e gabuar të përdoren tabela për shtrirje. Disavantazhi i dytë është se krijimi i një tabele kërkon shtimin e një elementi tjetër rreth bllokut të jashtëm.

Minusi i parë mund të hiqet pjesërisht duke zëvendësuar etiketat e tabelës dhe td me div dhe duke vendosur modalitetin e shfaqjes së tabelës në CSS.

.mbështjellësi i jashtëm ( shfaqja: tabela; ) .i jashtëm ( shfaqja: qeliza e tabelës; )
Megjithatë, blloku i jashtëm do të mbetet ende një tabelë me të gjitha pasojat që pasojnë.

Rreshtimi duke përdorur dhëmbëzimet

Nëse dihen lartësitë e blloqeve të brendshme dhe të jashtme, atëherë shtrirja mund të vendoset duke përdorur dhëmbëzimet vertikale të bllokut të brendshëm duke përdorur formulën: (H e jashtme – H e brendshme) / 2.

E jashtme (lartësia: 200 px; ) . e brendshme (lartësia: 100 px; margjina: 50 px 0; )
http://jsfiddle.net/c1bgfffq/6/

Ana negative e zgjidhjes është se ajo është e zbatueshme vetëm në një numër të kufizuar rastesh kur dihen lartësitë e të dy blloqeve.

Rreshtimi duke përdorur lartësinë e vijës

Nëse e dini se blloku i brendshëm nuk duhet të zërë më shumë se një rresht teksti, atëherë mund të përdorni veçorinë line-height dhe ta vendosni atë të barabartë me lartësinë e bllokut të jashtëm. Meqenëse përmbajtja e bllokut të brendshëm nuk duhet të mbyllet në rreshtin e dytë, rekomandohet të shtoni edhe hapësirën e bardhë: nowrap dhe tejmbushje: rregulla të fshehura.

E jashtme (lartësia: 200 px; lartësia e vijës: 200 px; ) . e brendshme (hapësirë ​​e bardhë: tanirap; vërshimi: i fshehur; )
http://jsfiddle.net/c1bgfffq/12/

Kjo teknikë mund të përdoret gjithashtu për të rreshtuar tekstin me shumë rreshta nëse ripërcaktoni vlerën e lartësisë së rreshtit për bllokun e brendshëm dhe gjithashtu shtoni ekranin: blloku inline dhe rreshtimi vertikal: rregullat e mesme.

E jashtme (lartësia: 200 px; lartësia e vijës: 200 px; ) . e brendshme (lartësia e vijës: normale; ekrani: blloku i brendshëm; rreshtimi vertikal: në mes; )
http://jsfiddle.net/c1bgfffq/15/

Disavantazhi i kësaj metode është se lartësia e bllokut të jashtëm duhet të dihet.

Rreshtimi duke përdorur "stretch"

Kjo metodë mund të përdoret kur lartësia e bllokut të jashtëm është e panjohur, por lartësia e bllokut të brendshëm është e njohur.

Për ta bërë këtë ju duhet:

1. vendosni pozicionimin relativ në bllokun e jashtëm dhe pozicionimin absolut në bllokun e brendshëm;
2. shtoni rregullat lart: 0 dhe poshtë: 0 në bllokun e brendshëm, si rezultat i të cilit do të shtrihet në të gjithë lartësinë e bllokut të jashtëm;
3. vendosni mbushjen vertikale të bllokut të brendshëm në automatik.

.i jashtëm (pozicioni: relative; ) .i brendshëm (lartësia: 100 px; pozicioni: absolut; sipër: 0; poshtë: 0; margjina: automatike 0; )
http://jsfiddle.net/c1bgfffq/4/

Ideja prapa kësaj teknike është se vendosja e një lartësie për një bllok të shtrirë dhe absolutisht të pozicionuar bën që shfletuesi të llogarisë mbushjen vertikale në një raport të barabartë nëse është vendosur në automatik.

Rreshtimi me marzh negativ-lart

Kjo metodë është bërë e njohur gjerësisht dhe përdoret shumë shpesh. Ashtu si ai i mëparshmi, përdoret kur nuk dihet lartësia e bllokut të jashtëm, por dihet lartësia e atij të brendshëm.

Ju duhet të vendosni bllokun e jashtëm në pozicionim relativ dhe bllokun e brendshëm në pozicionim absolut. Më pas ju duhet ta zhvendosni bllokun e brendshëm me gjysmën e lartësisë së pjesës së sipërme të bllokut të jashtëm: 50% dhe ta ngrini atë me gjysmën e lartësisë së tij margjinale-maja: -H e brendshme / 2.

E jashtme ( pozicioni: relative; ) . i brendshëm (lartësia: 100 px; pozicioni: absolut; sipër: 50%; margjina-lart: -50 px; )
http://jsfiddle.net/c1bgfffq/13/

Disavantazhi i kësaj metode është se lartësia e njësisë së brendshme duhet të dihet.

Përafrimi me transformimin

Kjo metodë është e ngjashme me atë të mëparshme, por mund të përdoret kur lartësia e njësisë së brendshme nuk dihet. Në këtë rast, në vend që të vendosni një mbushje negative të pikselit, mund të përdorni vetinë e transformimit dhe ta zhvendosni bllokun e brendshëm lart duke përdorur funksionin translateY dhe një vlerë prej -50%.

E jashtme ( pozicioni: relative; ) .i brendshëm ( pozicioni: absolut; sipër: 50%; transformimi: përktheY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Pse ishte e pamundur të vendosej vlera si përqindje në metodën e mëparshme? Meqenëse vlerat e marzhit të përqindjes llogariten në lidhje me elementin mëmë, një vlerë prej 50% do të ishte gjysma e lartësisë së kutisë së jashtme dhe do të na duhej ta ngrinim kutinë e brendshme në gjysmën e lartësisë së saj. Vetia e transformimit është e përkryer për këtë.

Disavantazhi i kësaj metode është se nuk mund të përdoret nëse njësia e brendshme ka pozicionim absolut.

Përafrimi me Flexbox

Mënyra më moderne e shtrirjes vertikale është përdorimi i Flexible Box Layout (i njohur gjerësisht si Flexbox). Ky modul ju lejon të kontrolloni në mënyrë fleksibël pozicionimin e elementeve në faqe, duke i renditur ato pothuajse kudo. Shtrirja në qendër për Flexbox është një detyrë shumë e thjeshtë.

Blloku i jashtëm duhet të vendoset për të shfaqur: flex dhe blloku i brendshëm në diferencë: auto . Dhe kjo është e gjitha! E bukur, apo jo?

E jashtme (ekrani: përkul; gjerësia: 200 px; lartësia: 200 px; ) . e brendshme ( gjerësia: 100 px; diferenca: automatike; )
http://jsfiddle.net/c1bgfffq/14/

Disavantazhi i kësaj metode është se Flexbox mbështetet vetëm nga shfletuesit modernë.

Cila metodë duhet të zgjedh?

Ju duhet të filloni nga deklarata e problemit:

• Për të rreshtuar tekstin vertikalisht, është më mirë të përdorni dhëmbëzimet vertikale ose vetitë e lartësisë së vijës.
• Për elementët e pozicionuar absolutisht me një lartësi të njohur (për shembull, ikona), metoda me një veti negative të marzhit në krye është ideale.
• Për raste më komplekse, kur lartësia e bllokut është e panjohur, duhet të përdorni një pseudo element ose vetinë e transformimit.
• Epo, nëse jeni aq me fat sa nuk keni nevojë të mbështesni versionet më të vjetra të shfletuesit IE, atëherë, natyrisht, është më mirë të përdorni Flexbox.

Etiketa: Shtoni etiketa