Rreshtimi i elementeve horizontalisht dhe vertikalisht mund të bëhet menyra te ndryshme. Zgjedhja e metodës varet nga lloji i elementit (blloku ose inline), nga lloji i pozicionimit të tij, madhësia, etj.

1. Shtrirja horizontale në qendër të bllokut / faqes

1.1. Nëse blloku ka një gjerësi:

Nëse dëshironi të rreshtoni një element inline në këtë mënyrë, duhet ta vendosni atë të shfaqë: bllok;

1.2. Nëse një bllok është i vendosur brenda një blloku tjetër dhe nuk ka/gjerësi të caktuar për të:

1.3. Nëse blloku ka një gjerësi dhe duhet të fiksohet në qendër të bllokut prind:

1.4. Nëse nuk është caktuar gjerësi për blloqet, mund të përqendroni duke përdorur bllokun e mbështjellësit prind:

2. Rreshtimi vertikal

2.1. Nëse teksti zë një rresht, për shembull, për butonat dhe artikujt e menysë:

2.2. Për të rreshtuar një bllok vertikalisht brenda bllokut prind:

2.3. Rreshtimi vertikal sipas llojit të tabelës:

2.4. Nëse kutia ka një gjerësi dhe lartësi të caktuar dhe duhet të përqendrohet në kutinë mëmë:

2.5. Pozicionimi absolut në qendër të faqes/bllokut duke përdorur transformimin CSS3:

nëse elementi ka përmasa

nëse elementi nuk ka dimensione dhe nuk është bosh

2.5. Pozicionimi absolut i bllokut

në qendër të faqes

në qendër të bllokut

Nga autori: Ju mirëpres përsëri në faqet tona të blogut. Në artikullin e sotëm, do të doja të flisja për teknika të ndryshme të shtrirjes që mund të aplikohen si për blloqet ashtu edhe për përmbajtjen e tyre. Në veçanti, si të rreshtoni blloqet në css, si dhe shtrirjen e tekstit.

Rreshtoni blloqet në qendër

Është e lehtë të vendosësh në qendër një bllok në css. Kjo është teknika më e famshme për shumë njerëz, por unë do të doja të flisja për të tani, para së gjithash. Kjo është menduar të jetë e përqendruar horizontalisht në lidhje me elementin prind. Si realizohet? Le të themi se kemi një enë dhe lënda jonë e testimit është në të:

Le të supozojmë se ky është kreu i faqes. Ajo nuk përfshin gjerësinë e plotë të dritares dhe ne duhet ta përqendrojmë atë. Ne shkruajmë kështu:

Duhet të specifikojmë gjerësinë e saktë ose maksimale, dhe më pas të shkruajmë vetinë kryesore - marzh: 0 auto. Ajo vendos kufijtë për kokën tonë, vlera e parë përcakton kufijtë nga lart dhe poshtë, dhe e dyta - djathtas dhe majtas. Vlera automatike udhëzon shfletuesin që të llogarisë automatikisht mbushjen në të dyja anët, në mënyrë që elementi të përqendrohet saktësisht në elementin prind. Të rehatshme!

Rreshtimi i tekstit

Ky është gjithashtu një truk shumë i thjeshtë. Për të rreshtuar të gjithë elementët e linjës, mund të përdorni veçorinë e rreshtimit të tekstit dhe vlerat e saj: majtas, djathtas, qendër. Ky i fundit përqendron tekstin, gjë që ne duam. Edhe një fotografi mund të rreshtohet në të njëjtën mënyrë, sepse është gjithashtu një element inline si parazgjedhje.

Rreshtoni tekstin vertikalisht

Por kjo tashmë është më e vështirë. Si parazgjedhje, nuk ka një veçori kaq të thjeshtë të njohur që do ta përqendronte lehtësisht tekstin në një enë blloku vertikalisht. Megjithatë, ka disa truke që dizajnerët e faqosjes kanë dalë me gjatë viteve.

Vendosni lartësinë e bllokut duke përdorur mbushjen. Mënyra është që të mos vendosni një lartësi të qartë me lartësinë, por ta krijoni atë artificialisht me mbushje të sipërme dhe të poshtme, të cilat duhet të jenë të njëjta. Le të krijojmë çdo bllok dhe t'i shkruajmë vetitë e mëposhtme:

