Shtrirja horizontale e bllokut Css. Përqendrimi i një blloku duke përdorur CSS

#fëmijë (lartësia e linjës: 200 px; )

Kjo metodë funksionon në të gjithë shfletuesit, por mos harroni se duhet të përdoret 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 shkronjave. Në praktikë, kjo metodë funksionon shkëlqyeshëm për të përqendruar një menu horizontale.

Metoda CSS duke përdorur vetitë e tabelës

Siç kam shkruar tashmë, përmbajtja e një qelize 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 vetia vertikale e rreshtimit duhet të zbatohet në të 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;) #child ( shfaqja: qeliza e tabelës; rreshtimi vertikal: në mes; )

Fatkeqësisht, kjo metodë nuk funksionon në versionet e vjetra të shfletuesit 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ë.

#child (ekrani: blloku i brendshëm; )

Pozicionimi absolut dhe marzhi negativ

Kjo metodë është krijuar për elementë të nivelit të bllokut dhe funksionon në të gjithë shfletuesit. Ju duhet të vendosni lartësinë e elementit që duhet të përqendrohet.

Më poshtë është kodi ku përqendrohet elementi fëmijë duke përdorur këtë metodë.

#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 ju duhet të poziciononi elementin prind dhe fëmijë. Më pas vendosim zhvendosjen e elementit fëmijë në 50% në lidhje me anën e sipërme dhe të majtë të elementit prind, duke e përqendruar kështu elementin fëmijë në raport me elementin prind. Sidoqoftë, manipulimet tona do të përqendrojnë këndin e sipërm djathtas të elementit fëmijë në qendër të elementit prind, i cili, natyrisht, nuk na përshtatet.

Detyra jonë: të lëvizim elementin fëmijë lart dhe majtas, në lidhje me elementin prind, në mënyrë që elementi fëmijë të përqendrohet vizualisht vertikalisht dhe horizontalisht. Kjo është arsyeja pse ju duhet të dini lartësinë dhe gjerësinë e elementit fëmijë.

Pra, ne duhet t'i japim elementit fëmijë një majë negative dhe diferencë të majtë të barabartë me gjysmën, përkatësisht, gjerësinë dhe lartësinë e elementit fëmijë.

Ndryshe nga dy metodat e para, kjo metodë është menduar për elementët e nivelit të bllokut. Metoda funksionon në të gjithë shfletuesit, por përmbajtja mund të tejkalojë lartësinë e elementit prind dhe të shtrihet përtej kufijve të tij. Kjo metodë funksionon më mirë kur lartësia dhe gjerësia e elementeve janë të fiksuara.

Pozicionimi absolut i një elementi fëmijë

Ashtu si në metodën e mëparshme, elementët prind dhe fëmijë janë të pozicionuar përkatësisht relativ dhe absolut.

Në kodin CSS e përqendroj elementin fëmijë si vertikalisht ashtu edhe horizontalisht, megjithatë ju mund të përdorni vetëm qendrimin vertikal.

#prind (pozicioni: i afërm;) #fëmijë (pozicioni: absolut; lart: 0; poshtë: 0; majtas: 0; djathtas: 0; gjerësia: 50%; lartësia: 30%; diferenca: automatik; )

Ideja e kësaj metode është që ju mund të poziciononi një element 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 do të jetë në gjendje të "ngjitet ” tek elementi prind.

Vlerat e marzhit për të katër anët e elementit fëmijë janë zero, gjë që e përqendron elementin vertikalisht në lidhje me prindin. Fatkeqësisht, kjo metodë ka të njëjtat disavantazhe 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.

Kufijtë e poshtëm dhe të sipërm janë të barabarta

Në këtë metodë, ne caktojmë në mënyrë eksplicite një mbushje të barabartë (poshtë dhe sipër) elementit prind, i cili vizualisht e përqendron elementin fëmijë vertikalisht.

#prind (mbushje: 5% 0; ) #fëmijë (mbushje: 10% 0; )

Unë përdor madhësi relative. Nëse madhësitë e bllokut janë fikse, atëherë do t'ju duhet të bëni disa llogaritje matematikore.

