Ndarja e përmbajtjes është në qendër. Shtrirja në qendër në CSS. Përafrimi në qendër i një elementi vargu ose vargu-*

Ky llojlejon kalimin e elementeve të ndaluar.

Tani le të kalojmë te atributi rreshtoj. Vendos shtrirjen horizontale të objekteve dhe përshtatet pas deklarimit të etiketës. Në mënyrë tipike, mund të përdoret për të lidhur përmbajtjen në të majtë ( majtas), përgjatë skajit të djathtë ( drejtë), në qendër ( qendër) dhe sipas gjerësisë së tekstit ( justifikoj).

Më poshtë do të jap një shembull në të cilin do të vendos foton dhe paragrafin në qendër.

Kjo përmbajtje do të jetë në qendër.

Ju lutemi vini re se për imazhin atributi që po analizojmë ka kuptime paksa të ndryshme.

Në shembullin që përdora rresht = "mes". Falë kësaj, imazhi u rreshtua në mënyrë që fjalia të vendosej qartë në mes të figurës.

Mjetet e përqendrimit në css

Karakteristikat CSS të krijuara për të lidhur blloqet, tekstin dhe përmbajtjen grafike përdoren shumë më shpesh. Kjo është kryesisht për shkak të komoditetit dhe fleksibilitetit të stileve të zbatimit.

Pra, le të fillojmë me vetinë e parë të përqendrimit të tekstit - kjo është tekst-rreshtoj.

Funksionon në të njëjtën mënyrë si align in. Ndër fjalë kyçe, ju mund të zgjidhni një nga lista e përgjithshme ose të trashëgoni karakteristikat e një paraardhësi ( trashëgojnë).

Dua të vërej se në css3 mund të vendosni 2 parametra të tjerë: filloni– në varësi të rregullave të shkrimit të tekstit (nga e djathta në të majtë ose anasjelltas), vendos shtrirjen majtas ose djathtas (ngjashëm me veprën majtas ose djathtas) dhe fund– e kundërta e fillimit (kur shkruani tekst nga e majta në të djathtë vepron si djathtas, kur shkruani nga e djathta në të majtë – majtas).

Unë do t'ju tregoj për një mashtrim të vogël. Kur zgjidhni një vlerë justifikoj vija e fundit mund të varet në mënyrë jo tërheqëse nga fundi. Për ta vendosur, për shembull, në qendër, mund ta përdorni pronën teksti-rrafshoj-i fundit.

Për të lidhur përmbajtjen e sajtit ose qelizat e tabelës vertikalisht, përdorni veçorinë vertikal-rreshtoj. Më poshtë kam përshkruar fjalët kyçe kryesore të elementit.

dhëmbëzimet

Dhe së fundi vijmë te pikat e paragrafit. Gjuha CSS përdor një pronë të veçantë të quajtur tekst-indent.

Me ndihmën e tij mund të bëni si një vijë të kuqe ashtu edhe një zgjatje (duhet të specifikoni një vlerë negative).

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. Përafrimi me:

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

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ë

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.

Rreshtimi duke përdorur dhëmbëzimet

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

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"

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.

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

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