div( sfond: #ccc; mbushje: 30px 0; )

Sfondi është vetëm për të parë vizualisht skajet, si dhe mbushjen. Tani lartësia e bllokut përbëhet nga këto dy dhëmbëza dhe vetë rreshti, dhe gjithçka duket kështu:

Përcaktoni një lartësi të vijës për bllokun. Më duket se kjo është një mënyrë më e saktë nëse duhet të rreshtoni një rresht teksti. Me të, ju mund të regjistroni lartësinë normale duke përdorur vetinë e lartësisë. Pas kësaj, ai gjithashtu duhet të vendosë lartësinë e vijës, të njëjtë me lartësinë e bllokut në tërësi.

div (lartësia: 60 px; lartësia e vijës: 60 px; )

Rezultati do të jetë i ngjashëm me foton e mësipërme. Gjithçka do të funksionojë edhe nëse shtoni mbushje. Megjithatë, vetëm për një rresht. Nëse keni nevojë për më shumë tekst në një element, atëherë këtë metodë nuk punon.

Shndërroni bllokun në qelizën e tabelës. Thelbi i kësaj metode është se vetia vertikale-align: mesme vepron në qelizën e tabelës, e cila e përqendron elementin vertikalisht. Prandaj, në këtë rast, blloku duhet të vendoset në sa vijon:

div (ekrani: qeliza e tabelës; rreshtimi vertikal: në mes; )

Kjo metodë është e bukur sepse mund të rreshtoni sa më shumë tekst që dëshironi në qendër. Por është më mirë të vendosni ekranin: tabelën në bllokun në të cilin është vendosur div-ja jonë, përndryshe mund të mos funksionojë.

Epo, këtu kemi ardhur te truku i fundit për sot - ky është shtrirja e vetë blloqeve vertikalisht. Duhet thënë se sërish nuk ka asnjë pronë që është menduar posaçërisht për këtë, por ka disa truke që duhet të keni parasysh.

Vendosni kompensimet si përqindje. Nëse e dini lartësinë e elementit prind dhe vendosni një element tjetër të nivelit të bllokut brenda tij, mund ta përqendroni atë duke përdorur mbushjen e përqindjes. Për shembull, prindi ka një lartësi prej 600 px. Ju vendosni një bllok në të që ka një lartësi prej 300 px. Sa ju duhet të bëni kopje rezervë nga lart dhe poshtë për ta përqendruar atë? 150 piksel secila, që është 25% e gjatësisë së prindit.

Kjo metodë ju lejon të bëni qendërzim vetëm kur dimensionet ju lejojnë të bëni llogaritjet. Dhe nëse keni një prind 887 piksele në lartësi, atëherë nuk do të jeni në gjendje të shkruani asgjë saktësisht, kjo tashmë është e qartë.

Futni një element në një qelizë tabele. Përsëri, nëse e konvertojmë elementin prind në një qelizë tabele, atëherë blloku i futur në të do të përqendrohet automatikisht vertikalisht. Për ta bërë këtë, prindi duhet vetëm të vendosë rreshtimin vertikal: mes.

Dhe nëse, përveç kësaj, shkruajmë edhe marzhin: 0 auto, atëherë elementi do të përqendrohet horizontalisht!

Përafrimi i tekstit e përcakton atë pamjen dhe orientimin e skajeve të paragrafit, dhe mund të jetë majtas, djathtas, në qendër ose i justifikuar. Në tabelë. 1 tregon opsionet e shtrirjes së bllokut të tekstit.

Opsioni më i zakonshëm është rreshtimi majtas, kur teksti majtas zhvendoset në skaj, ndërsa i djathti mbetet i dehur. Shtrirja djathtas dhe qendra përdoret kryesisht në tituj dhe nëntituj. Duhet pasur parasysh se kur përdoret justifikimi në tekst, mund të shfaqen intervale të mëdha ndërmjet fjalëve, gjë që nuk është shumë e bukur.

Etiketa e paragrafit zakonisht përdoret për të vendosur shtrirjen e tekstit.

Me atributin align, i cili specifikon metodën e shtrirjes. Është gjithashtu e lejueshme të rreshtoni një bllok teksti duke përdorur etiketën