Ç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ë humbni kohë shtesë për të nxjerrë në pah gjënë kryesore. Vendosa ta dorëzoj këtë informacion në formën që më përshtatet, 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 kutitë që kanë një lartësi të njohur (për shtrirjen vertikale) ose gjerësi (për shtrirjen horizontale).

Rreshtimi me mbushje

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

Për shembull, ekziston një fotografi 200 me 200 piksele, dhe ne duam ta përqendrojmë atë në një bllok prej 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ë raport me prindin më të afërt me "pozicion: relative". Për këtë, të gjitha pronat (" krye","drejtë","fund","majtas") të 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ë madhësinë e bllokut prind. Është më e sigurt të vendosni vetitë majtas (djathtas, poshtë, lart) në 0 (zero).

.example-wrapper2 (pozicioni: relative; lartësia: 250 px; sfondi: url(space.jpg) ;) 0; djathtas: 0; margjina: automatik; sfondi: url(king.png) ;)

Rreshtimi horizontal

Rreshtimi me "text-align: center"

Për të rreshtuar tekstin në një bllok, ekziston një veti 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 rrallë, më shpesh ky opsion mund të gjendet për të rreshtuar hapësirat, lidhjet ose fotot.

Një herë m'u desh të krijoja tekst për të treguar se si funksionon përafrimi i tekstit me 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 ta shkruaj këtë paragraf këtu - në fund të fundit, pika nuk është me të, por pika është në përputhje.

.example-text (text-align: në qendër; mbushje: 10px; sfond: #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ë i rreshtuar majtas, 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 me margjina

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

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

Kështu ia vlen të rreshtoni të gjitha blloqet, aty ku është e mundur (ku nuk kërkohet pozicionim fiks ose absolut) - është më logjik dhe më i përshtatshëm. Ndërsa kjo duket e qartë, herë pas here kam parë shembuj frikësues me pika negative, kështu që mendova të sqaroja.

Rreshtimi vertikal

Ka shumë më tepër probleme me shtrirjen vertikale - 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 veçorinë line-height

Në rastin kur ka vetëm një linjë në bllok, mund të arrini shtrirjen e saj vertikale duke aplikuar " vija e gjatesise" dhe vendosjen e saj në lartësinë e dëshiruar. Për të qenë të sigurt, duhet të vendosni edhe "height", vlera e së cilës do të jetë e barabartë me vlerën e "line-height", 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ë rreshtoni një bllok me linja të shumta. 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ë. Blloku 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;) 1.5; rreshtimi vertikal: i mesëm; sfondi: #FFFAF2; ngjyra: #FF9B00; në qendër të tekstit; ;)

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, atëherë shfletuesi do të shtojë disa piksel shtesë nga vetja. 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ë" vertikale-rreshtoj" ndikon edhe në qelizat e tabelës. Me vlerën e vendosur në "mesi", përmbajtja brenda qelizës përqendrohet. Sigurisht, paraqitja tabelare konsiderohet arkaike në ditët e sotme, por në raste të jashtëzakonshme mund të simulohet 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 gatshëm. Është me interes fotografia e përqendruar vertikalisht në këtë mënyrë.

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

Duhet mbajtur mend se nëse elementi ka një grup "noton" përveç "asnjë", atëherë ai do të jetë akoma bllok (shfaq: 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ë aplikoni " vertikal-linjë: në mes". Në këtë rast, të gjithë elementët me " shfaqja: inline" që janë në të njëjtën linjë do të rreshtohen me një vijë 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. Është i përshtatshëm për të përdorur pseudo-elemente: para ose: pas për këtë.

.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; gjerësia: 200 px; lartësia: 200 px;) .riki (ekrani: blloku i linjës; lartësia: 100%; rreshtimi vertikal: në mes; )

Ekrani: përkul dhe shtrirje

Nëse nuk ju intereson shumë përdoruesit e Explorer 8, ose ju intereson aq shumë saqë jeni të gatshëm të vendosni një pjesë javascript shtesë për ta, atëherë "ekrani: flex" mund të përdoret. Kutitë Flex trajtojnë shumë mirë çështjet e shtrirjes dhe mjafton të shkruani "margin: auto" për të përqendruar përmbajtjen brenda.