E jashtme ( pozicioni: relativ; ) . i brendshëm ( pozicioni: absolut; lart: 50%; transformimi: translateY(-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

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

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

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

Cila metodë duhet të zgjedh?

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

Ne analizojmë shtrirjen e elementeve të bllokut në CCS. Ne vendosim disa në qendër DIV ose LI elementet. Unë ofroj disa nga opsionet e mia për shumicën e rasteve.

Ky artikull nuk synon të listojë të gjitha opsionet e shtrirjes dhe të rishkruajë atë që tashmë ekziston diku. Nuk e mbaj mend pse, por shpesh nuk isha i kënaqur me opsionet e ofruara. Ose kishte blloqe fikse, ose gjithçka u prish gjatë paraqitjes adaptive, ose disa mangësi të tjera.

Ndonjëherë, për t'u lidhur në qendër, mjafton të shtoni disa atribute dhe nuk keni nevojë për asgjë të komplikuar. Për shembull, kështu jam edhe unë.

Më poshtë janë disa opsione për paraqitjen adaptive për rreshtimin e blloqeve në qendër, të cilat unë Unë përdor në faqet e tyre të internetit. Dhe nëse e para është mjaft e zakonshme, atëherë ndoshta disa metoda të tjera as nuk do të përshkruhen në internet pikërisht në këtë mënyrë.

opsioni 1

Rreshtimi i thjeshtë i të gjitha blloqeve në qendër të faqes.

Le të qendrojmë Përmbajtja UL prej 4 elementesh LI, të cilat janë në bllok DIV me klasën enë.

Në këtë rast, rregullat e mëposhtme në CSS janë të mjaftueshme:

enë (
gjerësia: 100%;
}

Enë ul (
text-align: qendër;
list-style: asnjë;
}

enë li (
ekrani: inline-block;
}

Ne marrim pamjen e mëposhtme: Ka 4 elementë LI të përqendruar këtu. Kur madhësia e ekranit zvogëlohet, elementët që nuk përshtaten zhvendosen poshtë.

Nëse bllokon LI me këto prona nuk janë instaluar në qendër, që do të thotë se ndonjë pronë tjetër po ndërhyn në to. Për shembull, kjo mund të jetë pronë noton: majtas ose shfaqja: tabela; apo ndonjë tjetër.

Tani mund të shtoni stile të tjera në strukturën e sipërme (në kornizën bazë të shtrirjes CSS). Për shembull, bëni blloqe me një madhësi fikse dhe futni njëra-tjetrën:

enë li (
ekrani: inline-block;
diferenca: 5 px;
gjerësia: 100 px;
}

Ne marrim sa vijon:

Por ka një pengesë për këtë opsion. Blloqet janë të vendosura në qendër, por ka distanca të mëdha majtas dhe djathtas. Ato mund të zvogëlohen duke ndryshuar gjerësinë.

Ose mund të bëni kontejnerë me të njëjtën madhësi në mënyrë që të ketë dhëmbëza vetëm midis kontejnerëve dhe të mos ketë asnjë në të majtë dhe në të djathtë.

Pastaj do të heqim diferencë dhe shtoni gjerësinë e kësaj gjerësia në mënyrë që të mbulojë plotësisht zonën.

enë li (
vertikale-linjë: lartë;
ekrani: inline-block;
gjerësia: 32.899%;
}

Do të ketë një zonë të vogël të hapësirës boshe midis blloqeve. Dhe për ta bërë atë edhe më të madh, mund të tërhiqeni brenda duke përdorur parametrin mbushje.

Në blloqe, qëllimisht nuk shtoj asgjë shtesë në mënyrë që të lë pikërisht ato stile që ndikojnë drejtpërdrejt në shtrirjen. Por nëse bëni të njëjtën gjë, nuk do të merrni blloqe të tilla. Nëse vetëm sepse, së pari, duhet të shtoni ngjyrë në bllok, dhe së dyti, nëse është bosh, vendosni lartësia: 100 px;. Atributet e tjera janë sipas dëshirës suaj.

Versioni përfundimtar është:

Në pamjen e mësipërme, lashë zona të tjera të sitit në mënyrë që të jetë e qartë se ku janë kufijtë e blloqeve, sepse nëse ato janë ngjitur me skajin, atëherë buza në vetvete nuk është më e dukshme. Dhe në foto, skajet e bardha majtas dhe djathtas janë një shtrirje e ndryshme që nuk ka asgjë të përbashkët me shembullin në fjalë. E përsëris, vetë blloqet janë ngjitur me skajet, të cilat nuk janë të dukshme, sepse blloqet i mbulojnë plotësisht ato.

Opsioni 2

Ka shumë mënyra për të përqendruar blloqet. Por nëse ju duhet ta bëni shtrirjen më të zgjuar, duhet të grumbulloni trurin tuaj. Për fat të mirë, unë dola me një metodë interesante për qëllimet e mëposhtme:

Si t'i përqendroj të gjitha div-të në mënyrë që blloku në rreshtin tjetër të lihet i rreshtuar?

Ne kemi strukturën e mëposhtme:

Ne shkruajmë klasa për ta:

gjerësia: 90%;
marzhi: 0 auto;
}

Arkivi-artikull (
ekrani: inline-block;
vertikale-linjë: lartë;

Gjerësia: llogaritur (33,3333% - (0,666666666667 * 36 px));
diferenca: 0 10px 0 11px;
}

Ju lutemi vini re se nëse ndryshoni përmasat kalc, atëherë duhet të rregulloni në mënyrë eksperimentale dimensionet diferencë. Përndryshe, blloqet nuk do të përqendrohen.

Ky rreshtim duhet të bëhet me sy. Por nëse ka më pak blloqe në linjën e re sesa në linjën e mësipërme, ky bllok i vetmuar do të jetë me ana e majte. Dhe duket shumë më bukur se kur në vijën tjetër një bllok i vetëm ndodhet në qendër.

Duke zbatuar teknikën e mësipërme, do të marrim një plan urbanistik adaptiv, me të gjitha skajet të barabarta, i cili nuk do të përkeqësohet kur ndryshoni madhësinë e ekranit.

Dhe nëse duam që versioni celular të mos ketë 3 blloqe, por 2, atëherë në ccs për një rezolucion prej 768 pikselësh, ne do t'i ndajmë blloqet ndryshe:

Ekrani @media dhe (gjerësia maksimale: 768 px) (
.arkivi-artikull (
gjerësia: llogaritur (47.3333% - (0.666666666667 * 25 px));
diferenca: 0 10px 0 20px;
}
}

Le të marrim të njëjtat blloqe në versionin celular, por me dy blloqe për rresht:

Opsioni 3

Tani do të rreshtojmë duke përdorur përkul. Kjo mund të duket si mënyra ideale për të niveluar, sepse në fakt funksionon shumë thjesht. Megjithatë, FLEX nuk e përballon detyrën e përshkruar në opsionin 2. Të paktën, unë nuk munda të arrij të njëjtat rezultate.

Tek pjesa tjetër:

Shtimi i stileve:

#cssmenu (
diferenca: 20 px automatike;
}

