Përafrimi i blloqeve sipas lartësisë. CSS - Vendosni bllokun në qendër. Përqendrimi i një imazhi duke përdorur Line-Height
Kur shtroni një faqe, shpesh është e nevojshme të kryhet shtrirja në qendër duke përdorur metodën CSS: për shembull, përqendrimi i bllokut kryesor. Ekzistojnë disa opsione për zgjidhjen e këtij problemi, secila prej të cilave herët a vonë duhet të përdoret nga çdo projektues i paraqitjes.
Përafrimi i tekstit në qendër
Shpesh, për qëllime dekorative, është e nevojshme të vendosni tekstin në shtrirjen në qendër, në këtë rast ju lejon të zvogëloni kohën e paraqitjes. Më parë, kjo bëhej duke përdorur atributet HTML, por tani standardi kërkon që teksti të përafrohet duke përdorur fletët e stilit. Ndryshe nga blloqet, për të cilat duhet të ndryshoni kufijtë, në CSS, përqendrimi i tekstit bëhet duke përdorur një rresht të vetëm:
- text-align:center;
Kjo pronë trashëgohet dhe kalohet nga prindi te të gjithë pasardhësit. Ndikon jo vetëm tekstin, por edhe elementë të tjerë. Për ta bërë këtë, ato duhet të jenë inline (për shembull, span) ose blloqe inline (çdo blloqe që ka grupin e vetive të ekranit: bllok). Opsioni i fundit ju lejon gjithashtu të ndryshoni gjerësinë dhe lartësinë e elementit dhe të rregulloni dhëmbëzat në mënyrë më fleksibël.
Shpesh në faqe, align i caktohet vetë etiketës. Kjo menjëherë e zhvlerëson kodin, pasi W3C e ka zhvlerësuar atributin align. Përdorimi i tij në një faqe nuk rekomandohet.
Përafrimi i një blloku në qendër
Nëse keni nevojë të përqendroni një div, CSS ofron një mënyrë mjaft të përshtatshme: përdorimin e margjinave. Indencat mund të vendosen si për elementët e bllokut ashtu edhe për elementët e blloqeve inline. Vlera e pronës duhet të jetë 0 (mbushje vertikale) dhe automatike (mbushje automatike horizontale):
- marzhi: 0 auto;
Tani ky opsion njihet si absolutisht i vlefshëm. Përdorimi i mbushjes së jashtme gjithashtu ju lejon të vendosni imazhin në qendër: ju lejon të zgjidhni shumë probleme që lidhen me pozicionimin e një elementi në faqe.
Rreshtoni një bllok majtas ose djathtas
Ndonjëherë shtrirja e qendrës CSS nuk kërkohet, por ju duhet të vendosni dy blloqe krah për krah: një në skajin e majtë, tjetrin në të djathtë. Për këtë qëllim, ekziston një pronë float, e cila mund të marrë një nga tre vlerat: majtas, djathtas ose asnjë. Le të themi se keni dy blloqe që duhet të vendosen krah për krah. Atëherë kodi do të jetë si ky:
- .majtas (float:majtas;)
- .djathtas (float:djathtas)
Nëse ekziston edhe një bllok i tretë, i cili duhet të jetë i vendosur nën dy blloqet e para (për shembull, një fund), atëherë duhet t'i jepet vetia e qartë:
- .majtas (float:majtas;)
- .djathtas (float:djathtas)
- fundi i faqes (e qartë: të dyja)
Fakti është se blloqet me klasat majtas dhe djathtas bien jashtë rrjedhës së përgjithshme, domethënë, të gjithë elementët e tjerë injorojnë vetë ekzistencën e elementeve të rreshtuar. Vetia e qartë: të dyja lejon që fundi ose çdo bllok tjetër të shohë elementët që kanë rënë jashtë rrjedhës dhe ndalon notimin në të majtë dhe në të djathtë. Prandaj, në shembullin tonë, futeri do të lëvizë poshtë.
Rreshtimi vertikal
Ka raste kur nuk mjafton të vendosni shtrirjen qendrore duke përdorur metodat CSS, gjithashtu duhet të ndryshoni pozicionin vertikal të bllokut të fëmijëve; Çdo element inline ose inline-block mund të vendoset në skajin e sipërm ose të poshtëm, në mes të një elementi prind ose në çdo vend. Më shpesh, blloku duhet të përafrohet në qendër për këtë, përdoret atributi vertikal. Le të themi se ka dy blloqe, njëri i vendosur brenda tjetrit. Në këtë rast, blloku i brendshëm është një element inline-block (ekrani: inline-block). Ju duhet të rreshtoni bllokun e fëmijëve vertikalisht:
- shtrirje në krye - .fëmijë (vertical-align:lart);
- shtrirja në qendër - .fëmijë(vertikal-linjë:mes);
- shtrirje nga fundi - .fëmijë(vertikal-linjë:poshtë);
As rreshtimi i tekstit dhe as ai vertikal nuk ndikon në elementët e bllokut.
Probleme të mundshme me blloqe të rreshtuara
Ndonjëherë përqendrimi i një div duke përdorur CSS mund të shkaktojë pak probleme. Për shembull, kur përdorni float: le të themi se ka tre blloqe: .first, .second dhe .third. Blloqet e dytë dhe të tretë shtrihen në të parën. Elementi me klasën e dytë është rreshtuar majtas, dhe blloku i fundit është rreshtuar djathtas. Pas nivelimit, të dy ranë nga rrjedha. Nëse elementi prind nuk ka një lartësi të caktuar (për shembull, 30em), atëherë ai nuk do të shtrihet më në lartësinë e blloqeve të tij fëmijë. Për të shmangur këtë gabim, përdorni një "spacer" - një bllok i veçantë që sheh .second dhe .tretë. Kodi CSS:
- .sekond (float:majtas)
- .tretë (float:djathtas)
- .clearfix(lartësia:0; qartë: të dyja;)
Përdoret shpesh pseudo-class:after, i cili gjithashtu ju lejon të ktheni blloqet në vendin e tyre duke krijuar një pseudo-space (në shembull, një div me klasën e kontejnerit shtrihet brenda.first dhe përmban.majtë dhe djathtas) :
- .left(float:majtas)
- .djathtas (float:djathtas)
- .container:after(përmbajtja:""; shfaq:tabelë; qartë:të dyja;)
Opsionet e mësipërme janë më të zakonshmet, megjithëse ka disa variacione. Ju gjithmonë mund të gjeni mënyrën më të thjeshtë dhe më të përshtatshme për të krijuar një pseudo-hapësirë përmes eksperimentimit.
Një problem tjetër që shpesh hasin dizajnerët e paraqitjes është shtrirja e elementeve të blloqeve inline. Një hapësirë shtohet automatikisht pas secilës prej tyre. Vetia e marzhit, e cila është vendosur në një ndarje negative, ndihmon për të përballuar këtë. Ka metoda të tjera që përdoren shumë më rrallë: për shembull, zeroing Në këtë rast, font-size: 0 shkruhet në vetitë e elementit prind. Nëse ka tekst brenda blloqeve, atëherë madhësia e kërkuar e shkronjave është kthyer tashmë në vetitë e elementeve të blloqeve inline. Për shembull, madhësia e shkronjave: 1em. Kjo metodë nuk është gjithmonë e përshtatshme, kështu që opsioni me hyrje të jashtme përdoret shumë më shpesh.
Përafrimi i blloqeve ju lejon të krijoni faqe të bukura dhe funksionale: kjo përfshin paraqitjen e paraqitjes së përgjithshme, rregullimin e produkteve në dyqanet online dhe fotografitë në faqen e internetit të kartës së biznesit.
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 ne 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 - marzhi: 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ë dy 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ë e të njohur që e përqendron lehtësisht tekstin vertikalisht në një enë blloku. Sidoqoftë, ka disa teknika me të cilat dizajnerët e paraqitjes kanë dalë me kalimin e 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 keni nevojë të rreshtoni një rresht teksti. Me të, ju mund të regjistroni lartësinë si normale 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ë do të synohej posaçërisht për këtë, por ka disa truke që duhet t'i dini.
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!
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, ekziston një veçori e veçantë me shumë vlera të rreshtimit vertikal në CSS për shtrirjen vertikale. Sidoqoftë, në praktikë nuk funksionon aspak siç pritej. Le të përpiqemi ta kuptojmë këtë.
Le të krahasojmë qasjet e mëposhtme. Rreshtimi duke përdorur:
- tavolina,
- dhëmbëzimi,
- vija e gjatesise
- shtrirje,
- marzhi negativ,
- transformoj
- pseudo element
- flexbox.
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 se 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ës 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; kufiri: 50 px 0; )
http://jsfiddle.net/c1bgfffq/6/
Disavantazhi i zgjidhjes është se është i zbatueshëm 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ë: nowrap; tejmbushje: e 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: 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 dihet.Për ta bërë këtë ju duhet:
- vendosni pozicionimin relativ në bllokun e jashtëm dhe pozicionimin absolut në bllokun e brendshëm;
- 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;
- vendosni mbushjen vertikale të bllokut të brendshëm në automatik.
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: relativ; ) . i brendshëm ( pozicioni: absolut; lart: 50%; transformimi: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Pse nuk ishte e mundur 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ë margjina: 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.
Shpesh gjatë paraqitjes ka nevojë për shtrirje vertikale të tekstit në një bllok. Nëse kjo duhet të bëhet në një qelizë tabele, atëherë vendoset vlera e vetive CSS me rreshtim vertikal.
Por lind një pyetje e arsyeshme: a është e mundur të bëhet pa një tabelë, pa mbingarkuar paraqitjen e faqes me etiketa të panevojshme? Përgjigja është "ju mundeni", por për shkak të mbështetjes së dobët të CSS në shfletuesin MSIE, zgjidhja e problemit për të do të jetë e ndryshme nga zgjidhja për shfletuesit e tjerë të zakonshëm.
Si shembull, merrni parasysh fragmentin e mëposhtëm:
Disa tekst
dhe përpiquni të përafroni vertikalisht tekstin në qendër të bllokut dhe në skajin e poshtëm të bllokut.
Zgjidhja e problemit
Shfletuesit "korrekt" (përfshirë MSIE
Shumica e shfletuesve modernë mbështesin CSS2.1, përkatësisht vlerën e qelizës së tabelës për vetinë e ekranit. Kjo na jep mundësinë të detyrojmë një bllok teksti të shfaqet si një qelizë tabele dhe, duke përfituar nga kjo, ta rreshtojmë tekstin vertikalisht:
div(
shfaqja: qeliza e tabelës;
vertikale-linjë: në mes;
}
div(
shfaqja: qeliza e tabelës;
vertikale-linjë: fundi;
}
Internet Explorer (deri në versionin 7 duke përfshirë)
Ju mund ta zgjidhni problemin e rreshtimit të tekstit në skajin e poshtëm të një blloku në MSIE duke përdorur pozicionimin absolut (këtu do të na duhet një element vargu i futur në bllok):
div(
pozicioni: i afërm;
}
hapësirë div (
shfaqja: bllok;
pozicioni: absolut;
fundi: 0%;
majtas: 0%;
gjerësia: 100%;
}
Ky grup rregullash funksionon gjithashtu në shfletuesit "korrekt".
Specifikoni vetitë
Hapësira div (
shfaqja: bllok;
gjerësia: 100%;
}
nuk është e nevojshme, por ato mund të nevojiten nëse, përveç shtrirjes vertikale të tekstit, planifikoni të përdorni edhe shtrirjen horizontale, për shembull, rreshtimi i tekstit: në qendër ;.
Për të lidhur vertikalisht tekstin në qendër të bllokut, fragmenti origjinal do të duhet ende të jetë i ndërlikuar - ne do të prezantojmë një element tjetër të linjës:
Materiali për të studiuar:
- Përqendrimi vertikal në CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
- Përqendrimi vertikal duke përdorur CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
- Rreshtimi vertikal (www.cssplay.co.uk/ie/valign.html)
- vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
- Një metodë tjetër e shtrirjes vertikale në CSS (cssing.org.ua/2007/04/26/another-css-valign-method)
Vlad Merzheviç
Për shkak të faktit se përmbajtja e qelizave të tabelës mund të rreshtohet njëkohësisht horizontalisht dhe vertikalisht, mundësitë për të kontrolluar pozicionin e elementeve në lidhje me njëri-tjetrin zgjerohen. Tabelat ju lejojnë të vendosni shtrirjen e imazheve, tekstit, fushave të formës dhe elementeve të tjerë në lidhje me njëra-tjetrën dhe faqen e internetit në tërësi. Në përgjithësi, shtrirja është kryesisht e nevojshme për të vendosur lidhje vizuale midis elementeve të ndryshëm, si dhe për t'i grupuar ato së bashku.
Përqendrimi vertikal
Një mënyrë për t'i treguar vizitorit fokusin dhe emrin e faqes është të përdorni një faqe splash. Kjo është faqja e parë në të cilën, si rregull, ka një ekran të ndezur ose një foto që shpreh idenë kryesore të faqes. Imazhi është gjithashtu një lidhje me seksionet e tjera të faqes. Ju duhet ta vendosni këtë imazh në qendër të dritares së shfletuesit, pavarësisht nga rezolucioni i monitorit. Për këtë qëllim, mund të përdorni një tabelë me gjerësi dhe lartësi 100% (shembulli 1).
Shembulli 1: Përqendrimi i vizatimit
|
Në këtë shembull, shtrirja horizontale vendoset duke përdorur parametrin e etiketës align="center".
Për të vendosur lartësinë e tabelës në 100%, duhet të hiqni, kodi pushon së qeni i vlefshëm.
Përdorimi i gjerësisë dhe lartësisë për të mbuluar të gjithë zonën e disponueshme të faqes së internetit siguron që përmbajtja e tabelës do të rreshtohet saktësisht në qendër të dritares së shfletuesit, pavarësisht nga madhësia e saj.
Rreshtimi horizontal
Duke kombinuar atributet align (rreshtimi horizontal) dhe valign (drejtimi vertikal) të etiketës
Le të shohim disa shembuj të shtrirjes së tekstit sipas figurës më poshtë.
Rreshtimi në krye
Për të specifikuar shtrirjen e sipërme të përmbajtjes së qelizës, për një etiketë
Shembulli 2: Përdorimi i valign
| Kolona 1 | Kolona 2 |
Në këtë shembull, karakteristikat e qelizave kontrollohen duke përdorur parametrat e etiketës
Shembulli 3: Aplikimi i stileve për shtrirje
| Kolona 1 | Kolona 2 |
Për të shkurtuar kodin, ky shembull përdor grupimin e përzgjedhësve sepse vetitë vertikale të rreshtimit dhe mbushjes aplikohen në dy qeliza në të njëjtën kohë.
Rreshtimi nga poshtë bëhet në të njëjtën mënyrë, por në vend të vlerës së sipërme, përdoret fundi.
Shtrirja në qendër
Si parazgjedhje, përmbajtja e qelizës është rreshtuar në qendrën e tyre vertikale, kështu që nëse kolonat kanë lartësi të ndryshme, duhet të vendosni shtrirjen në skajin e sipërm. Ndonjëherë ju ende duhet të lini metodën origjinale të shtrirjes, për shembull, kur vendosni formula, siç tregohet në Fig. 2.
Në këtë rast, formula është e vendosur rreptësisht në qendër të dritares së shfletuesit, dhe numri i saj ndodhet në skajin e djathtë. Për të rregulluar elementët në këtë mënyrë, do t'ju duhet një tabelë me tre qeliza. Qelizat më të jashtme duhet të kenë të njëjtat dimensione, në qelizën e mesme shtrirja bëhet në qendër, dhe në të djathtë - përgjatë skajit të djathtë (shembulli 4). Ky numër qelizash kërkohet për të siguruar që formula të jetë e pozicionuar në qendër.
Shembulli 4: Përafrimi i formulës
 |
(18.6) |
Në këtë shembull, qeliza e parë e tabelës është lënë bosh, ajo shërben vetëm për të krijuar një indent, i cili, meqë ra fjala, mund të vendoset edhe duke përdorur stile.
Përafrimi i elementeve të formës
Duke përdorur tabela, është e përshtatshme të përcaktohet pozicioni i fushave të formës, veçanërisht kur ato janë të ndërthurura me tekst. Një nga opsionet e projektimit për formularin, i cili ka për qëllim futjen e një komenti, është paraqitur në Fig. 3.
Për t'u siguruar që teksti pranë fushave të formularit është i rreshtuar djathtas dhe vetë elementët e formularit janë të rreshtuar majtas, do t'ju duhet një tabelë me një kufi të padukshëm dhe dy kolona. Kolona e majtë do të përmbajë vetë tekstin dhe kolona e djathtë do të përmbajë fusha teksti (shembulli 5).
Shembulli 5: Përafrimi i fushave të formularit
Në këtë shembull, për ato qeliza ku kërkohet rreshtimi djathtas, shtohet atributi align="right". Për t'u siguruar që etiketa e komentit të jetë e pozicionuar në krye të tekstit me shumë rreshta, qeliza përkatëse vendoset në rreshtimin lart duke përdorur atributin valign.