Deri më tani, kjo metodë praktikisht nuk më ka takuar kurrë, por nuk ka kufizime të veçanta për të.

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

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

Teksti CSS përfaqëson një grup karakteristikash për formatimin e përmbajtjes së tekstit të ueb faqeve. Përdorimi i stileve CSS për të formatuar tekstin ju lejon t'i jepni elementëve HTML pamjen që dëshironi, në mënyrë që etiketat HTML të mund të përdoren vetëm për qëllimin e tyre të synuar, për të përcaktuar strukturën e një dokumenti.

Rreth veçorive të tekstit të shtuara në specifikim CSS3— text-overflow, word-break, word-wrap, mund të lexohet.

Formatimi i tekstit në CSS

1. Shtrirja horizontale e tekstit

Vetia rreshton linjat e tekstit brenda bllokut në gjerësi në lidhje me kufijtë e tij. Zbatohet vetëm për elementët e nivelit të bllokut, siç janë paragrafët. I trasheguar.

Vlerat:
majtas	Rreshtimi majtas i elementit. Vlera e parazgjedhur për gjuhët që lexojnë nga e majta në të djathtë.
drejtë	Rreshton në skajin e djathtë të elementit.
qendër	Shtrirja në qendër të elementeve kontrollon shtrirjen e përmbajtjes, jo vetë elementët. Vendos në qendër çdo rresht të tekstit të elementit.
justifikoj	Rreshtimi në gjerësinë e elementit. Në tekstin e justifikuar, të dy skajet e rreshtit përshtaten me skajet e majta dhe të djathta të elementit prind. Hapësirat ndërmjet fjalëve dhe shkronjave shpërndahen në atë mënyrë që gjatësia e të gjitha rreshtave të jetë e barabartë. Shfletues të ndryshëm mund të rrisin si dhëmbëzimin midis fjalëve ashtu edhe hapësirën midis shkronjave.
fillestare
trashëgojnë

Sintaksë

P (rreshtimi i tekstit: majtas;) p (rreshtimi i tekstit: djathtas;) p (rreshtimi i tekstit: në qendër;) p (rreshtimi i tekstit: justifikoni;)
Oriz. 1. Vetia text-align

2. Teksti indent-indent

Vendos dhëmbëzimin (indent) në rreshtin e parë të një elementi, duke dhënë iluzionin e tekstit të strukturuar. Zbatohet për çdo element blloku, vlera e paracaktuar është 0. Nëse ka një imazh në rreshtin e parë të elementit të bllokut, ai do të lëvizë së bashku me pjesën tjetër të tekstit. I trasheguar.

Sintaksë

P (indentazhi i tekstit: 5 px;) p(indentja e tekstit: 2%;)
Oriz. 2. Vetia tekst-indent

3. vijë-lartësia

Oriz. 3. Enë linjë

Vetia cakton distancën midis vijave bazë të rreshtave të tekstit, duke specifikuar sasinë me të cilën rritet ose zvogëlohet lartësia e bllokut të secilit element. Kontrollon ndarjen e rreshtave, hapësirën shtesë midis rreshtave sipër dhe poshtë tekstit. Për të përcaktuar ndarjen e rreshtave, duhet të gjeni ndryshimin midis lartësisë së rreshtit dhe madhësisë së shkronjave, ndani ndryshimin me dy dhe shtoni secilën gjysmë në zonën e përmbajtjes sipër dhe poshtë. Merr vetëm vlera pozitive. Hapësira standarde e linjës është e barabartë me 120%.

Nëse lartësia dhe lartësia e rreshtit janë të barabarta, rreshtoni tekstin në lartësi. I trasheguar.

Sintaksë

h1 (lartësia e vijës: 20 px;) h1 (lartësia e vijës: 200%;) h1 (lartësia e vijës: 1,2;) h1 (lartësia e vijës: normale;)
Oriz. 4. Një shembull i shfaqjes së vlerave të ndryshme të ndarjes së rreshtave

4. vertikal-rreshtoj

Zbatohet vetëm për elementët e linjës, imazhet dhe fushat e formës. Nuk përafron përmbajtjen e një elementi blloku. E pa trashëguar.