Për shembull, nëse elementi prind ka një lartësi prej 400 px dhe fëmija është 100 px, atëherë duhet të vendosni mbushjen e sipërme dhe të poshtme në 150 px.

150 + 150 + 100 = 400

lundrues div

Kjo metodë përfshin një bllok bosh notues që kontrollon pozicionin vertikal të elementit fëmijë. Div lundrues duhet të vendoset përpara elementit fëmijë, shihni kodin HTML më poshtë.

#parent (lartësia: 250 px;) #floater ( notues: majtas; lartësia: 50%; gjerësia: 100%; margjina e poshtme: -50 px; ) #fëmijë (e qartë: të dyja; lartësia: 100 px; )

Fillimisht e zhvendosim bllokun lundrues majtas (ose djathtas) dhe i japim një lartësi prej 50% të prindit të tij. Në këtë mënyrë blloku lundrues do të mbushë gjysmën e sipërme të elementit prind.

Meqenëse blloku është lundrues, ai hiqet nga rrjedha e përgjithshme e dokumentit, prandaj, bllokut të fëmijës duhet t'i caktohet vetia e qartë me vlerën të dyja. E vendosa vlerën në të dyja, por ju mund të përdorni një vlerë që përputhet me drejtimin e pozicionimit të elementit lundrues.

Aktualisht, skaji i sipërm i elementit fëmijë shtrihet drejtpërdrejt nën skajin e poshtëm të elementit lundrues. Duhet ta ngremë elementin fëmijë në gjysmën e lartësisë së elementit lundrues. Për ta bërë këtë, thjesht vendosni margjinën negative të poshtme për bllokun lundrues në 50%.

Punon në të gjithë shfletuesit. Disavantazhi i kësaj metode është se kërkon një bllok bosh dhe kërkon njohjen e lartësisë së elementit fëmijë.

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. Rreshtoni duke përdorur:

• tavolina,
• dhëmbëzimi,
• vijë-lartësia
• 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 të ekranit në linjë ose në bllok.

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 kjo? 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ëzimin

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 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ë: 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 dihet.

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

Etiketa: Shtoni etiketa

Kur krijoni blloqe div, ndoshta keni hasur në situata ku duhet të përqendroni div-në tuaj horizontalisht dhe vertikalisht duke përdorur CSS të pastër. Për shembull, kur krijoni dritare kërcyese me . Ka disa mënyra për të zbatuar centrimin, dhe në këtë artikull do të ndaj mënyrat e mia të preferuara dhe më të lehta, duke përdorur CSS ose jQuery.

Së pari, bazat:

Përqendrimi horizontal në CSS

Kjo është e lehtë për t'u bërë, ne e përdorim diferencë për tonën div bllokoj.

Emri i klasës (diferenca: 0 automatik; gjerësia: 200 px; lartësia: 200 px; )

Për të përqendruar një bllok div vetëm horizontalisht, duhet të përcaktoni gjerësinë (gjerësinë) e bllokut, përdorni veçorinë auto për marzhe majtas dhe djathtas. Kjo metodë do të funksionojë për të gjithë elementët e bllokut (div, p, h1, e kështu me radhë...). Për të aplikuar përqendrimin horizontal në elementët e linjës (lidhjet, imazhet...), duhet të aplikoni parametrin shfaq:bllok;

Përqendrimi horizontal dhe vertikal në CSS

Përqendrimi i një blloku div horizontalisht dhe vertikalisht në të njëjtën kohë është pak më i ndërlikuar. Ju duhet të dini dimensionet e bllokut div para kohe.

Klasa Emri (gjerësia: 300 px; lartësia: 200 px; pozicioni: absolut; majtas: 50%; sipër: 50%; margjina: -100 px 0 0 -150 px; )