#cssmenu ul (
list-style: asnjë;
shfaqja: flex;
flex-mbështjell: mbështjell;
justify-content: qendër;
}

#cssmenu > ul > li (
diferenca: 1 px;
}

Ne marrim:

Në shembullin e dhënë:

flex-mbështjell: mbështjell;

Zhvendos blloqet në rreshtin tjetër nëse mbushin enën. Përndryshe, ata do të shkojnë më tej jashtë dritares së shfletuesit.

justify-content: qendër;

Ne rreshtojmë përmbajtjen e blloqeve në qendër.

Opsioni 4

Një tjetër opsion i shtrirjes duke përdorur teknologjinë flex.

Ne kemi një enë me dy blloqe brenda. Ne kemi nevojë për këto 2 blloqe për të ndarë gjerësinë në dy anët e barabarta.

Për ta bërë këtë, ne do të shkruajmë vetitë e mëposhtme në stilet:

enë (
shfaqja: flex;
}

Blloko (
flex-bazë: 100%;
}

Opsioni 5

Ekziston një mundësi tjetër për përqendrimin e blloqeve, nëse numri i tyre është rreptësisht i barabartë. Për shembull: ka 9 blloqe, 3 për secilën rresht. Dhe ju e dini se kështu do të mbetet gjithmonë. Për shembull, ju po krijoni një faqe uljeje dhe e dini me siguri se asgjë e panevojshme nuk do të shtohet në faqe midis këtyre blloqeve.

Pra, ne kemi 9 blloqe të llojit të mëposhtëm (nuk i kam dublikuar rreshtat 9 herë, por mbani në mend se ka 9 blloqe):

Aplikoni stile për to:

Arkivi-kontejner-për-artikuj (
gjerësia: 100%;
text-align: qendër;
}

Arkivi-artikull (
gjerësia: 25%;
vertikale-linjë: lartë;
ekrani: inline-block;
text-align: majtas;
}

Arkivi-artikull:nth-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7) (
margjina: 20px 0 30px 40px;
}

Arkivi-artikull:nth-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8) (
diferenca: 20px 40px 30px;
}

Arkivi-artikull:nth-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9) (
diferenca: 20px 40px 30px 0;
}

Ne gjithashtu do të marrim një plan urbanistik adaptiv. Kur ekrani zvogëlohet, blloku që nuk përshtatet do të shkojë në qendër të poshtme

Avantazhi i këtij lloji të përqendrimit është se ju mund të bëni qartë dhe qartë dhëmbëzime midis blloqeve.

Pengesë kryesore është se asgjë nuk mund të vendoset brenda blloqeve. Çdo element:

qoftë div ose fq ose diçka tjetër, do të konsiderohet si një element i brendshëm fëmija i nëntë. Si rezultat, stilet CSS do të mbivendosen mbi të dhe të gjitha dhëmbëzat e bëra duke përdorur margjinën do t'i zhvendosin blloqet ndryshe nga sa ishte menduar fillimisht.