Në procesin e paraqitjes së faqeve në internet, detyra e përqendrimit të blloqeve është mjaft e zakonshme. Kjo mund të jetë si qendërzim vertikal ashtu edhe horizontal.
Për shembull, nëse faqja ka një gjerësi fikse, atëherë do të ishte racionale ta rreshtoni atë në qendër të dritares së shfletuesit, sepse kjo e bën tekstin më të lehtë për t'u lexuar (veçanërisht nëse monitori është i madh). Disa dizajne përgjithësisht supozojnë vendndodhjen e bllokut në qendër të dritares së shfletuesit, d.m.th. në të njëjtën kohë qendërzim vertikal dhe horizontal.
Së pari, le të flasim për qendrimin horizontal. Teknika më e njohur është kur blloku përqendrohet duke vendosur dimensionet djathtas dhe majtas. margjina te "auto"... Le të themi se duam të vendosim në qendër një bllok me id = "container" 860px gjerësi. Në këtë rast, në skedarin CSS, duhet të shkruani:
#kontejner (
ngjyra e sfondit: #EEE;
gjerësia: 860 px;
marzhi: 0px automatik;
}
Megjithatë, I.E. Versionet e vjetra (për shembull 5.0) nuk do ta përqendrojnë këtë bllok. Sigurisht, askush nuk përdor më shfletues të tillë të lashtë (nga 1800 vizitorët e mi të përditshëm - vetëm 1), por për çdo rast, është më mirë ta bëni atë të funksionojë edhe atje :)
Për ta bërë këtë, elementi prind, domethënë ai brenda të cilit ne përqendrojmë bllokun tonë (zakonisht elementi prind është etiketa BODY), duhet të vendosni parametrin text-align: qendër... Në këtë rast, blloku do të rreshtohet në qendër, megjithatë, e gjithë përmbajtja e tij do të rreshtohet gjithashtu në qendër, dhe ne nuk kemi nevojë për këtë. Prandaj, brenda këtij blloku ne vendosim shtrirjen e paracaktuar - text-align: majtas .
trupi (drejtimi i tekstit: në qendër)
#kontejner (
ngjyra e sfondit: #EEE;
gjerësia: 860 px;
marzhi: 0px automatik;
text-align: majtas;
}
Ekziston gjithashtu një mënyrë tjetër për të lidhur horizontalisht një bllok bazuar në. Siç ndoshta e dini, si parazgjedhje, çdo element i nivelit të bllokut këputet në skajin e majtë të elementit prind. Prandaj, për ta lidhur atë në qendër, duhet të:
2. Zhvendoseni djathtas me 50% të gjerësisë së dritares së shfletuesit
3. Duke përdorur një diferencë negative, zhvendoseni atë majtas me një distancë të barabartë me gjysmën e gjerësisë së bllokut.
Kjo do ta vendosë bllokun në qendër. Për më shumë qartësi, shikoni videon më poshtë:
Shembull i kodit CSS:
#kontejner (
ngjyra e sfondit: # 559964;
pozicioni: absolut;
majtas: 50%;
margjina-majtas: -430px;
gjerësia: 860 px;
}
Duhet të theksohet se nëse dëshironi të poziciononi një bllok jo në lidhje me dritaren e shfletuesit, por, për shembull, në lidhje me një bllok tjetër, atëherë për këtë bllok tjetër duhet të vendosni pozicioni: i afërm;
Supozoni se blloku ynë #container që duhet të përqendrohet ndodhet brenda një blloku #wrap. Atëherë kodi do të duket si ky:
#mbështjell (pozicioni: i afërm)
#kontejner (
ngjyra e sfondit: # 559964;
pozicioni: absolut;
majtas: 50%;
margjina-majtas: -430px;
gjerësia: 860 px;
}
Tani le të shohim rastin kur duhet të rreshtoni një bllok në qendër të faqes, d.m.th. aplikoni qendrimin horizontal dhe vertikal në të njëjtën kohë. Këtu përsëri, pozicionimi është i zbatueshëm. Pra na duhen:
1. Jepini bllokut pozicionim absolut
2. Zhvendoseni në të djathtë me 50% dhe poshtë me 50%, duke vendosur kështu këndin e sipërm të majtë në qendër të dritares së shfletuesit.
3. Duke përdorur një diferencë negative, zhvendoseni atë lart me një distancë të barabartë me gjysmën e lartësisë së bllokut dhe majtas me një distancë të barabartë me gjysmën e gjerësisë së bllokut.
Kjo do ta vendosë bllokun në qendër të faqes së internetit.
Le të themi se lartësia e bllokut tonë është 600 px, por gjerësia është 860 px. Pastaj kodi CSS do të duket si ky:
#kontejner (
ngjyra e sfondit: # 559964;
pozicioni: absolut;
lartë: 50%;
majtas: 50%;
margin-top: -300px;
margjina-majtas: -430px;
lartësia: 600 px;
gjerësia: 860 px;
}
Shpresoj që vetë parimi të jetë i qartë për ju.
Komentet:
Unë do të jem i pari që do të shikoj mësimin !!!
Eh ... E dyta =) Kohët e fundit e kam hasur këtë problem në IE, vuajta për një kohë të gjatë)) Faleminderit =)
Faleminderit, faqe e shënuar)))
Faleminderit shumë, Andrey, për mësimet e reja!
Vetëm faleminderit, mendoj se nuk ka asgjë për të shtuar këtu))
Faleminderit për mësimin, vetëm disa ditë më parë u përpoqa ta bëja këtë, vuajta pak dhe u shty përkohësisht
Dhe unë kam një problem: faqja në Mozille Firefox nuk dëshiron të përafrohet, mbërtheu në skajin e majtë dhe kaq, asnjë nga sa më sipër nuk ndihmon (e njëjta gjë në Opera).
pse nuk funksionon - "nëse dëshironi të poziciononi bllokun jo në lidhje me dritaren e shfletuesit, por, për shembull, në lidhje me një bllok tjetër, atëherë për këtë bllok tjetër duhet të vendosni pozicionin: relative;"
Faleminderit shume!!thjesht faleminderit GJIGANTE!Zoti ju dhente shendet!
Gjithçka është në rregull, por për disa arsye të gjitha imazhet bien në vend vetëm pas përditësimit të shfletuesit. Ju lutem më tregoni, pse po ndodh kjo?
Andrey, ju lutemi shtoni një kërkim në sit.
Shto një koment.
Unë mendoj se shumë prej jush që kanë bërë paraqitjen e kanë hasur nevojën për të rreshtuar elementët vertikalisht dhe e dinë se çfarë vështirësish lindin kur rreshtoni një element në qendër.
Po, për shtrirjen vertikale, CSS ka një veti të veçantë vertikale të rreshtimit me vlera të shumta. Në praktikë, megjithatë, nuk funksionon aspak siç pritej. Le të përpiqemi ta kuptojmë.
Le të krahasojmë qasjet e mëposhtme. Lidhur me:
- tavolina,
- dhëmbëzimet,
- vija e gjatesise,
- shtrirje,
- marzhi negativ,
- transformoj,
- pseudoelement,
- flexbox.
Ka dy div, me njërën e vendosur brenda tjetrës. 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, merrni parasysh rastin kur dimensionet e njësive të jashtme dhe të brendshme i njohur... Le të shtojmë ekranin: inline-block në elementin e brendshëm, dhe text-align: në qendër dhe vertikal-align: mes në atë të jashtëm.
Mbaj mend që shtrirja zbatohet vetëm për elementët që kanë modalitetin e ekranit në linjë ose në blloqe të brendshme.
Le t'u japim blloqeve madhësitë dhe ngjyrat e sfondit për të parë kufijtë e tyre.
E jashtme (gjerësia: 200 px; lartësia: 200 px; rreshtimi i tekstit: në qendër; rreshtimi vertikal: mes; ngjyra e sfondit: #ffc;) . i brendshëm (ekrani: blloku i brendshëm; gjerësia: 100 px; lartësia: 100 px; 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?Çështja është se vetia vertikale-linjë ndikon në shtrirjen. vetë elementi, jo përmbajtja e tij(përveç kur zbatohet për qelizat e tabelës). Prandaj, aplikimi i kësaj vetie në një element të jashtëm nuk bëri 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ë të rreshtuara vertikalisht në lidhje me blloqet ngjitur, dhe në rastin tonë kemi një bllok inline.
Ekzistojnë disa teknika për zgjidhjen e këtij problemi. Më poshtë do të hedhim një vështrim më të afërt në secilën prej tyre.
Rreshtoni me një tabelë
Zgjidhja e parë që ju 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 e semantikës, është e gabuar të përdoren tabela për rreshtim. E meta e dytë është se për të krijuar tabelën, duhet të shtoni një element 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 (ekrani: tabela;) .i jashtëm (ekrani: qeliza e tabelës;)
Megjithatë, blloku i jashtëm do të mbetet ende një tabelë me të gjitha pasojat që pasojnë.
Rreshtoni me dhëmbëza
Nëse dihen lartësitë e kutive të brendshme dhe të jashtme, atëherë shtrirja mund të vendoset duke përdorur mbushjen vertikale të kutisë së brendshme 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/
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.
Përafrimi me lartësinë e vijës
Nëse e dini që 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ë: tani; tejmbushja: e fshehur;)
http://jsfiddle.net/c1bgfffq/12/
Ju gjithashtu mund ta përdorni këtë teknikë për të rreshtuar tekstin me shumë rreshta duke ripërcaktuar vlerën e lartësisë së rreshtit për bllokun e brendshëm dhe duke shtuar 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.
Shtrirja e shtrirjes
Kjo metodë mund të përdoret kur lartësia e njësisë së jashtme është e panjohur, por lartësia e njësisë së brendshme dihet.Për këtë ju duhet:
- vendosni pozicionin relativ të bllokut të jashtëm, dhe atë të brendshëm - absolut;
- shtoni rregullat lart: 0 dhe poshtë: 0 në bllokun e brendshëm, si rezultat i të cilit shtrihet në lartësinë e plotë të bllokut të jashtëm;
- vendosur në automatik për mbushjen vertikale të bllokut të brendshëm.
http://jsfiddle.net/c1bgfffq/4/
Thelbi i kësaj teknike është se përcaktimi i lartësisë për një kuti të shtrirë dhe të pozicionuar absolutisht e detyron shfletuesin të llogarisë kufijtë vertikalë në përmasa të barabarta kur vendoset në automatik.
Përafrimi me margjinën negative në krye
Kjo metodë është bërë e njohur gjerësisht dhe përdoret shumë shpesh. Ashtu si ai i mëparshmi, aplikohet kur lartësia e bllokut të jashtëm është e panjohur, por lartësia e bllokut të brendshëm dihet.Ju duhet të vendosni pozicionin relativ të bllokut të jashtëm, dhe atë të brendshëm - absolut. Më pas ju duhet ta shtyni kutinë e brendshme poshtë gjysmës së lartësisë së pjesës së sipërme të kutisë së jashtme: 50% dhe ta ngrini atë deri në gjysmën e lartësisë së saj margjinale: -H e brendshme / 2.
E jashtme (pozicioni: relative;) . i brendshëm (lartësia: 100 px; pozicioni: absolut; sipër: 50%; margjina e sipërme: -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ë zbatohet 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 nuk mund të vendosej një përqindje në metodën e mëparshme? Meqenëse vlerat e përqindjes së vetive të marzhit llogariten në lidhje me elementin mëmë, një vlerë prej 50% do të ishte gjysma e lartësisë së kutisë së jashtme dhe ne duhej ta ngrinim kutinë e brendshme me gjysmën e lartësisë së saj. Vetia e transformimit është e duhura për këtë.
Disavantazhi i kësaj metode është se nuk mund të aplikohet nëse blloku i brendshëm ka pozicionim absolut.
Rreshtoni me Flexbox
Mënyra më moderne për t'u lidhur vertikalisht ë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 vendosur ato pothuajse ashtu siç dëshironi. Shtrirja në qendër për Flexbox është një detyrë shumë e thjeshtë.Kutia e jashtme duhet të vendoset për të shfaqur: flex, dhe kutia e brendshme duhet të vendoset 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; margjina: automatike;)
http://jsfiddle.net/c1bgfffq/14/
Disavantazhi i kësaj metode është se Flexbox mbështetet vetëm nga shfletuesit modernë.
Cila mënyrë për të zgjedhur?
Është e nevojshme të vazhdohet nga deklarata e problemit:- Për shtrirjen vertikale të tekstit, është më mirë të përdorni mbushjen vertikale ose veçorinë line-height.
- Për elementët e pozicionuar absolutisht me një lartësi të njohur (si ikona), vetia negative e majës së sipërme është ideale.
- Për raste më komplekse, kur lartësia e bllokut është e panjohur, ju 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ë IE, atëherë sigurisht që është më mirë të përdorni Flexbox.
Dizajneri ndonjëherë ka një pyetje: si të përqendroni elementët vertikalisht? Dhe kjo shkakton probleme të caktuara. Megjithatë, ekzistojnë disa metoda për përqendrimin e elementeve vertikalisht, dhe secila prej këtyre metodave është mjaft e drejtpërdrejtë. Ky artikull përshkruan disa nga këto metoda.
Për të parë çdo metodë në veprim, klikoni në butonin demo ose në imazh.
Le të diskutojmë disa nga çështjet që ndërhyjnë me qendrimin vertikal.
Vertical-Rast
Vendosja në qendër e një elementi horizontalisht është mjaft e lehtë për t'u zbatuar (duke përdorur CSS). Një element inline mund të përqendrohet horizontalisht duke caktuar veçorinë text-align në kontejnerin prind me një vlerë qendrore. Kur një element është një element i nivelit të bllokut, ai duhet vetëm të vendosë gjerësinë e tij dhe të vendosë margjinat e djathta dhe të majta (margin-majtas) në auto për ta vendosur në qendër.
Sa i përket tekstit, shumë kanë filluar të përdorin veçorinë vertikale të rreshtimit për qendërzim. Kjo është logjike dhe zgjedhja ime e parë do të ishte e njëjta. Atributi valign mund të përdoret për të përqendruar një element në tabelë.
Megjithatë, atributi valign funksionon vetëm në një qelizë (për shembull). Vetia CSS e rreshtimit vertikal mund të aplikohet në një qelizë dhe në disa elementë të linjës.
- Teksti përqendrohet në lidhje me lartësinë e rreshtit.
- Për sa i përket tabelës, pa hyrë në detaje, përqendrimi ndodh në lidhje me lartësinë e rreshtit.
Fatkeqësisht, vetia vertikale e align nuk mund të zbatohet për elementët e nivelit të bllokut si paragrafi (p) brenda një etikete div.
Megjithatë, ka metoda të tjera për përqendrimin e elementeve vertikalisht, dhe ju mund të përdorni akoma veçorinë vertikale të rreshtimit kur është e nevojshme. Cila metodë të përdorni varet nga ajo që do të përqendroni.
Hapësira e vijës ose lartësia e vijës
Kjo metodë duhet të përdoret vetëm kur duhet të përqendroni një rresht teksti. Për këtë është e nevojshme që elementi që përmban tekstin të vendosë lartësinë e rreshtit (ndarjen e rreshtave) më të madhe se madhësia e shkronjave.
Si parazgjedhje, ka hapësirë të barabartë sipër dhe poshtë tekstit, kështu që teksti është i përqendruar vertikalisht.
Në këtë rast, nuk është e nevojshme të specifikoni lartësinë e elementit prind.
#fëmijë (lartësia e vijës: 200 px;)
Kjo metodë funksionon në të gjithë shfletuesit, por mos harroni ta përdorni për një rresht teksti. Nëse teksti juaj përfshin më shumë se një rresht, përdorni një metodë tjetër. Vlera e vetive line-height mund të jetë çdo gjë, por jo më pak se lartësia e fontit. Në praktikë, kjo metodë është e shkëlqyeshme për përqendrimin e menyve horizontale.
Metoda CSS duke përdorur vetitë e tabelës
Siç kam shkruar më parë, përmbajtja e qelizës mund të përqendrohet duke përdorur veçorinë CSS të rreshtimit vertikal. Elementi prind duhet të përfaqësohet si një tabelë, elementi fëmijë duhet të caktohet si një qelizë dhe ne aplikojmë veçorinë vertikale të rreshtimit me vlerën mes. Në këtë mënyrë, çdo përmbajtje në elementin fëmijë do të përqendrohet vertikalisht. Kodi css është dhënë më poshtë.
#prind (ekrani: tabela;) #fëmijë (ekrani: qeliza e tabelës; rreshtimi vertikal: në mes;)
Fatkeqësisht, kjo metodë nuk funksionon në versionet e vjetra të IE. Nëse keni nevojë për mbështetje të shfletuesit për IE6 dhe më poshtë, shtoni një deklaratë: "inline-block" në elementin fëmijë.
#fëmijë (ekrani: inline-block;)
Pozicionimi absolut dhe marzhi negativ
Kjo metodë është për elementët e nivelit të bllokut dhe funksionon në të gjithë shfletuesit. Është e nevojshme të vendosni lartësinë e elementit që do të përqendrohet.
Më poshtë është kodi ku fëmija është në qendër duke përdorur metodën e dhënë.
#prind (pozicioni: i afërm;) #fëmijë (pozicioni: absolut; lart: 50%; majtas: 50%; lartësia: 30%; gjerësia: 50%; diferenca: -15% 0 0 -25%;)
Së pari, duhet të poziciononi prindin dhe fëmijën. Pastaj vendosim kompensimin e fëmijës në 50% në lidhje me pjesën e sipërme (lart) dhe majtas (majtas) të elementit prind, duke e përqendruar kështu fëmijën në lidhje me prindin. Megjithatë, manipulimet tona do të vendosin këndin e sipërm djathtas të fëmijës në qendër të prindit, gjë që natyrisht nuk na përshtatet.
Detyra jonë është ta lëvizim fëmijën lart dhe majtas, në raport me prindin, në mënyrë që fëmija të jetë i përqendruar vizualisht vertikalisht dhe horizontalisht. Kjo është arsyeja pse ju duhet të dini lartësinë dhe gjerësinë e fëmijës.
Pra, duhet t'i japim fëmijës një diferencë negative të sipërme dhe të majtë të barabartë me gjysmën, respektivisht të gjerësisë dhe lartësisë së fëmijës.
Ndryshe nga dy metodat e para, kjo metodë është menduar për elementët e nivelit të bllokut. Metoda funksionon në të gjithë shfletuesit, megjithatë, përmbajtja mund të tejkalojë lartësinë e elementit prind dhe të shkojë përtej tij. Kjo metodë funksionon më mirë kur lartësia dhe gjerësia e elementeve janë të fiksuara.
Pozicionimi absolut i fëmijës
Ashtu si me metodën e mëparshme, prindi dhe fëmija pozicionohen përkatësisht në mënyrë relative dhe absolute.
Në kodin CSS, unë e përqendroj fëmijën vertikalisht dhe horizontalisht, megjithatë ju mund të përdorni vetëm qendrimin vertikal.
#prind (pozicioni: relativ;) #fëmijë (pozicioni: absolut; lart: 0; poshtë: 0; majtas: 0; djathtas: 0; gjerësia: 50%; lartësia: 30%; diferenca: automatik;)
Ideja pas kësaj metode është që ju mund të poziciononi elementin fëmijë duke përdorur vlerat e vetive të sipërme, majtas, djathtas, të poshtme të barabarta me 0. Meqenëse elementi ynë fëmijë është më i vogël se elementi prind, ai nuk mund të "ngjitet" në elementi prind.
Vlerat e marzhit për të katër anët e fëmijës janë zero, në mënyrë që elementi të jetë i përqendruar vertikalisht në lidhje me prindin. Fatkeqësisht, kjo metodë ka të njëjtat të meta si metoda e mëparshme: është e nevojshme të rregulloni lartësinë dhe gjerësinë e fëmijës, mungesën e mbështetjes për shfletuesit më të vjetër IE.
Mbushja e poshtme dhe e sipërme janë të barabarta
Në këtë metodë, ne i japim në mënyrë eksplicite elementit prind mbushje të barabartë (poshtë dhe lart) në mënyrë që fëmija të përqendrohet vizualisht vertikalisht.
#prind (mbushje: 5% 0;) #fëmijë (mbushje: 10% 0;)
Unë jam duke përdorur madhësi relative. Nëse madhësitë e bllokut janë fikse, atëherë do të duhet të bëhen disa llogaritje matematikore.
Për shembull, nëse një element prind ka një lartësi prej 400 px dhe një element fëmijë është 100 px, atëherë duhet të vendosni mbushjen e sipërme dhe të poshtme në 150 px.
150 + 150 + 100 = 400
Div lundrues
Kjo metodë përdor një bllok bosh notues që kontrollon pozicionin vertikal të fëmijës. Div lundrues duhet të vendoset përpara fëmijës, shihni kodin HTML më poshtë.
#parent (lartësia: 250 px;) #floater (lundrues: majtas; lartësia: 50%; gjerësia: 100%; margjina e poshtme: -50 px;) #fëmijë (e qartë: të dyja; lartësia: 100 px;)
Së pari, ne e shtyjmë kutinë lundruese majtas (ose djathtas) dhe i japim një lartësi prej 50% të prindërve të saj. Në këtë mënyrë, kutia lundruese do të mbushë gjysmën e sipërme të prindit.
Meqenëse blloku është lundrues, ai hiqet nga rrjedha e përgjithshme e dokumentit, prandaj, vetia e qartë duhet t'i caktohet bllokut të fëmijëve me vlerën e të dyjave. E vendosa vlerën në të dyja, megjithatë, mund të përdorni vlerën që përputhet me drejtimin e pozicionimit të elementit lundrues.
Skaji i sipërm i fëmijës tani shtrihet drejtpërdrejt nën skajin e poshtëm të elementit të lundruar. Ne duam ta rrisim fëmijën me gjysmën e lartësisë së notës. Për ta bërë këtë, mjafton të vendosni marzhin e poshtëm negativ të barabartë me 50% për bllokun lundrues.
Punon në të gjithë shfletuesit. Disavantazhi i kësaj metode është se ju duhet një bllok bosh dhe duhet të dini lartësinë e elementit fëmijë.
Shumë shpesh në plan urbanistik kërkohet të përqendroni disa elemente horizontalisht dhe/ose vertikalisht. Prandaj, vendosa të bëj një artikull me metoda të ndryshme përqendrimi, në mënyrë që gjithçka të jetë në dorë në një vend.
Rreshtimi horizontal
diferenca: auto
Shtrirja horizontale me diferencë përdoret kur dihet gjerësia e elementit në qendër. Punon për elementët e bllokut:
Elementi (margjina-majtas: automatik; margjina-djathtas: automatik; gjerësia: 50%;)
Përcaktimi i vlerës automatike për mbushjen e djathtë dhe të majtë i bën ato të barabarta, gjë që e përqendron elementin horizontalisht brenda bllokut prind.
text-align: qendër
Kjo metodë është e përshtatshme për rreshtimin e tekstit në qendër brenda një blloku. text-align: qendër:
Unë jam në qendër
pozicioni dhe diferenca negative në të majtë
I përshtatshëm për blloqe të përqendruara me gjerësi të njohur. Ne i japim pozicionin e bllokut prind: në lidhje me pozicionin në lidhje me të, elementi i përqendruar është pozicioni: absolut, majtas: 50% dhe një marzh negativ majtas, që është e barabartë me gjysmën e gjerësisë së elementit:
Unë jam në qendër
shfaqja: inline-block + text-align: qendër
Kjo metodë është e përshtatshme për rreshtimin e blloqeve me gjerësi të panjohur, por kërkon një mbështjellës prind. Për shembull, në këtë mënyrë mund të përqendroni një menu horizontale:
Rreshtimi vertikal
vija e gjatesise
Për të rreshtuar një rresht teksti, mund të përdorni të njëjtën lartësi dhe ndarje rreshtash për bllokun prind. I përshtatshëm për butona, artikuj të menysë dhe më shumë.
Unë jam i vendosur vertikalisht
pozicioni dhe marzhi negativ lart
Një element mund të rreshtohet vertikalisht duke i dhënë një lartësi fikse dhe duke aplikuar pozicionin: absolute dhe një diferencë negative lart e barabartë me gjysmën e lartësisë së elementit që rreshtohet. Bllokut prind duhet t'i caktohet pozicioni: relative:
Mbështjellësi (pozicioni: relative;) elementi (lartësia: 200 px; diferenca: -100 px 0 0; pozicioni: absolut; sipër: 50%;)
Kështu, duke përdorur pozicionimin dhe marzhet negative, mund ta përqendroni elementin në faqe.
shfaqja: qeliza e tabelës
Për shtrirjen vertikale, vetia e ekranit: qeliza e tabelës aplikohet në element, gjë që e bën atë të imitojë një qelizë tabele. Ne gjithashtu vendosëm lartësinë dhe shtrirjen vertikale: në mes të saj. Të gjitha këto do ta mbështjellim në një enë me vetinë dislpay: tabela; :
Unë jam i vendosur vertikalisht
Përafrimi dinamik i një elementi në faqe
Ne kemi mbuluar mënyra për të lidhur elementët në një faqe duke përdorur CSS. Tani le të hedhim një vështrim në zbatimin e variantit jQuery.
Le të përfshijmë jQuery në faqe:
Unë sugjeroj të shkruani një funksion të thjeshtë për të përqendruar një element në faqe, le ta quajmë atë alignCenter (). Vetë elementi vepron si një argument për funksionin:
Funksioni alignCenter (elem) (// kodi këtu)
Në trupin e funksionit, le të llogarisim dhe varim në mënyrë dinamike koordinatat e qendrës së faqes në vetitë e majta dhe të sipërme të CSS:
Funksioni alignCenter (elem) (elem.css ((majtas: ($ (dritare) .width () - elem.width ()) / 2 + "px", sipër: ($ (dritare) .lartësia () - elem. lartësia ()) / 2 + "px" // mos harroni të shtoni pozicionin: absolut në element për të aktivizuar koordinatat)))
Në rreshtin e parë të funksionit, marrim gjerësinë e dokumentit dhe zbresim prej tij gjerësinë e elementit, të ndarë në gjysmë - kjo do të jetë qendra e faqes horizontalisht. Linja e dytë bën të njëjtën gjë, vetëm me lartësinë, për shtrirjen vertikale.
Funksioni është gati, mbetet ta varni në DOM gati dhe ngjarjet e ndryshimit të madhësisë së dritares:
$ (funksioni () (// thirrni funksionin e përqendrimit kur DOM është gati alignCenter ($ (elem)); // thirrni funksionin kur dritarja ndryshon madhësinë $ (dritare) .resize (funksioni () (alignCenter ($ ( elem));)) // funksioni për të përqendruar funksionin e elementit alignCenter (elem) (elem.css ((// llogarit koordinatat e majta dhe të sipërme majtas: ($ (dritare) .width () - elem.width ()) / 2 + "px", sipër: ($ (dritare) .lartësia () - elem.lartësia ()) / 2 + "px")))))
Duke përdorur Flexbox
Karakteristikat e reja të CSS3, si Flexbox, po bëhen ngadalë të zakonshme. Teknologjia ndihmon në krijimin e paraqitjes pa përdorimin e notave, pozicionimit, etj. Mund të përdoret gjithashtu për të përqendruar elementët. Për shembull, le të përdorim flexbox në mbështjellësin prind dhe vendosim përmbajtjen brenda:
Mbështjellësi (ekrani: -webkit-box; ekrani: -moz-box; shfaqja: -ms-flexbox; shfaqja: -webkit-flex; shfaqja: flex; lartësia: 500 px; gjerësia: 500 px;) .mbështjellës .përmbajtja (margjina: auto; / * marzhi: 0 automatik; vetëm horizontalisht * / / * marzhi: automatik 0; vertikalisht vetëm * /)
Ky rregull e përqendron elementin horizontalisht dhe vertikalisht në të njëjtën kohë - diferenca tani funksionon jo vetëm për shtrirjen horizontale, por edhe për shtrirjen vertikale. Dhe pa një gjerësi / lartësi të njohur.
Burimet e ndërlidhura
Ndihmoni projektin
Kur shtroni një faqe, shpesh është e nevojshme të kryhet shtrirja në qendër në një mënyrë CSS: për shembull, përqendroni bllokun 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, duhet të vendosni shtrirjen e tekstit në qendër, CSS në këtë rast ju lejon të zvogëloni kohën e shtypjes. Më parë, kjo bëhej duke përdorur atributet HTML, por tani standardi kërkon shtrirjen e tekstit duke përdorur fletë stilesh. Ndryshe nga kutitë, për të cilat ju duhet të ndryshoni kufijtë, në CSS, shtrirja në qendër e tekstit bëhet me një rresht të vetëm:
- text-align: qendër;
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, të rregulloni në mënyrë më fleksibël dhëmbëzat.
Shpesh në faqet përafrimi i atribuohet vetë etiketës. Kjo menjëherë e bën kodin të pavlefshëm, pasi atributi align është zhvlerësuar nga W3C. Nuk rekomandohet përdorimi i tij në faqe.
Përafrimi i një blloku në qendër
Nëse ju duhet të vendosni div të jetë në qendër, CSS mund të ofrojë një mënyrë mjaft të përshtatshme për ta bërë atë: përdorni margjinat. Indencat mund të vendosen si për elementët e bllokut ashtu edhe për elementët e blloqeve të brendshme. Vlera e pronës duhet të marrë vlerat 0 (hyrje vertikale) dhe automatike (hyrje automatike horizontale):
- marzhi: 0 auto;
Tani ky opsion i veçantë njihet si absolutisht i vlefshëm. Përdorimi i hyrjeve të jashtme gjithashtu ju lejon të vendosni shtrirjen qendrore të imazhit: ju lejon të zgjidhni shumë probleme që lidhen me pozicionimin e një elementi në faqe.
Rreshtoni një bllok majtas ose djathtas
Ndonjëherë shtrirja në qendër të CSS nuk kërkohet, por ju duhet të vendosni dy blloqe krah për krah: një në të majtë, tjetri në të djathtë. Për ta bërë këtë, ekziston vetia 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 (lundrues: majtas;)
- .djathtas (lundrues: djathtas)
Nëse ka edhe një bllok të tretë që duhet të vendoset nën dy blloqet e para (për shembull, një fund), atëherë duhet të regjistrojë pronën e qartë:
- .majtas (lundrues: majtas;)
- .djathtas (lundrues: djathtas)
- fundi (i qartë: të dyja)
Fakti është se blloqet me klasa 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. E qarta: të dy vetitë lejojnë që fundi ose çdo bllok tjetër të shohë elementë jashtë rrjedhës dhe nuk lejon notimin majtas dhe djathtas. 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ë ngjitet në skajin e sipërm ose të poshtëm, në mes të elementit prind ose kudo. Më shpesh, kërkohet shtrirja e bllokut në qendër; për këtë përdoret atributi vertikal-align. 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 nga lart - .fëmijë (vertical-align: sipër);
- shtrirje në qendër - .fëmijë (vertikal-linjë: në mes);
- shtrirje nga fundi - .fëmijë (vertical-align: fund);
As rreshtimi i tekstit dhe as ai vertikal nuk ndikon në elementët e bllokut.
Probleme të mundshme me blloqe të rreshtuara
Ndonjëherë rreshtimi i një div në qendër në një mënyrë CSS mund të shkaktojë pak probleme. Për shembull, kur përdorni float: le të themi se ka tre blloqe: .first, .second dhe .third. Blloku i dytë dhe i tretë janë në të parën. Elementi me klasën e dytë është i rreshtuar majtas dhe blloku i fundit është i rreshtuar djathtas. Pas shtrirjes, të dy ranë nga përroi. Nëse elementi prind nuk ka një lartësi të caktuar (për shembull, 30em), atëherë ai do të ndalojë shtrirjen përgjatë lartësisë së blloqeve të fëmijëve. Për të shmangur këtë gabim, përdorni një "spacer" - një bllok i veçantë që sheh .second dhe .treth. Kodi CSS:
- .e dyta (lundrues: majtas)
- .e treta (lundrues: djathtas)
- .clearfix (lartësia: 0; qartë: të dyja;)
Përdoret shpesh pseudo-klasa: after, e cila gjithashtu ju lejon të rivendosni blloqet në vend duke krijuar një pseudo-layout (në shembull, një div me një klasë kontejneri shtrihet brenda .first dhe përmban .majtas dhe .djathtas):
- .majtas (lundrues: majtas)
- .djathtas (lundrues: djathtas)
- .container: pas (përmbajtja: ""; shfaqja: tabela; pastruar: të dyja;)
Opsionet e mësipërme janë më të zakonshmet, megjithëse ka disa variacione. Gjithmonë mund të gjeni mënyrën më të lehtë dhe më të përshtatshme për të krijuar një pseudo-faqosje përmes eksperimentimit.
Një problem tjetër me të cilin shpesh përballen dizajnerët e paraqitjes është shtrirja e elementeve të blloqeve në linjë. Një hapësirë shtohet automatikisht pas secilit prej tyre. Vetia e marzhit ndihmon për të përballuar këtë, e cila është vendosur në një diferencë negative. Ka metoda të tjera që përdoren shumë më rrallë: për shembull, zeroizimi Në këtë rast, madhësia e shkronjave: 0 shkruhet në vetitë e elementit prind. Nëse ka tekst brenda blloqeve, atëherë madhësia e kërkuar e fontit është kthyer tashmë në vetitë e elementeve të blloqeve inline. Për shembull, madhësia e shkronjave: 1em. Metoda nuk është gjithmonë e përshtatshme, prandaj, opsioni me hyrje të jashtme përdoret shumë më shpesh.
Përafrimi i blloqeve ju lejon të krijoni faqe të bukura dhe funksionale: kjo është faqosja e paraqitjes së përgjithshme, dhe vendndodhja e mallrave në dyqanet në internet dhe fotot në një sit të kartës së biznesit.