vertikale-rreshtoj
Vlerat:
bazë	Përafron vijën bazë të elementit me vijën bazë të prindit të tij, duke përafruar vijën e mesme të elementit me vijën e mesme të elementit.
nën	E bën elementin nënshkrim (të ngjashëm me etiketën ). Sasia e uljes së një elementi mund të ndryshojë në varësi të shfletuesit të përdoruesit.
super	Bën mbishkrimin e elementit (të ngjashëm me etiketën ). Vlerat sup dhe super nuk ndryshojnë madhësinë e shkronjave, si parazgjedhje teksti i elementit mbishkrim dhe nënshkrim ka të njëjtën madhësi si teksti i elementit prind.
krye	Skaji i sipërm i elementit është në linjë me skajin e sipërm të elementit më të lartë në linjë.
teksti në krye	Skaji i sipërm i elementit është në linjë me skajin e sipërm të fontit të elementit prind.
e mesme	Vija e mesme e një elementi (zakonisht një imazh) është në linjë me vijën përmes mesit të elementit prind.
fund	Skaji i poshtëm i elementit është në linjë me skajin e poshtëm të elementit më të ulët në rresht.
fundi i tekstit	Skaji i poshtëm i elementit është në linjë me skajin e poshtëm të fontit të elementit prind.
gjatësia	Vendos një vlerë në njësi gjatësie, duke lëvizur elementin me distancën e specifikuar.
%	Nuk lejon vendosjen e mesit, e llogaritur si pjesë e lartësisë së linjës së elementit, jo prindit të tij, d.m.th. nëse vendosni rreshtimin vertikal në 50% në një element me lartësi vijëje 20 px, atëherë vija bazë e elementit do të rritet me 10 px.
fillestare	Vendos vlerën e një prone në vlerën e saj të paracaktuar.
trashëgojnë	Trashëgon vlerën e vetive nga elementi mëmë.

Html ka një parametër universal dhe quhet ALIGN. Mund të përdoret me etiketa të ndryshme html:

p | h1 | div | tabela | tead | trupi | këmbë | tr | th | td

Vlerat e mundshme:

Qendra- shtrirje në qendër
Majtas- shtrirje majtas
E drejta- ne te djathte
justifikoj- në gjerësi, në skajet e majtë dhe të djathtë. Në këtë rast, mund të ketë boshllëqe të mëdha midis fjalëve.

Teksti i justifikuar

Paraqitja në shfletues:

Titulli është rreshtuar në qendër

Teksti është i justifikuar. Teksti është i justifikuar. Teksti është i justifikuar. Teksti është i justifikuar. Teksti është i justifikuar. Teksti është i justifikuar. Teksti është i justifikuar. Teksti është i justifikuar. Teksti është i justifikuar. Teksti është i justifikuar. Teksti është i justifikuar. Teksti është i justifikuar.

Përmbajtja e këtij blloku është rreshtuar djathtas

Vini re se rreshtimi majtas bëhet automatikisht. Prandaj, nuk ka nevojë të specifikoni një vlerë të tillë për parametrin align.

Deri më tani, ne kemi rreshtuar vetëm elementë në të majtë. Më saktësisht, ne nuk e bëmë fare këtë, dhe vetë shfletuesi rreshton elementët në të majtë si parazgjedhje. Sigurisht, do të ishte shumë e mërzitshme të rreshtosh gjithçka në të majtë. Prandaj, ka mënyra të ndryshme për t'u lidhur në qendër dhe në të djathtë.

Përafrimi i elementeve është diçka që thjesht duhet të dini kur . Gjëja e parë që duhet të bëni është të shkruani faqen më të thjeshtë.

Njëherë e një kohë kishte një etiketë

Nuk ju këshilloj ta përdorni tani, për shkak të disponueshmërisë së metodave më moderne, por nuk mund të mos e përmend. Përdorimi i tij është shumë, shumë i thjeshtë. Gjithçka që ju nevojitet për të rreshtuar në qendër, vendosni brenda kësaj etikete. Këtu, për shembull, këtu ne rreshtojmë titullin e nivelit të 1-të në qendër.

Mund të shtoni gjithashtu një imazh të përqendruar, le të kalojmë gjithashtu në rreshtin tjetër duke përdorur etiketën
:

Titulli i nivelit 1 i përqendruar

Ishte një etiketë

