.

Atributi align është mjaft i gjithanshëm dhe mund të zbatohet jo vetëm për tekstin e trupit, por edhe për titujt si

. Shembulli 1 tregon se si të vendosni shtrirjen në një rast të tillë.

Shembulli 1: Rreshtimi i tekstit

Si të kapni një luan?

metoda e numërimit

Ne e ndajmë shkretëtirën në një numër seksionesh elementare, madhësia e të cilave përkon me dimensionet e përgjithshme të luanit, por është më e vogël se madhësia e kafazit. Më pas, me një numërim të thjeshtë, ne përcaktojmë zonën në të cilën ndodhet luani, gjë që çon automatikisht në kapjen e tij.

metoda e dikotomisë

E ndajmë shkretëtirën në dy gjysma. Në njërën pjesë ka një luan, në tjetrën nuk ka asnjë. Marrim gjysmën në të cilën ndodhet luani dhe e ndajmë përsëri në gjysmë. Kështu e përsërisim derisa luani të kapet.

Rezultati i shembullit është paraqitur në Fig. 1.

Oriz. 1. Rreshtoni tekstin djathtas dhe majtas

NË ky shembull titulli është rreshtuar në qendër të dritares së shfletuesit, paragrafi i zgjedhur në të djathtë dhe teksti i trupit në të majtë.

Etiketat HTML që përcaktojnë shtrirjen e tekstit, dhëmbëzimin

Teksti i justifikuar i përdorur në tipografi

Shembulli i mëposhtëm tregon se si të përafrohet teksti në gjerësi faqet:

rresht = "majtas"	rresht = "djathtas"
	Çdo ditë po rritet numri i punëtorëve të punësuar në sektorin e shërbimeve dhe shpërndarjes së informacionit. Nëse simbolet e shekujve të kaluar ishin ferma dhe fabrika, atëherë simboli i shekullit të sotëm 21 është një zyrë e pajisur me kompjuterë që kanë akses në rrjedhën e informacionit.
rresht = "justifikoj"	rresht = "qendër"
Çdo ditë po rritet numri i punëtorëve të punësuar në sektorin e shërbimeve dhe shpërndarjes së informacionit. Nëse simbolet e shekujve të kaluar ishin ferma dhe fabrika, atëherë simboli i shekullit të sotëm 21 është një zyrë e pajisur me kompjuterë që kanë akses në rrjedhën e informacionit.	Çdo ditë po rritet numri i punëtorëve të punësuar në sektorin e shërbimeve dhe shpërndarjes së informacionit. Nëse simbolet e shekujve të kaluar ishin ferma dhe fabrika, atëherë simboli i shekullit të sotëm 21 është një zyrë e pajisur me kompjuterë që kanë akses në rrjedhën e informacionit.

Vlera justifikuese jep uniforme rreshtimi i tekstit djathtas dhe majtas, kjo eshte në gjerësi. Kjo metodë përdoret gjerësisht në shtyp.

Përafrimi i tekstit në HTML në qendër dhe justifikim

Lidhni tekstin në HTML në qendër, tekstin në të djathtë:

Rezultati:

Atributet dhe vlerat

• align="majtas" - përcakton rreshtimi i tekstit në të majtë(e parazgjedhur).
• align = "qendër" - rreshton tekstin në qendër.
• rresht = "djathtas" rreshton tekstin në të djathtë.

Rreshtimi | Dhënia e tekstit HTML

Teksti HTML dhe dhëmbëzimi i tij në të majtë të faqes

Le të prodhojmë dhëmbëzimi i tekstit në të majtë në dy mënyra:

Rezultati:

Shikoni në një dritare të re.

Përshëndetje! Vazhdoni të mësoni bazat Gjuha HTML. Le të shohim se çfarë duhet të shkruani për të lidhur tekstin në qendër, gjerësi ose skajet.

Duke u nisur nga biznesi, le të shohim se si ta bëjmë qendrën e tekstit tre në HTML menyra te ndryshme. Dy të fundit lidhen drejtpërdrejt me fletën e stilit. Mund të jetë një skedar CSS që lidhet me faqet e faqes dhe vendos pamjen e tyre.

Metoda 1 - punoni drejtpërdrejt me HTML

Në fakt, gjithçka është mjaft e thjeshtë. Shih shembullin më poshtë.

Rreshtoni paragrafin në qendër.

Nëse dëshironi të zhvendosni fragmentet e tekstit në një mënyrë tjetër, atëherë në vend të parametrit "qendër", vendosni vlerat e mëposhtme:

• justify - rreshtoni tekstin në gjerësinë e faqes;
• djathtas - në skajin e djathtë;
• majtas - në të majtë.

Për analogji, ju mund të lëvizni përmbajtjen që është në titujt (h1, h2), kontejnerët (div).

Metoda 2 dhe 3 - përdorimi i stileve

Dizajni i paraqitur më sipër mund të transformohet pak. Efekti do të jetë i njëjtë. Për ta bërë këtë, duhet të shkruani kodin më poshtë.

Blloku i tekstit.