Duke përdorur absolute Duke vendosur një bllok, ne mund ta shkëputim atë nga elementët përreth dhe të përcaktojmë pozicionin e tij në lidhje me madhësinë e dritares së shfletuesit. Zhvendosni bllokun e div në 50% në të majtë dhe në krye të dritares. Këndi i sipërm majtas i bllokut është tani në qendër të dritares së shfletuesit. Gjithçka që mbetet është të instaloni bllokun div në qendër të faqes duke e zhvendosur atë në gjysma e gjerësisë së saj majtas dhe gjysma e lartësisë së saj lart. Hora! Rezultati ishte përqendrimi i shkëlqyer i bllokut duke përdorur kodin e pastër CSS.

Përqendrimi horizontal dhe vertikal me jQuery

Siç u përmend më herët - metoda e përqendrimit CSS funksionon vetëm me dimensione fikse. Nëse dimensionet nuk janë të përcaktuara, metoda jQuery do të vijë në shpëtim:

$(dritare).resize(funksion())( $(".className").css(( pozicioni:"absolute", majtas: ($(dritare).width() - $(".className").outerWidth ( ))/2, lart: ($(dritare).lartësia() - $(".className").outerHeight())/2 )); // Për të ekzekutuar një funksion kur dritarja është e ngarkuar: $(dritare).resize();

Funksionimi i kësaj metode është të ekzekutojë funksionin resize() duke përdorur linjën $(dritare).rimasa(). Ky funksion funksionon sa herë që ndryshon madhësia e dritares së shfletuesit. Ne përdorim gjerësia e jashtme () Dhe Lartësia e jashtme (), sepse në të kundërt gjerësia () Dhe lartësia (), ato përfshijnë mbushjen dhe trashësinë e kufirit në madhësinë që kthehen. Rreshti i fundit fillon procesin e përqendrimit të bllokut div kur faqja ngarkohet.

Avantazhi i përdorimit të kësaj metode është se ju mund të mos e dini se çfarë madhësie është div. Pengesa kryesore është se funksionon vetëm kur JavaScript është i aktivizuar. Prandaj, kjo metodë është e pranueshme për ndërfaqet shumëfunksionale si VKontakte, Facebook, etj.

Si gjithmonë, mos ngurroni të sugjeroni metodën tuaj të preferuar për qendrimin e blloqeve duke komentuar.

Çdo projektues i paraqitjes ballafaqohet vazhdimisht me nevojën për të lidhur përmbajtjen në një bllok: horizontalisht ose vertikalisht. Ka disa artikuj të mirë për këtë temë, por të gjithë ofrojnë shumë opsione interesante, por pak praktike, prandaj duhet të shpenzoni kohë shtesë për të theksuar pikat kryesore. Vendosa ta paraqes këtë informacion në një formë të përshtatshme për mua, në mënyrë që të mos kërkoj më në google.

Përafrimi i blloqeve me madhësi të njohura

Mënyra më e lehtë për të përdorur CSS është të rreshtoni blloqet që kanë një lartësi të njohur (për shtrirjen vertikale) ose gjerësi (për shtrirjen horizontale).

Rreshtimi duke përdorur mbushje

Ndonjëherë nuk mund të përqendroni një element, por shtoni kufij në të duke përdorur " mbushje".

Për shembull, ekziston një fotografi prej 200 me 200 pikselë dhe duhet ta përqendroni në një bllok 240 me 300. Mund të vendosim lartësinë dhe gjerësinë e bllokut të jashtëm = 200 px dhe të shtojmë 20 piksel në krye dhe në fund , dhe 50 majtas dhe djathtas.

.example-wrapper1 (sfondi: #535E73; gjerësia: 200 px; lartësia: 200 px; mbushja: 20 px 50 px; )

Përafrimi i blloqeve të pozicionuara absolutisht

Nëse blloku është vendosur në " pozicioni: absolut", atëherë mund të pozicionohet në lidhje me prindin e tij më të afërt me "pozicion: relative". Kjo kërkon të gjitha vetitë (" krye","drejtë","fund","majtas") e bllokut të brendshëm për të caktuar të njëjtën vlerë, si dhe "margin: auto".

*Ka një nuancë: Gjerësia (lartësia) e bllokut të brendshëm + vlera e majta (djathtas, poshtë, lart) nuk duhet të kalojë dimensionet e bllokut prind. Është më e sigurt të caktoni 0 (zero) në vetitë e majta (djathtas, poshtë, lart).

.example-wrapper2 (pozicioni: relative; lartësia: 250 px; sfondi: url(space.jpg);) .cat-king (gjerësia: 200 px; lartësia: 200 px; pozicioni: absolute; lart: 0; majtas: 0; poshtë: 0 djathtas : 0 marzh : auto ;

Rreshtimi horizontal

Rreshtimi duke përdorur "text-align: center"

Për të rreshtuar tekstin në një bllok ekziston një veçori e veçantë " rreshtimi i tekstit". Kur vendoset në " qendër"Çdo rresht teksti do të rreshtohet horizontalisht. Për tekstin me shumë rreshta, kjo zgjidhje përdoret jashtëzakonisht rrallë; më shpesh ky opsion mund të gjendet për rreshtimin e hapësirave, lidhjeve ose imazheve.

Një herë më duhej të krijoja një tekst për të treguar se si funksionon rreshtimi i tekstit duke përdorur CSS, por asgjë interesante nuk më erdhi në mendje. Në fillim vendosa të kopjoj diku një rimë për fëmijë, por kujtova se kjo mund të prishë veçantinë e artikullit dhe lexuesit tanë të dashur nuk do të mund ta gjenin atë në Google. Dhe pastaj vendosa të shkruaj këtë paragraf - në fund të fundit, pika nuk është me të, por pika është në përputhje.

.example-text (lidhja e tekstit: në qendër; mbushja: 10 px; sfondi: #FF90B8;)

Vlen të përmendet se kjo veti do të funksionojë jo vetëm për tekstin, por edhe për çdo element inline ("ekrani: inline").

Por ky tekst është rreshtuar në të majtë, por është në një bllok që është në qendër në lidhje me mbështjellësin.

.example-wrapper3 (text-align: qendër; sfond: #FF90B8;) .inline-text (ekrani: inline-block; gjerësia: 40%; mbushje: 10 px; rreshtimi i tekstit: majtas; sfond: #FFE5E5; )

Përafrimi i blloqeve duke përdorur margjinën

Elementet e bllokut me një gjerësi të njohur mund të rreshtohen lehtësisht horizontalisht duke i vendosur në "margin-left: auto; margin-djathtas: auto". Zakonisht përdoret shkurtesa: " marzhi: 0 auto" (çdo vlerë mund të përdoret në vend të zeros). Por kjo metodë nuk është e përshtatshme për shtrirje vertikale.

.lama-wrapper (lartësia: 200 px; sfondi: #F1BF88;) .lama1 (lartësia: 200 px; gjerësia: 200 px; sfondi: url(lama.jpg); margjina: 0 automatike; )

Kështu duhet t'i rreshtoni të gjitha blloqet, aty ku është e mundur (ku nuk kërkohet pozicionim fiks ose absolut) - është më logjika dhe më e përshtatshme. Edhe pse kjo duket e qartë, ndonjëherë kam parë shembuj të frikshëm me pika negative, ndaj vendosa të sqaroj.

Rreshtimi vertikal

Rreshtimi vertikal është shumë më problematik - me sa duket, kjo nuk ishte parashikuar në CSS. Ka disa mënyra për të arritur rezultatin e dëshiruar, por të gjitha nuk janë shumë të bukura.

Përafrimi me vetinë e lartësisë së vijës

Në rastin kur ka vetëm një rresht në një bllok, ju mund të arrini shtrirjen e tij vertikale duke përdorur " vijë-lartësia" dhe vendosja në lartësinë e dëshiruar. Për besueshmëri vlen të vendoset edhe "lartësia", vlera e së cilës do të jetë e barabartë me vlerën "lartësia e linjës", sepse kjo e fundit nuk mbështetet në të gjithë shfletuesit.

.example-wrapper4 (lartësia e linjës: 100 px; ngjyra: #DC09C0; sfondi: #E5DAE1; lartësia: 100 px; rreshtimi i tekstit: në qendër; )

Është gjithashtu e mundur të arrihet shtrirja e bllokut me disa linja. Për ta bërë këtë, do të duhet të përdorni një bllok mbështjellës shtesë dhe të vendosni lartësinë e linjës në të. Një bllok i brendshëm mund të jetë me shumë rreshta, por duhet të jetë "inline". Ju duhet të aplikoni "vertical-align: mesme" në të.

.example-wrapper5 (lartësia e linjës: 160 px; lartësia: 160 px; madhësia e shkronjave: 0; sfondi: #FF9B00;) .example-wrapper5 .text1 (ekrani: inline-block; madhësia e shkrimit: 4 rreshti 1.5 vertikal-align: sfondi: #FFFAF2 ;

Blloku i mbështjellësit duhet të ketë të vendosur "madhësia e shkronjave: 0". Nëse nuk e vendosni madhësinë e shkronjave në zero, shfletuesi do të shtojë disa pikselë shtesë. Ju gjithashtu do të duhet të specifikoni madhësinë e shkronjave dhe lartësinë e rreshtit për bllokun e brendshëm, sepse këto veti trashëgohen nga prindi.

Rreshtimi vertikal në tabela

pronë" vertikal-rreshtoj" ndikon edhe në qelizat e tabelës. Me vlerën e vendosur në "mesi", përmbajtja brenda qelizës është rreshtuar në qendër. Sigurisht, paraqitja e tabelës konsiderohet arkaike në ditët e sotme, por në raste të jashtëzakonshme mund ta simuloni atë duke specifikuar " shfaqja: qeliza e tabelës".

Unë zakonisht e përdor këtë opsion për shtrirjen vertikale. Më poshtë është një shembull i paraqitjes së marrë nga një projekt i përfunduar. Është me interes fotografia që është e përqendruar vertikalisht në këtë mënyrë.

.one_product .img_wrapper (ekrani: qeliza e tabelës; lartësia: 169 pikselë; rreshtimi vertikal: i mesëm; tejmbushja: i fshehur; sfondi: #fff; gjerësia: 255 pikselë; ) .img i një_produkti (lartësia maksimale: 169 px në 0: max ; % gjerësia : 140 px : bllok ;

Duhet mbajtur mend se nëse një element ka një grup "noton" përveç "asnjë", atëherë në çdo rast do të jetë bllok (shfaqja: bllok) - atëherë do të duhet të përdorni një mbështjellës shtesë blloku.

Rreshtimi me një element shtesë në linjë

Dhe për elementët inline mund të përdorni " vertikal-linjë: në mes". Për më tepër, të gjithë elementët me " shfaqja: inline" që janë në të njëjtën linjë do të rreshtohen me një linjë qendrore të përbashkët.

Ju duhet të krijoni një bllok ndihmës me një lartësi të barabartë me lartësinë e bllokut prind, atëherë blloku i dëshiruar do të përqendrohet. Për ta bërë këtë, është e përshtatshme të përdorni pseudo-elementet: para ose: pas.

.example-wrapper6 (lartësia: 300 px; rreshtimi i tekstit: në qendër; sfondi: #70DAF1;) .pudge (ekrani: blloku i brendshëm; rreshtimi vertikal: i mesëm; sfondi: url(pudge.png); ngjyra e sfondit: # fff : 200px lartësia : .riki (ekrani: inline-block; lartësia: 100% ;)

Ekrani: përkul dhe shtrirje

Nëse nuk ju intereson shumë përdoruesit e Explorer 8, ose ju intereson aq shumë sa jeni të gatshëm të futni një pjesë javascript shtesë për ta, atëherë mund të përdorni "display: Flex". Kutitë Flex janë të shkëlqyera në trajtimin e çështjeve të shtrirjes dhe thjesht shkruani "margin: auto" për të përqendruar përmbajtjen brenda.

Deri më tani, praktikisht nuk e kam hasur kurrë këtë metodë, por nuk ka kufizime të veçanta për të.

.example-wrapper7 (ekrani: flex; lartësia: 300 px; sfondi: #AEB96A;) .example-wrapper7 img (diferenca: automatik;)

Epo, kjo është gjithçka që doja të shkruaja për shtrirjen CSS. Tani përqendrimi i përmbajtjes nuk do të jetë problem!