, e cila tashmë është e vjetëruar, përveç kësaj, në kundërshtim me pritjet tuaja për etiketat Dhe thjesht nuk ekziston. Le të themi të rreshtuar majtas si parazgjedhje, rreshtuar në qendër duke përdorur etiketën , por ajo e duhura?

Për të zgjidhur këtë problem, zhvilluesit dolën me një mënyrë universale për të lidhur elementët. HTML. Metoda është përdorimi i të ashtuquajturave kontejnerë, të cilët krijohen duke përdorur etiketën

. Kjo do të thotë, gjithçka që duhet të vendoset në një enë specifike vendoset brenda etiketës

. Dhe kjo etiketë tashmë ka atributin " rreshtoj", vlera e së cilës përcakton pozicionin e këtij kontejneri. Janë tre vlera: " majtas", "qendër", "drejtë". Parazgjedhja është " majtas Megjithatë, nuk mendoj se kjo ju befason.

Le të shkruajmë tani të njëjtën gjë Kodi HTML, por me përdorimin e kontejnerëve, përveç kësaj, le të rreshtohemi jo në qendër, por në të djathtë.

Siç mund ta shihni, gjithçka funksionon. Unë ju këshilloj të ndryshoni gjithashtu vlerën e atributit " rreshtoj" për të parë llojet e tjera të shtrirjes së përmbajtjes së kontejnerëve.

Një mënyrë tjetër për të lidhur elementët HTML- këto janë tabela, por kjo temë meriton një diskutim më vete, kështu që ne do të flasim për të në një nga artikujt e mëposhtëm.

Për momentin, faqja juaj duhet të duket si kjo:

Titulli i nivelit 1 i përqendruar

Titulli i nivelit 1, i rreshtuar djathtas

Sinqerisht, Mikhail Rusakov.

P.S. Nëse dëshironi të dini më shumë rreth HTML, më pas shikoni kursin tim falas me një shembull të krijimit të një faqe interneti në HTML:

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

Tab. 1. Mënyrat për të rreshtuar tekstin

Rreshtimi majtas	Shtrirja e djathtë	Shtrirja në qendër	Arsyetoni
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Opsioni më i zakonshëm është rreshtimi majtas, kur teksti i majtë 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

me të njëjtin atribut align, siç tregohet në tabelën 1. 2.

Tab. 2. Përafrimi i tekstit me parametrin align

Kodi HTML	Përshkrim
	Shton një paragraf të ri teksti, i lënë i justifikuar si parazgjedhje. Ndarjet e vogla vertikale shtohen automatikisht para dhe pas paragrafit.
Teksti	Shtrirja në qendër.
Teksti	Rreshtimi majtas.
Teksti
Teksti	Shtrirja e gjerësisë.
Teksti	Çaktivizon mbështjelljen automatike të linjës, edhe nëse teksti është më i gjerë se dritarja e shfletuesit.
Teksti	Lejon shfletuesin të thyejë vijën në vendndodhjen e specifikuar, edhe nëse përdoret etiketa .
Teksti	Shtrirja në qendër.
Teksti	Rreshtimi majtas.
Teksti	Shtrirja e djathtë.
Teksti	Shtrirja e gjerësisë.

Shtrirja majtas e elementeve është vendosur si parazgjedhje, kështu që nuk ka nevojë ta specifikoni edhe një herë. Pra, align="majtas" mund të hiqet.

Dallimi midis paragrafit (etiketa

) dhe tag

në atë që një indent vertikal shfaqet në fillim dhe në fund të paragrafit, gjë që nuk është rasti kur përdoret etiketa

.

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ë automatikisht çon 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. një.

Oriz. 1. Rreshtoni tekstin djathtas dhe majtas

Në këtë shembull, titulli është rreshtuar në qendër të dritares së shfletuesit, paragrafi i zgjedhur është rreshtuar djathtas dhe teksti i trupit është rreshtuar majtas.

Artikujt kryesorë të lidhur

Formatimi i karaktereve dhe paragrafëve në MS Word Çfarë është formatimi i paragrafit

Sistemi i skedarëve kryen një funksion

Historia e krijimit të monitorëve CRT - CRT me një maskë të çarë (Slot Mask)

Kategoritë:

• Programet
• Siguria
• Windows 10
• Hekuri
• Windows 8
• Në kontakt me
• Gabimet