Në këtë formë, kodi shkruhet direkt në HTML për të përqendruar përmbajtjen e tekstit.

Ekziston një mënyrë tjetër alternative për të arritur rezultatin. Do t'ju duhet të bëni disa gjëra.

Hapi 1. Në kodin kryesor, shkruani

Materiali i tekstit.

Hapi 2. Në skedarin e përfshirë CSS, futni kodin e mëposhtëm:

Rovno (drejtimi i tekstit: qendër;)

Vërej se fjala "rovno" është vetëm emri i një klase që mund të quhet ndryshe. Kjo është lënë në diskrecionin e programuesit.

Për analogji, në HTML, ju lehtë mund ta përqendroni tekstin, ta justifikoni atë dhe ta rreshtoni në të djathtë ose në të majtë të faqes. Siç mund ta shihni, nuk ka një mundësi për të arritur qëllimin.

Vetëm disa pyetje:

• A po bëni një projekt informativ jo-tregtar?
• Dëshironi që faqja juaj të funksionojë mirë? Motorë kërkimi?
• Dëshironi të fitoni të ardhura online?

Nëse të gjitha përgjigjet janë pozitive, atëherë thjesht shikoni qasjen e integruar për zhvillimin e faqes në internet. Informacioni do të jetë veçanërisht i dobishëm nëse funksionon CMS WordPress.

Do të doja të theksoja se faqet tuaja janë vetëm një nga opsionet e shumta për gjenerimin e të ardhurave pasive ose aktive në internet. Blogu im ka të bëjë vetëm me mundësitë financiare në rrjet.

A keni punuar ndonjëherë në fushën e arbitrazhit të trafikut, shkrimit të kopjeve dhe aktiviteteve të tjera që sjellin të ardhura kryesore ose shtesë me bashkëpunim në distancë? Ju mund të mësoni për këtë dhe shumë më tepër tani në faqet e blogut tim.

Përpara do të botoj ende jo pak realiste informacione të dobishme. Qëndroni në kontakt. Nëse dëshironi, mund të abonoheni në përditësimet e Workip me e-mail. Formulari i abonimit gjendet më poshtë.

Kur shtroni një faqe, shpesh është e nevojshme të rreshtoheni me të qendër css-way: për shembull, përqendroni njësinë kryesore. 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.

Rreshtimi i tekstit në qendër

Shpesh, për qëllime dekorative, dëshironi të vendosni shtrirjen e tekstit në qendër, CSS në këtë rast ju lejon të zvogëloni kohën e paraqitjes. Më parë, kjo bëhej duke përdorur atributet HTML, por tani standardi kërkon që teksti të përafrohet duke përdorur fletët e stilit. Ndryshe nga blloqet, për të cilat duhet të ndryshoni kufijtë, në Rreshtimi CSS teksti në qendër bëhet me një rresht të vetëm:

• text-align:center;

Kjo pronë trashëgohet dhe kalon nga prindi te të gjithë fëmijët. 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ë faqe, align i atribuohet vetë etiketës. Kjo menjëherë e bën kodin të pavlefshëm, pasi W3C e ka zhvlerësuar atributin align. Përdorimi i tij në një faqe nuk rekomandohet.

Përafrimi i një blloku në qendër

Nëse keni nevojë të përqendroni një div, CSS mund të ofrojë mjaft. mënyrë e përshtatshme: përdorni kufijtë e marzhit. Indencat mund të vendosen si për elementët e bllokut ashtu edhe për elementët e blloqeve në linjë. Vlera e pronës duhet të marrë vlerat 0 (hyrje vertikale) dhe automatike (hyrje automatike horizontale):

• marzhi: 0 auto;

Tani ky opsion njihet si absolutisht i vlefshëm. Përdorimi i margjinave ju lejon gjithashtu të vendosni shtrirjen e imazhit në qendër: ju lejon të zgjidhni shumë probleme që lidhen me pozicionimin e një elementi në një faqe.

Rreshtoni bllokun majtas ose djathtas

Ndonjëherë përqendrimi në mënyrën CSS nuk kërkohet, por ju duhet të vendosni dy blloqe krah për krah: një në skajin e majtë, tjetrin në të djathtë. Për këtë ka pronë notuese, 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 (float:majtas;)
• .djathtas (float:djathtas)

Nëse ekziston edhe një bllok i tretë, i cili duhet të jetë i vendosur nën dy blloqet e para (për shembull, një fund), atëherë duhet të vendosë veçorinë e qartë:

• .majtas (float:majtas;)
• .djathtas (float:djathtas)
• fundi i faqes (e 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. Vetia clear:both lejon që fundi ose çdo bllok tjetër të shohë elementët që kanë rënë nga rrjedha dhe çaktivizon mbështjelljen (float) si në të majtë ashtu edhe në të djathtë. Prandaj, në shembullin tonë, futeri do të lëvizë poshtë.

Rreshtimi vertikal

Ka raste kur nuk mjafton të vendosni shtrirjen qendrore në mënyra CSS, duhet të ndryshoni edhe pozicionin vertikal të bllokut të fëmijëve. Çdo element inline ose inline-block mund të jetë në nivel lart ose poshtë, të jetë në mes të një elementi prind ose të jetë në çdo pozicion. Më shpesh, një bllok duhet të përqendrohet, gjë që bëhet duke përdorur atributin 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 në krye - .fëmijë (vertical-align:lart);
• shtrirje në qendër - .fëmijë(vertikal-linjë: në mes);
• shtrirje nga fundi - .fëmijë(vertikal-linjë:poshtë);

Elementet e nivelit të bllokut nuk ndikohen nga rreshtimi i tekstit ose rreshtimi vertikal.

Probleme të mundshme me blloqet e rreshtuara

Ndonjëherë përqendrimi i një div në mënyrën CSS mund të shkaktojë pak probleme. Për shembull, kur përdorni float: le të themi se ka tre blloqe: .first, .second dhe .third. Blloqet e dyta dhe të treta shtrihen 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 nuk do të shtrihet më në lartësinë e blloqeve të fëmijëve. Për të shmangur këtë gabim, ata përdorin një "spacer" - një bllok i veçantë që sheh .second dhe .tretë. Kodi CSS:

• .sekond (float:majtas)
• .tretë (float: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 spacer (në shembull, div me klasën e kontejnerit shtrihet brenda .first dhe përmban .majtas dhe .djathtas):

• .left(float:majtas)
• .djathtas (float:djathtas)
• .container:after(përmbajtja:""; shfaq:tabelë; qartë:të dyja;)

Opsionet e mësipërme janë më të zakonshmet, megjithëse ka disa variacione. Ju gjithmonë mund të gjeni mënyrën më të lehtë dhe më të përshtatshme për të krijuar një pseudo spacer përmes eksperimentimit.

Një problem tjetër me të cilin shpesh ballafaqohen dizajnerët e paraqitjes është shtrirja e elementeve të blloqeve inline. Një hapësirë ​​shtohet automatikisht pas secilës prej tyre. Vetia e marzhit, e cila është vendosur në një marzh negativ, ndihmon për të përballuar këtë. Ka mënyra të tjera që përdoren shumë më rrallë: për shembull, zeroimi 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 shkronjave ë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, kështu që opsioni me dhëmbëza 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, vendndodhja e mallrave në dyqanet në internet dhe fotot në faqen e kartës së biznesit.

Duket se nuk ka asgjë të vështirë për të vendosur një imazh ose tekst në qendër të dritares së shfletuesit. Ne përdorim etiketën CENTRE dhe gjithçka bie në vendin ku kemi menduar. Megjithatë, jo gjithçka kaq e thjeshtë. Ekzistojnë tre mënyra për të vendosur shtrirjen në qendër, secila prej të cilave ka karakteristikat dhe dallimet e veta në shfletues të ndryshëm.

Një nga etiketat më të thjeshta dhe më të përshtatshme - CENTER është krijuar për të lidhur një bllok teksti. Ky etiketë mund të përdoret gjithashtu për të vendosur në qendër figurat dhe tabelat. Përjashtim bëjnë elementet ose për të cilat shtrirja vendoset nga vetitë e etiketës IMG. Kështu, nëse vendosim një element brenda etiketës CENTER, fotografia do të jetë e rreshtuar djathtas.

Shembulli 4.1. Përqendrimi me etiketën CENTER

Ky tekst do të përafrohet në qendër të dritares së shfletuesit dhe në bazë
vizatim në anën e djathtë.

Formalisht, CENTER duhet të përdoret vetëm si parametër për etiketat e tjera të bllokut (P, PRE dhe të tjerë). Megjithatë, në shfletuesin Netscape Navigator 2.0, CENTER u prezantua si një etiketë e pavarur. Kjo shtesë synonte të hiqte mbushjen vertikale shtesë që shfaqet kur përdorni etiketat e bllokut. Nëse në vend të etiketës CENTER teksti vendoset brenda një paragrafi (

) , shfaqet një mbushje vertikale shtesë midis vijës horizontale dhe këtij teksti.

CENTER nuk është pjesë e specifikimit HTML. në "zyrtare" Formatimi HTML, të tilla si rreshtimi i tekstit duhet të bëhet nëpërmjet atributeve të etiketave (për shembull,

) ose duke përdorur stile. Sidoqoftë, kjo etiketë fitoi të drejtën e ekzistencës. Megjithatë, që nga lëshimi i specifikimit HTML 4 W3, Konsorciumi ka rekomanduar që të shmanget përdorimi i etiketës CENTER dhe që elementi

, siç tregohet në shembullin 4.2.

Shembulli 4.2. Përqendrimi me një etiketë DIV

---

Një mënyrë tjetër për të përqendruar është përdorimi i stileve. Stilet janë udhëzime që ju lejojnë të kontrolloni atributet e formatimit si fonti, ngjyra, shtrirja, etj. Një shembull i ripërcaktimit të etiketës P në qendër të tekstit.

Shembulli 4.3. Përqendrimi me Stilet

Tani kur do të përdorni etiketën P me sa më sipër
stil, teksti i paragrafit do të përafrohet në qendër të dritares së shfletuesit