Rreshtimi horizontal dhe vertikal i elementeve. Rreshtimi vertikal në një div

Shpesh gjatë shtypjes së tekstit, ekziston nevoja 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 shënimin e faqes me etiketa të panevojshme? Përgjigja është "ju mundeni", por për shkak të mbështetjes së dobët të CSS nga shfletuesi MSIE, zgjidhja e problemit për të do të ndryshojë nga zgjidhja për shfletuesit e tjerë të zakonshëm.

Merrni si shembull fragmentin e mëposhtëm:

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 qelizave të tabelës për vetinë e ekranit. Kjo na jep mundësinë që blloku me tekst 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 e 7-të duke përfshirë)

Për të zgjidhur problemin e rreshtimit të tekstit në skajin e poshtëm të një blloku në MSIE, mund të përdorni pozicionimin absolut (këtu na duhet një element inline i futur në një bllok):

div (
pozicioni: i afërm;
}
hapësirë ​​div (
shfaqja: bllok;
pozicioni: absolut;
fundi: 0%;
majtas: 0%;
gjerësia: 100%;
}

Ky grup rregullash funksionon edhe në shfletuesit "e duhur".

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 shtrirjen horizontale, për shembull, text-align: në qendër;.

Për shtrirjen vertikale të tekstit në qendër të bllokut, fragmenti origjinal do të duhet të jetë akoma i ndërlikuar - ne do të prezantojmë një element tjetër në linjë:

Materiali studimor:

• 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)
• vertikal-align: mes (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Një mënyrë tjetër për t'u lidhur vertikalisht në CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

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:

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 në qendër është pozicioni: absolut, majtas: 50%, dhe një marzh negativ majtas, që është e barabartë me gjysmën e gjerësisë së elementit:

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:

• në shtëpi
• Rreth Autorit

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

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; :

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 qendrimin e funksionit të elementit alignCenter (elem) (elem.css ((// llogaritja e koordinatave majtas dhe 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; ekrani: 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

Përqendrimi i elementeve vertikalisht me CSS është një sfidë për zhvilluesit. Megjithatë, ka disa mënyra për ta zgjidhur atë, të cilat janë mjaft të thjeshta. Ky mësim paraqet 6 opsione për përqendrimin vertikal të përmbajtjes.

Le të fillojmë me një përshkrim të përgjithshëm të problemit.

Problemi i qendrës vertikale

Përqendrimi horizontalisht është shumë i thjeshtë dhe i lehtë. Kur elementi i përqendruar është në linjë, përdorni veçorinë prind-align. Kur elementi është i bazuar në bllok, ne vendosim gjerësinë e tij dhe vendosim automatikisht kufijtë e majtë dhe të djathtë.

Shumica e njerëzve, kur përdorin veçorinë text-align:, i referohen veçorisë vertikale-align për ta përqendruar vertikalisht. Gjithçka duket mjaft logjike. Nëse keni përdorur shabllone tabelare, me siguri keni përdorur shumë atributin valign, gjë që përforcon besimin se rreshtimi vertikal është mënyra e duhur.

Por atributi valign funksionon vetëm në qelizat e tabelës. Dhe vetia vertikale e rreshtimit është shumë e ngjashme me të. Ai gjithashtu prek qelizat e tabelës dhe disa elementë të linjës.

Vlera e vetive vertikale të rreshtimit vepron në lidhje me elementin inline mëmë.

• Në një rresht teksti, shtrirja kryhet në lidhje me lartësinë e rreshtit.
• Rreshtimi përdoret në qelizën e tabelës në lidhje me vlerën e llogaritur nga një algoritëm i veçantë (zakonisht merret lartësia e rreshtit).

Fatkeqësisht, vetia vertikale e rreshtimit nuk ka efekt në elementët e nivelit të bllokut (për shembull, paragrafët brenda një elementi div). Kjo situatë mund të çojë në idenë se nuk ka zgjidhje për problemin e shtrirjes vertikale.

Por ka metoda të tjera për përqendrimin e elementeve të bllokut, zgjedhja e të cilave varet nga ajo që përqendrohet në lidhje me kontejnerin e jashtëm.

Metoda e lartësisë së vijës

Kjo metodë funksionon kur dëshironi të përqendroni vertikalisht një rresht teksti. Gjithçka që duhet të bëni është të vendosni lartësinë e rreshtit të jetë më e madhe se madhësia e shkronjave.

Si parazgjedhje, hapësira e lirë do të shpërndahet në mënyrë të barabartë në krye dhe në fund të tekstit. Dhe vija do të përqendrohet vertikalisht. Shpesh lartësia e linjës bëhet e barabartë me lartësinë e elementit.

HTML:

CSS:

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

Kjo metodë funksionon në të gjithë shfletuesit, megjithëse mund të përdoret vetëm për një linjë. Vlera prej 200 px në shembull zgjidhet në mënyrë arbitrare. Mund të përdoret çdo vlerë më e madhe se madhësia e shkronjave të tekstit.

Përqendrimi i një imazhi duke përdorur lartësinë e vijës

Po sikur përmbajtja të jetë një foto? A do të funksionojë metoda e mësipërme? Përgjigja qëndron në një linjë tjetër të CSS.

HTML:

CSS:

#parent (lartësia e vijës: 200 pikselë;) #parent img (rreshtim vertikal: në mes;)

Vlera e vetive line-height duhet të jetë më e madhe se lartësia e imazhit.

Metoda e tabelave CSS

U përmend më lart se vetia vertikale e rreshtimit zbatohet për qelizat e tabelës, ku funksionon shkëlqyeshëm. Ne mund ta përshkruajmë elementin tonë si një qelizë tabele dhe të përdorim veçorinë vertikale të rreshtimit për të përqendruar vertikalisht përmbajtjen.

Shënim: Një tabelë CSS nuk është e njëjtë me një tabelë HTML.

HTML:

CSS:

#prind (ekrani: tabela;) #fëmijë (ekrani: qeliza e tabelës; rreshtimi vertikal: në mes;)

Ne vendosim daljen tabelare për div prind, dhe div e ndërthurur del si një qelizë tabele. Tani mund të përdorni veçorinë vertikale të rreshtimit në kontejnerin e brendshëm. Çdo gjë në të do të jetë e përqendruar vertikalisht.

Ndryshe nga metoda e mësipërme, në këtë rast përmbajtja mund të jetë dinamike, pasi elementi div do të ndryshojë përmasat për t'iu përshtatur përmbajtjes së tij.

Disavantazhi i kësaj metode është se nuk funksionon në versionet e vjetra të IE. Duhet të përdorim veçorinë display: inline-block për kontejnerin e vendosur.

Pozicionimi absolut dhe marzhet negative

Kjo metodë funksionon gjithashtu në të gjithë shfletuesit. Por kërkon që elementit të përqendruar t'i jepet një lartësi.

Kodi i shembullit kryen qendërzim horizontal dhe vertikal në të njëjtën kohë:

HTML:

CSS:

#prindi (pozicioni: i afërm;) #fëmija (pozicioni: absolut; lart: 50%; majtas: 50%; lartësia: 30%; gjerësia: 50%; diferenca: -15% 0 0 -25%;)

Së pari, ne vendosim llojin e pozicionimit të elementeve. Më pas, për ndarjen e mbivendosur, caktoni vetitë e sipërme dhe të majta në 50%, që është qendra e prindit. Por këndi i sipërm majtas i elementit të mbivendosur është në qendër. Prandaj, duhet ta ngrini lart (gjysma e lartësisë) dhe ta zhvendosni në të majtë (gjysma e gjerësisë), dhe më pas qendra do të përkojë me qendrën e elementit prind. Pra njohja e lartësisë së elementit është e nevojshme në këtë rast. Pastaj vendosni elementin në kufijtë negativë të sipërm dhe të majtë të barabartë me gjysmën e lartësisë dhe gjerësisë, respektivisht.

Kjo metodë nuk funksionon në të gjithë shfletuesit.

Pozicionimi dhe shtrirja absolute

Kodi i shembullit kryen qendërzim vertikal dhe horizontal.

HTML:

CSS:

#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ë shtrirja e elementit të mbivendosur në të 4 kufijtë e elementit prind duke vendosur vetitë e sipërme, të poshtme, djathtas dhe majtas në 0.

Vendosja e tij në paraqitjen automatike në të gjitha anët do të vendosë vlera të barabarta në të katër anët dhe do ta kthejë elementin tonë të mbivendosur div të përqendruar në elementin prind.

Fatkeqësisht, kjo metodë nuk funksionon në IE7 dhe më poshtë.

Margjina të barabarta të sipërme dhe të poshtme

Kjo metodë përcakton në mënyrë eksplicite margjina të barabarta mbi dhe poshtë elementit prind.

HTML:

CSS:

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

Shembulli i kodit CSS vendos kufijtë e sipërm dhe të poshtëm për të dy elementët. Për një element të ndërthurur, vendosja e mbushjes do të shërbejë për qendërzim vertikal. Dhe mbushja e elementit prind do të përqendrojë elementin e mbivendosur në të.

Njësitë relative përdoren për të ndryshuar në mënyrë dinamike madhësinë e artikujve. Dhe për njësitë absolute, llogaritjet do të duhet të bëhen.

Për shembull, nëse elementi prind është 400 pikselë i lartë dhe elementi i mbivendosur është 100 pikselë, atëherë kërkohen 150 px kufijtë e sipërm dhe të poshtëm.

150 + 150 + 100 = 400

Përdorimi i% lejon që llogaritjet t'i lihen shfletuesit.

Kjo metodë funksionon kudo. Ana negative është nevoja për llogaritje.

Shënim: Kjo metodë funksionon duke vendosur mbushjen e jashtme të një elementi. Ju gjithashtu mund të përdorni kufijtë brenda një elementi. Vendimi për përdorimin e marzheve ose mbushjes duhet të merret në varësi të specifikave të projektit.

Div lundrues

Kjo metodë përdor një element div bosh që noton dhe ndihmon në kontrollin e pozicionit të elementit tonë të mbivendosur në dokument. Vini re se div lundrues është i pozicionuar përpara elementit tonë të mbivendosur në kodin HTML.

HTML:

CSS:

#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;)

Ne kompensojmë div-in bosh majtas ose djathtas dhe vendosim lartësinë e tij në 50% të elementit prind. Në këtë mënyrë do të mbushë gjysmën e sipërme të prindit.

Meqenëse kjo div është lundruese, ajo hiqet nga rrjedha normale e dokumentit dhe ne duhet të anulojmë mbështjelljen e tekstit për elementin e mbivendosur. Shembulli përdor qartë: të dyja, por mjafton të përdoret i njëjti drejtim si kompensimi i elementit div bosh lundrues.

Kufiri i sipërm i elementit div të ndërthurur është drejtpërdrejt nën kufirin e poshtëm të elementit div bosh. Ne duhet ta zhvendosim elementin e mbivendosur me gjysmën e lartësisë së elementit bosh lundrues. Për të zgjidhur problemin, përdorni një vlerë negative për vetinë margin-bottom për një element div bosh lundrues.

Kjo metodë funksionon gjithashtu në të gjithë shfletuesit. Megjithatë, përdorimi i tij kërkon një element div shtesë bosh dhe njohuri për lartësinë e elementit të ndërthurur.

konkluzioni

Të gjitha metodat e përshkruara janë të lehta për t'u përdorur. Vështirësia është se asnjëra prej tyre nuk është e përshtatshme për të gjitha rastet. Ju duhet të analizoni projektin dhe të zgjidhni atë që i përshtatet më mirë kërkesave.

Kushdo që është i përfshirë në paraqitjen, herët a vonë, përballet me nevojën për të rreshtuar elementët vertikalisht ... dhe e di se çfarë vështirësish mund të lindin kur rreshtoni një element në qendër. CSS ka një pronë "vertical-align" me vlera të shumta që, logjikisht, duhet të bëjnë shtrirjen vertikale. Në praktikë, megjithatë, nuk funksionon aspak siç pritej.

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.

1. Rreshtimi duke përdorur një tabelë

Në këtë rast, ne zëvendësojmë bllokun e jashtëm me një tabelë të vetme qelize. Shtrirja do të zbatohet në përmbajtjen e qelizës, domethënë në bllokun e brendshëm.

HTML

CSS

E jashtme (gjerësia: 200 px; lartësia: 200 px; rreshtimi i tekstit: në qendër; rreshtimi vertikal: mes; ngjyra e sfondit: #ffc;)

Disavantazhi kryesor i kësaj zgjidhjeje, nga pikëpamja semantike, është përdorimi i tabelës jo për qëllimin e synuar. 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 me div dhe duke vendosur modalitetin e shfaqjes së tabelës në CSS.

HTML

CSS

Mbështjellësi i jashtëm (ekrani: tavolinë;) .i jashtëm (ekrani: qeliza e tabelës;)

2. Përafrimi me dhëmbëza

Duke supozuar se dimë lartësitë e kutive të brendshme dhe të jashtme, 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.

CSS

E jashtme (lartësia: 200 px;) . e brendshme (lartësia: 100 px; kufiri: 50 px 0;)

Ana negative e zgjidhjes është njohja e detyrueshme e lartësisë së të dy blloqeve.

3. Shtrirja me lartësinë e vijës

Nëse blloku i brendshëm nuk zë 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ë shkojë në rreshtin e dytë, këshillohet të shtoni hapësirën e bardhë: nowrap dhe overflow: rregulla të fshehura gjithashtu.

CSS

E jashtme (lartësia: 200 px; lartësia e vijës: 200 px;) . e brendshme (hapësirë ​​e bardhë: tani; tejmbushja: e fshehur;)

Kjo metodë mund të përdoret gjithashtu për të rreshtuar tekstin me shumë rreshta. Për ta bërë këtë, blloku i brendshëm duhet të anashkalojë vlerën e lartësisë së vijës dhe të shtojë ekranin: blloku i brendshëm dhe rregullimi vertikal: rregullat e mesme.

CSS

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;)

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

4. Rreshtimi duke përdorur "stretch"

Kjo metodë mund të përdoret kur lartësia e njësisë së brendshme është e njohur për ne, por ajo e jashtme jo.

Për të aplikuar këtë metodë, na duhen:

• Vendoseni bllokun e jashtëm në pozicionin relativ të pozicionimit: relativ, dhe në atë të brendshëm - pozicion absolut: absolut;
• Shtoni disa rregulla 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.

CSS

E jashtme (pozicioni: relative;) . i brendshëm (lartësia: 100 px; pozicioni: absolut; lart: 0; poshtë: 0; margjina: automatike 0;)

5. Rreshtimi me marzh negativ

Ngjashëm me atë të mëparshme, kjo metodë zbatohet kur lartësia e bllokut të jashtëm është e panjohur, por lartësia e atij të brendshëm dihet.

Ju duhet të vendosni pozicionin relativ të bllokut të jashtëm, dhe atë të brendshëm - absolut. Më pas zhvendoseni bllokun e brendshëm me gjysmën e lartësisë së pjesës së sipërme të bllokut të jashtëm: 50% dhe ngrijeni atë përgjysmë lart, margjina e sipërme e lartësisë së tij: -H _{e brendshme} / 2 .

CSS

E jashtme (pozicioni: relative;) . i brendshëm (lartësia: 100 px; pozicioni: absolut; sipër: 50%; margjina e sipërme: -50 px;)

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

6. Rreshtimi me transformim

Metoda mund të zbatohet kur lartësia e njësisë së brendshme është e panjohur. Ju duhet ta zhvendosni bllokun e brendshëm me gjysmën e lartësisë së sipërme të bllokut të jashtëm: 50%, më pas përdorni vetinë e transformimit dhe zhvendoseni atë përsëri lart duke përdorur funksionin translateY (-50%).

CSS

E jashtme (pozicioni: relative;) .i brendshëm (pozicioni: absolut; sipër: 50%; transformimi: përktheY (-50%);)

7. Rreshtimi me pseudoelement

Kjo është metoda më e gjithanshme që mund të përdoret kur lartësitë e të dy blloqeve janë të panjohura.

Thelbi i metodës është shtimi i një blloku inline me një lartësi 100% brenda bllokut të jashtëm dhe vendosja e tij në shtrirje vertikale. Kështu, lartësia e bllokut të shtuar do të jetë e barabartë me lartësinë e bllokut të jashtëm. Njësia e brendshme do të përafrohet vertikalisht me njësinë e shtuar dhe rrjedhimisht me njësinë e jashtme.

Për të mos prishur semantikën, këshillohet të shtoni bllokun inline duke përdorur pseudoelementet para ose pas.

CSS

E jashtme: përpara (ekrani: blloku i brendshëm; lartësia: 100%; rreshtimi vertikal: në mes; përmbajtja: "";) . i brendshëm (ekrani: blloku i brendshëm; rreshtimi vertikal: në mes;)

Disavantazhi i kësaj metode është se është e pamundur të pranohet me pozicionimin absolut të njësisë së brendshme.

8. Rreshtoni me Flexbox

Mënyra më moderne e shtrirjes vertikale është përdorimi i Flexible Box Layout (ose i shkurtuar Flexbox). Kjo ju lejon të kontrolloni në mënyrë fleksibël pozicionimin e elementeve në faqe, duke i vendosur ato pothuajse kudo. Shtrirja në qendër për Flexbox është një detyrë shumë e thjeshtë.