Përqendrimi i elementeve në css. Rreshtimi horizontal dhe vertikal i elementeve

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

Rreshtimi i elementeve është diçka që thjesht duhet të dini kur e bëni këtë. Gjëja e parë që duhet të bëni është të shkruani një faqe të thjeshtë.

Njëherë e një kohë u shfaq një etiketë, tani nuk ju këshilloj ta përdorni, për shkak të disponueshmërisë së metodave më moderne, por nuk mund të mos e përmend. Është shumë, shumë e thjeshtë për t'u përdorur. Gjithçka që ju nevojitet për t'u përqendruar, vendosni brenda kësaj etikete. Për shembull, këtu ne rreshtojmë nivelin e 1-rë duke shkuar në qendër.

Mund të shtoni një fotografi, gjithashtu të rreshtuar në qendër, le të kalojmë gjithashtu në rreshtin tjetër duke përdorur etiketën
:

Titulli i nivelit të parë, i përafruar në qendër

Ishte një etiketë që tashmë është e vjetëruar, përveç kësaj, në kundërshtim me pritjet tuaja, etiketat thjesht nuk ekzistojnë. Le të themi se majtas është rreshtuar si parazgjedhje, qendra është rreshtuar duke përdorur etiketën, por po djathtas?

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 një atribut "align", vlera e të cilit përcakton pozicionin e këtij kontejneri. Ka tre vlera: "majtas", "qendër", "djathtas". Si parazgjedhje, është "majtas", megjithatë, mendoj se kjo nuk ju habit.

Le të shkruajmë tani të njëjtin kod HTML, por duke përdorur kontejnerë, 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 që gjithashtu të ndryshoni vlerat e atributit "align" 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 është me tabela, por kjo temë meriton një diskutim të veçantë, kështu që ne do të flasim për të në një artikull të ardhshëm.

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

Titulli i nivelit të parë, i përafruar në qendër




Titulli i nivelit 1, rreshtuar djathtas

Sinqerisht, Mikhail Rusakov.

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

Shumë shpesh në paraqitje është e nevojshme të përqendroni disa elementë horizontalisht dhe/ose vertikalisht. Prandaj, vendosa të bëj një artikull me mënyra të ndryshme përqendrimi, në mënyrë që gjithçka të jetë në dorë në një vend.

Marzhi i shtrirjes horizontale: automatik

Shtrirja horizontale duke përdorur margjinën përdoret kur dihet gjerësia e elementit në qendër. Punon për elementët e bllokut:

Elem (diferencë-majtas: automatik; margjina-djathtas: automatik; gjerësia: 50%; )

Specifikimi automatik për kufijtë 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 përqendrimin e tekstit brenda një blloku. text-align: qendër:

Përafrimi me text-align .wrapper ( text-align: në qendër; )

Unë jam në qendër

pozicioni dhe marzhi negativ i majtë

I përshtatshëm për qendrimin e blloqeve me gjerësi të njohur. Ne i japim pozicionin e bllokut prind: në lidhje me pozicionin në lidhje me të, pozicionin e elementit të përqendruar: absolute, majtas: 50% dhe një marzh negativ majtas vlera e së cilës është e barabartë me gjysmën e gjerësisë së elementit:

Shtrirja me pozicionin .mbështjellës ( pozicioni: relative; ) .mbështjellësi p ( majtas: 50%; diferenca: 0 0 0 -100 px; pozicioni: absolut; gjerësia: 200 px; )

Unë jam në qendër

shfaqja: inline-block + text-align: qendër

Metoda është e përshtatshme për rreshtimin e blloqeve me gjerësi të panjohur, por kërkon një prind mbështjellës. Për shembull, mund të përqendroni një menu horizontale në këtë mënyrë:

Përafrimi me ekranin: inline-block + text-align: qendër; .navigacion ( rreshtimi i tekstit: në qendër; ) .navigimi li ( shfaqja: blloku i brendshëm; )

• në shtëpi
• Rreth Autorit

Linja-lartësia e shtrirjes vertikale

Për të rreshtuar një rresht teksti, mund të përdorni të njëjtat vlera të lartësisë dhe ndarjes së rreshtave për bllokun prind. I përshtatshëm për butona, artikuj të menysë, etj.

line-height .wrapper (lartësia: 100px; lartësia e vijës: 100px; )

Unë jam i vendosur vertikalisht

pozicioni dhe marzhi negativ lart

Një element mund të rreshtohet vertikalisht duke i dhënë atij një lartësi fikse dhe duke aplikuar pozicionin: absolut dhe një diferencë negative lart e barabartë me gjysmën e lartësisë së elementit që rreshtohet. Bllokut prind duhet t'i jepet pozicioni: relative:

Mbështjellësi ( pozicioni: relative; ) elem (lartësia: 200 px; diferenca: -100 px 0 0; pozicioni: absolute; sipër: 50%; )

Në këtë mënyrë, duke përdorur pozicionimin dhe marzhet negative, mund të përqendroni një element në faqe.

shfaqja: qeliza e tabelës

Për shtrirjen vertikale, vetia e ekranit: qeliza e tabelës aplikohet në element, gjë që e detyron atë të imitojë një qelizë tabele. Ne gjithashtu vendosëm lartësinë e tij dhe shtrirjen vertikale: në mes . Le t'i mbështjellim të gjitha këto në një enë me dislpay: tabelë; pronë. :

Ekrani i shtrirjes vertikale: qeliza e tabelës .mbështjellës ( shfaqja: tabela; gjerësia: 100%; ) .qeliza ( shfaqja: qeliza e tabelës; lartësia: 100 px; rreshtimi vertikal: në mes; )

Unë jam i vendosur vertikalisht

Rreshtimi dinamik i një elementi në një faqe

Ne shikuam mënyrat për të lidhur elementët në një faqe duke përdorur CSS. Tani le të hedhim një vështrim në zbatimin e jQuery.

Le të lidhim jQuery me faqen:

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, ne llogarisim dhe caktojmë në mënyrë dinamike koordinatat e qendrës së faqes në pronat 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ësi()) / 2 + "px" // mos harroni të shtoni pozicionin: absolute në elementin 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 horizontale e faqes. Linja e dytë bën të njëjtën gjë, vetëm me lartësinë për shtrirje vertikale.

Funksioni është gati, gjithçka që mbetet është ta bashkëngjitni atë në gatishmërinë DOM dhe ngjarjet e ndryshimit të madhësisë së dritares:

$(function() ( // thirrni funksionin e qendrës kur DOM është gati alignCenter($(elem)); // thirrni funksionin kur ndryshoni madhësinë e dritares $(window).resize(function() ( alignCenter($(elem )); )) // funksioni i përqendrimit të elementit alignCenter(elem) ( elem.css(( // llogaritja e koordinatave majtas dhe sipërme majtas: ($(dritare).width() - elem.width()) / 2 + " px", sipër: ($(dritare).lartësi() - elem.height()) / 2 + "px" )) )))

Aplikimi i Flexbox

Karakteristikat e reja të CSS3, si Flexbox, po bëhen gradualisht të zakonshme. Teknologjia ndihmon në krijimin e shënjimit pa përdorimin e notave, pozicionimit, etj. Mund të përdoret gjithashtu për të përqendruar elementët. Për shembull, aplikoni Flexbox në elementin prind.wrapper dhe përqendroni përmbajtjen brenda:

Mbështjellësi ( ekrani: -webkit-box; ekrani: -moz-box; ekrani: -ms-flexbox; ekrani: -webkit-flex; ekrani: flex; lartësia: 500 px; gjerësia: 500 px; ) .mbështjellës .përmbajtja ( margjina: auto; /* marzhi: 0 automatik; vetëm horizontal */ /* marzhi: automatik 0; vetëm vertikal */ ) Lorem ipsum dolor sit amet

Ky rregull e përqendron elementin horizontalisht dhe vertikalisht në të njëjtën kohë - marzhi tani funksionon jo vetëm për shtrirjen horizontale, por edhe për atë vertikale. Dhe pa një gjerësi/lartësi të njohur.

Burimet e ndërlidhura Ndihmoni projektin

Dizajnerët e uebit përdorin DIV në punën e tyre çdo ditë. Pa asnjë nënvlerësim, kjo është etiketa më e njohur. Hapni burimin e çdo faqe interneti dhe do të shihni se shumica, nëse jo dy të tretat e objekteve janë të mbyllura në . Edhe me ardhjen e HTML5 dhe shfaqjen e konkurrentëve seriozë në formën e artikullit ose titullit, ai vazhdon të futet në markup kudo. Prandaj, ju sugjeroj të kuptoni çështjen e formatimit dhe përqendrimit të blloqeve div.

Çfarë është DIV

Emri i elementit vjen nga fjala angleze division, që do të thotë ndarje. Kur shkruani shënjimin, përdoret për të ndarë elementët në blloqe. DIV-të mbyllin grupe të përmbajtjes në një faqe interneti. Për shembull, imazhe, paragrafë me tekst. Etiketa nuk ndikon në shfaqjen e përmbajtjes në asnjë mënyrë dhe nuk mbart ndonjë ngarkesë semantike.

DIV mbështet të gjitha atributet globale. Por për dizajnin e uebit ju nevojiten vetëm dy - class dhe id. Ju do të mbani mend për të gjithë të tjerët vetëm në raste ekzotike, dhe ky nuk është një fakt. Atributi align, i cili përdoret për të përqendruar ose majtas rreshtimin e div-ve, është zhvlerësuar.

Kur të përdorni DIV-të

Imagjinoni që faqja është një frigorifer, dhe DIV-të janë enë plastike në të cilat ju duhet të renditni përmbajtjen. Ju nuk do të vendosni fruta në të njëjtën enë me liverwurst. Ju do të vendosni secilin lloj produkti veç e veç. Përmbajtja e uebit gjenerohet në mënyrë të ngjashme.

Hapni çdo faqe interneti dhe ndajeni atë në blloqe kuptimplote. Kreu në krye, fundi në fund, teksti kryesor në qendër. Në anën zakonisht ka një kolonë më të vogël me përmbajtje reklamimi ose një re etiketësh.

Dokumenti

Tani shikoni çdo seksion në më shumë detaje. Filloni me kokë. Kreu i faqes ka një logo të veçantë, navigim, titull të nivelit të parë dhe ndonjëherë një slogan. Cakto çdo bllok semantik kontejnerin e vet. Kjo jo vetëm që do të ndajë elementët në rrjedhë, por gjithashtu do t'i bëjë ato më të lehta për t'u formatuar. Do ta keni shumë më të lehtë të përqendroni një objekt në një etiketë DIV duke i dhënë një klasë ose ID.

Përqendrimi i DIV-ve duke përdorur margjina

Gjatë paraqitjes së elementeve të uebit, shfletuesi merr parasysh tre veti: mbushje, marging dhe kufi. Mbushja është hapësira midis përmbajtjes dhe kufirit të saj. Margin - fushat që ndajnë një objekt nga tjetri. Kufiri është linjat përgjatë blloqeve. Ato mund t'u caktohen të gjithëve menjëherë ose vetëm në njërën anë:

div(kufiri: 1px solid #333; kufiri majtas: asnjë; )

Këto veti shtojnë hapësirë ​​midis objekteve dhe ju ndihmojnë t'i rreshtoni dhe vendosni ato siç duhet. Për shembull, nëse një bllok me një imazh duhet të zhvendoset nga skaji i majtë në qendër me 20%, ju i caktoni një vlerë diferencës majtas prej 20% elementit:

Blloko-me-img (diferencë-majtas: 20%; )

Elementet gjithashtu mund të formatohen duke përdorur vlerat e tyre të gjerësisë dhe mbushjen negative. Për shembull, ekziston një bllok me përmasa 200px me 200px. Së pari, le t'i caktojmë një pozicion absolut dhe ta zhvendosim në qendër me 50%.

Div (pozicioni: absolut; majtas: 50%; )

Tani, për të siguruar që DIV e përqendruar të jetë pozicionuar në mënyrë të përsosur, ne i japim një diferencë negative në të majtë të barabartë me 50% të gjerësisë së saj, që është -100 piksele:

Margjina-majtas: -100px;

Në CSS kjo quhet "heqja e ajrit". Por ka një pengesë të konsiderueshme në nevojën për të bërë llogaritje të vazhdueshme, gjë që është mjaft e vështirë për t'u bërë për elementë me disa nivele foleje. Nëse përcaktohen vlerat e mbushjes dhe gjerësisë së kufirit, shfletuesi do të llogarisë si parazgjedhje dimensionet e kontejnerit si shumën e trashësisë së kufijve, mbushjen në të djathtë dhe të majtë dhe vetë përmbajtjen brenda, e cila mund të vijnë gjithashtu si një surprizë.

Pra, kur ju duhet të përqendroni një DIV, përdorni veçorinë e madhësisë së kutisë me vlerën kufi-box. Kjo do të parandalojë që shfletuesi të shtojë vlerat e mbushjes dhe kufirit në gjerësinë e përgjithshme të elementit DIV. Për të ngritur ose ulur një element, përdorni gjithashtu vlera negative. Por në këtë rast, ato mund të caktohen ose në fushën e sipërme ose të poshtme të kontejnerit.

Si të përqendroni një bllok DIV duke përdorur margjina automatike

Kjo është një mënyrë e thjeshtë për të përqendruar blloqe të mëdha. Ju thjesht caktoni gjerësinë e kontejnerit dhe vetinë e marzhit në auto. Shfletuesi do të vendosë një bllok në mes me kufij të barabartë majtas dhe djathtas, duke bërë të gjithë punën vetë. Si rezultat, nuk rrezikoni të hutoheni në llogaritjet matematikore dhe kurseni ndjeshëm kohën tuaj.

Përdorni metodën e fushës automatike kur zhvilloni aplikacione të përgjegjshme. Gjëja kryesore është t'i caktoni një vlerë gjerësisë enës në em ose përqindje. Kodi në shembullin e mësipërm do të përqendrojë DIV-në dhe në çdo pajisje, duke përfshirë telefonat celularë, do të zërë 90% të ekranit.

Rreshtimi nëpërmjet vetisë së ekranit: blloku inline

Si parazgjedhje, elementët DIV konsiderohen elementë bllok, dhe vlera e tyre e shfaqjes është bllok. Për këtë metodë do t'ju duhet të anashkaloni këtë pronë. I përshtatshëm vetëm për DIV me një kontejner prind:

Çdo tekst

Një elementi me klasën outer-div i caktohet një veçori text-align me një vlerë të qendrës, e cila e përqendron tekstin brenda. Por tani për tani shfletuesi e sheh DIV-në e mbivendosur si një objekt bllok. Që veçoria text-align të funksionojë, inner-div duhet të trajtohet si shkronja të vogla. Pra, në tabelën CSS për përzgjedhësin e brendshëm-div shkruani kodin e mëposhtëm:

Inner-div (ekrani: inline-block;)

Ju ndryshoni veçorinë e ekranit nga bllok në blloqe inline.

metoda e transformimit/përkthimit

Fletët e stilit me kaskadë bëjnë të mundur lëvizjen, animin, rrotullimin dhe ndryshe transformimin e elementeve të uebit sipas dëshirës. Vetia e transformimit përdoret për këtë. Vlerat tregojnë llojin dhe shkallën e dëshiruar të transformimit. Në këtë shembull do të punojmë me përkthimin:

transformoj: përkthe (50%, 50%);

Funksioni i përkthimit lëviz një element nga pozicioni aktual majtas/djathtas dhe lart/poshtë. Dy vlera kalohen në kllapa:

• shkalla e lëvizjes horizontale;
• shkalla e lëvizjes vertikale.

Nëse një element duhet të zhvendoset vetëm përgjatë njërit prej boshteve të koordinatave, atëherë pas fjalës përkthejeni ju tregoni emrin e boshtit dhe në kllapa shumën e zhvendosjes së kërkuar:

Transformimi: translateY(-20%);

Në disa manuale mund të gjeni transformimin me prefikset e shitësit:

Webkit-transform: përkthe (50%, 50%); -ms-transform: përkthe (50%, 50%); transformoj: përkthe (50%, 50%);

Në vitin 2018, kjo nuk është më e nevojshme; prona mbështetet nga të gjithë shfletuesit, përfshirë Edge dhe IE.

Për të vendosur në qendër DIV-në që duam, funksioni i përkthimit CSS është shkruar me një vlerë prej 50% për boshtin vertikal dhe horizontal. Kjo do të bëjë që shfletuesi të largojë elementin nga pozicioni aktual me gjysmën e gjerësisë dhe lartësisë së tij. Karakteristikat e gjerësisë dhe lartësisë duhet të specifikohen:

Dokumenti .nav-bar( ekrani: bllok; gjerësia: 90%; lartësia: 100vh; diferenca: 0 automatik; sfondi: gradient linear (në të majtë, e kuqe, #f06d06); ) .navigacion (gjerësia: 50%; lartësia: 50%; ngjyra: #FFF; kufiri: 1px i ndërprerë #F5F2F2; transformimi: përkthe (50%, 50%); ) Këtu vjen një tekst

Mbani në mend se elementi tek i cili aplikohet vetia e transformimit lëviz në mënyrë të pavarur nga objektet që e rrethojnë. Nga njëra anë, kjo është e përshtatshme, por ndonjëherë duke lëvizur, DIV mund të mbivendos një enë tjetër. Prandaj, kjo metodë e përqendrimit të komponentëve të uebit konsiderohet jo standarde dhe përdoret vetëm në rastet e nevojës ekstreme. Transformimet sipas të gjitha kanoneve CSS përdoren për animacion.

Puna me paraqitjen e Flexbox

Flexbox konsiderohet një mënyrë e sofistikuar për të dizajnuar paraqitjet e uebit. Por nëse e zotëroni, do të kuptoni se është shumë më e thjeshtë dhe më e këndshme se metodat standarde të formatimit. Specifikimi Flexbox është një mënyrë fleksibël dhe tepër e fuqishme për të trajtuar elementët. Emri i modulit është përkthyer nga anglishtja si "enë fleksibël". Vlerat e gjerësisë, lartësisë dhe renditjes së elementeve rregullohen automatikisht, pa llogaritur dhëmbëzimet dhe kufijtë.

Në shembujt e mëparshëm, ne kemi punuar tashmë me veçorinë e ekranit, por e kemi vendosur atë në vlerat e bllokimit dhe të blloqeve inline. Për të krijuar paraqitje flex, ne do të përdorim ekranin: flex. Së pari na duhet një enë fleksibël:

Për ta kthyer atë në një enë fleksibël në tabelat kaskadë, ne shkruajmë:

Flex-container (ekrani: flex; )

Të gjitha objektet e mbivendosura, por vetëm pasardhësit e drejtpërdrejtë, do të jenë elementë fleksibël:

E dyta e parë E treta e katërta

Nëse vendosni një listë brenda një kontejneri flex, atëherë artikujt e listës li nuk konsiderohen elemente flex. Paraqitja e Flexbox do të funksionojë vetëm në ul:

Rregullat për vendosjen e elementeve flex

Për të menaxhuar artikujt fleksibël, ju nevojiten artikuj justify-content dhe align-articles. Në varësi të vlerave që specifikoni, këto dy veti vendosin automatikisht objektet sipas nevojës. Nëse duhet të vendosim në qendër të gjitha DIV-të e mbivendosura, ne shkruajmë justify-content: qendër, align-item: qendër dhe asgjë tjetër. Shfletuesi do të bëjë vetë pjesën tjetër të punës:

Document .flex-container( display: flex; justify-content: center; align-items: center; ) E para e dyta e treta e katërta

Për të përqendruar tekstin në DIV që janë artikuj fleksibël, mund të përdorni teknikën standarde të rreshtimit të tekstit. Ose mund ta bëni çdo DIV të mbivendosur gjithashtu një enë fleksibël dhe të menaxhoni përmbajtjen duke përdorur justify-content. Kjo metodë është shumë më racionale nëse përmban një larmi përmbajtjesh, duke përfshirë grafikë, objekte të tjera të mbivendosur, duke përfshirë listat me shumë nivele.

Përqendrimi i elementeve vertikalisht duke përdorur CSS është një detyrë që paraqet disa vështirësi 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 qendrimit vertikal

Përqendrimi horizontal është shumë i thjeshtë dhe i lehtë. Kur elementi i përqendruar është në linjë, ne përdorim veçorinë e shtrirjes në lidhje me elementin prind. Kur elementi është në nivel blloku, ne vendosim gjerësinë e tij dhe vendosjen automatike të margjinave majtas dhe djathtas.

Shumica e njerëzve, kur përdorin veçorinë text-align:, i referohen veçorisë vertikale-align për qendërzim vertikal. Gjithçka duket mjaft logjike. Nëse keni përdorur shabllone tabelash, me siguri keni përdorur gjerësisht atributin valign, i cili përforcon besimin se rreshtimi vertikal është mënyra e duhur për të zgjidhur problemin.

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-linjë është në lidhje me elementin inline mëmë.

• Në një rresht teksti, shtrirja është në lidhje me lartësinë e rreshtit.
• Qeliza e tabelës përdor shtrirjen në lidhje me një vlerë të llogaritur nga një algoritëm i veçantë (zakonisht lartësia e rreshtit).

Por për fat të keq, vetia vertikale e rreshtimit nuk funksionon në elementët e nivelit të bllokut (për shembull, paragrafët brenda një elementi div). Kjo situatë mund të bëjë që dikush të mendojë 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 një rresht teksti vertikalisht. Gjithçka që duhet të bëni është të vendosni që lartësia e rreshtit të jetë më e madhe se madhësia e shkronjave.

Si parazgjedhje, hapësira e bardhë 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:

Teksti i kërkuar

CSS:

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

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

Përqendrimi i një imazhi duke përdorur Line-Height

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

HTML:

CSS:

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

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

Metoda e tabelës CSS

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

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

HTML:

përmbajtja

CSS:

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

Ne vendosim daljen e tabelës në elementin div prind dhe nxjerrim elementin div të mbivendosur 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ë përqendrohet vertikalisht.

Ndryshe nga metoda e mësipërme, në këtë rast përmbajtja mund të jetë dinamike pasi elementi div do të ndryshojë madhësinë sipas përmbajtjes së tij.

Disavantazhi i kësaj metode është se nuk funksionon në versionet e vjetra të IE. Duhet të përdorni 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:

përmbajtja

CSS:

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

Së pari, vendosim llojin e pozicionimit të elementit. Më pas, ne vendosëm cilësinë e sipërme dhe të majtë të elementit div të mbivendosur në 50%, që korrespondon me qendrën e elementit prind. Por qendra është këndi i sipërm majtas i elementit të mbivendosur. 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 në këtë rast është e nevojshme. Pastaj vendosim elementin me margjina negative të sipërme dhe të majta të barabarta me gjysmën e lartësisë dhe gjerësisë, përkatësisht.

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

Pozicionimi dhe shtrirja absolute

Kodi i shembullit kryen qendërzim vertikal dhe horizontal.

HTML:

përmbajtja

CSS:

#prind (pozicioni: i afërm;) #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 kufijve për të gjeneruar automatikisht në të gjitha anët do të vendosë vlera të barabarta në të katër anët dhe do të përqendrojë elementin tonë të mbivendosur div në elementin e tij prind.

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

Hapësira të barabarta sipër dhe poshtë

Në këtë metodë, mbushja e barabartë vendoset në mënyrë eksplicite mbi dhe poshtë elementit prind.

HTML:

përmbajtja

CSS:

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

Shembulli i kodit CSS vendos mbushjen e sipërme dhe të poshtme për të dy elementët. Për një element të mbivendosur, vendosja e mbushjes do të shërbejë për ta përqendruar vertikalisht. Dhe mbushja e elementit prind do të përqendrojë elementin e mbivendosur brenda tij.

Njësitë relative të matjes përdoren për të ndryshuar përmasat dinamike të elementeve. Dhe për njësitë absolute të matjes do të duhet të bëni llogaritjet.

Për shembull, nëse elementi prind ka një lartësi prej 400 px dhe elementi i mbivendosur është 100 px, atëherë nevojiten 150 px mbushje në krye dhe në fund.

150 + 150 + 100 = 400

Përdorimi i % ju lejon t'i lini llogaritjet në shfletuesin.

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

Shënim: Kjo metodë funksionon duke vendosur mbushjen e jashtme të elementit. 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.

lundrues div

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ë vendosur përpara elementit tonë të mbivendosur në kodin HTML.

HTML:

përmbajtja

CSS:

#parent (lartësia: 250 px;) #floater ( notues: majtas; lartësia: 50%; gjerësia: 100%; margjina e poshtme: -50 px; ) #fëmijë (e qartë: të dyja; lartësia: 100 px; )

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

Meqenëse ky div është lundrues, ai hiqet nga rrjedha normale e dokumentit dhe ne duhet të zbërthejmë tekstin në 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 një elementi div të ndërthurur është drejtpërdrejt nën kufirin e poshtëm të një elementi 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ë të vetive negative në kufirin e poshtëm për një element div bosh lundrues.

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

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.

18.02.15 21.4K

Nëse preni në ndonjë faqe interneti të krijuar në bazë të html, atëherë do të shihni një strukturë të caktuar me shtresa. Për më tepër, pamja e saj do të jetë e ngjashme me një tortë me shtresë. Nëse mendoni kështu, atëherë ka shumë të ngjarë që nuk keni ngrënë për një kohë të gjatë. Pra, së pari plotësoni urinë tuaj, dhe më pas ne do t'ju tregojmë se si të përqendroni një shtresë div në faqen tuaj:

Avantazhet e paraqitjes duke përdorur një etiketë

Ekzistojnë dy lloje kryesore të strukturës së faqes në internet:

• Tabela;
• Blloko.

Paraqitja e tabelave ishte mbizotëruese edhe në agimin e internetit. Përparësitë e tij përfshijnë saktësinë e pozicionimit të specifikuar. Por, megjithatë, ajo ka mangësi të dukshme. Ato kryesore janë gjatësia e kodit dhe shpejtësia e ulët e ngarkimit.

Kur përdorni paraqitjen e tabelës, faqja e internetit nuk do të shfaqet derisa të ngarkohet plotësisht. Ndërsa kur përdorni blloqe div, elementët shfaqen menjëherë.

Përveç shpejtësisë së lartë të ngarkimit, ndërtimi i bllokut të një faqe interneti ju lejon të zvogëloni sasinë e kodit html disa herë. Duke përfshirë përdorimin e klasave CSS.

Megjithatë, paraqitja tabelare duhet të përdoret për të strukturuar shfaqjen e të dhënave në faqe. Një shembull klasik i përdorimit të tij është shfaqja e tabelave.

Ndërtimi i bllokut i bazuar në etiketa quhet gjithashtu shtresa-për-shtresë, dhe vetë blloqet quhen shtresa. Kjo ndodh sepse kur përdoren vlera të caktuara të pronave, ato mund të vendosen njëra mbi tjetrën, të ngjashme me shtresat në Photoshop.

Ndihma për pozicionim

Në paraqitjen e bllokut, është më mirë të poziciononi shtresat duke përdorur fletë stili kaskadë. Vetia kryesore CSS përgjegjëse për paraqitjen është float.
Sintaksa e vetive:
noton: majtas | drejtë | asnjë | trashëgojnë
Ku:

• majtas – rreshtoni elementin në skajin e majtë të ekranit. Rrjedha rreth elementeve të mbetur ndodh në të djathtë;
• djathtas - shtrirja në të djathtë, rrjedha rreth elementëve të tjerë - në të majtë;
• asnjë - mbështjellja nuk lejohet;
• inherit – trashëgon vlerën e elementit mëmë.

Le të shohim një shembull të lehtë të pozicionimit të div-ve duke përdorur këtë pronë:

#majtë ( gjerësia: 200 px; lartësia: 100 px; notimi: majtas; sfondi: rgb(255,51,102); ) #djathtas ( gjerësia: 200 px; lartësia: 100 px; notimi: djathtas; sfondi: rgb (0,255,153); ) Blloku i majtë Blloku i djathtë

Tani do të përpiqemi të përdorim të njëjtën veti për të vendosur ndarjen e tretë në qendër të faqes. Por për fat të keq float nuk ka një vlerë qendrore. Dhe kur i jepni një blloku të ri një vlerë shtrirjeje djathtas ose majtas, ai zhvendoset në drejtimin e specifikuar. Prandaj, gjithçka që mbetet është të vendosni float: lënë të tre blloqet:

Por as ky nuk është alternativa më e mirë. Kur dritarja zvogëlohet në madhësi, të gjitha shtresat rreshtohen në një rresht vertikalisht, dhe kur madhësia rritet, ato ngjiten në skajin e majtë të dritares. Pra, ne kemi nevojë për një mënyrë më të mirë për të përqendruar div. Shtresat e qendrës

Në shembullin tjetër, do të përdorim një shtresë kontejneri në të cilën do të vendosim elementët e mbetur. Kjo zgjidh problemin e lëvizjes së blloqeve në lidhje me njëri-tjetrin kur ndryshon madhësia e dritares. Përqendrimi i kontejnerit në mes bëhet duke vendosur vetitë e marzhit në zero për kufijtë nga buza e sipërme dhe automatike në anët (diferenca: 0 auto ):

#container ( gjerësia: 600 px; margjina: 0 automatik; ) #majtas ( gjerësia: 200 px; lartësia: 100 px; noton: majtas; sfondi: rgb(255,51,102); ) #djathtas ( gjerësia: 200 px; lartësia: 100 px; noton : majtas; sfondi: rgb(0,255,153); ) #center (gjerësia: 200px; lartësia: 100px; float: majtas; sfondi: rgb(255,0,0); ) Blloku i majtë Blloku qendror Blloku i djathtë

I njëjti shembull tregon se si mund të përqendroni një div horizontalisht. Dhe nëse modifikoni pak kodin e mësipërm, mund të arrini shtrirjen vertikale të blloqeve. Për ta bërë këtë, ju vetëm duhet të ndryshoni gjatësinë e shtresës së enës (zvogëloni atë). Kjo do të thotë, pas redaktimit, klasa e saj css duhet të duket kështu:

Pas ndryshimit, të gjitha blloqet do të rreshtohen rreptësisht në një rresht në mes. Dhe pozicioni i tyre nuk do të ndryshojë pavarësisht nga madhësia e dritares së shfletuesit. Ja se si duket qendrimi vertikal i një div:

Në shembullin e mëposhtëm, ne përdorëm një numër të vetive të reja css për të përqendruar shtresat brenda një kontejneri:

#container ( gjerësia: 450 px; lartësia: 150 px; margjina: 0 automatike; ngjyra e sfondit: # 66CCFF; ) # majtas ( gjerësia: 100 px; lartësia: 100 px; sfondi: rgb (255,51,102); ekrani: blloku i brendshëm; rreshtimi vertikal: në mes; margjina-majtas: 35 px; ) #djathtas (gjerësia: 100 px; lartësia: 100 px; sfondi: rgb(0,255,153); ekrani: blloku i brendshëm; rreshtimi vertikal: në mes; margjina majtas: 35 px; ) #center (gjerësia: 100 pikselë; lartësia: 100 px; sfondi: rgb (255,0,0); ekrani: blloku i brendshëm; rreshtimi vertikal: mes; margjina majtas: 35 px; )

Një përshkrim i shkurtër i vetive css dhe vlerave të tyre që kemi përdorur në këtë shembull për të përqendruar një div brenda një div:

• ekran: inline-block – rreshton një element blloku në një vijë dhe siguron që ai të mbështillet rreth një elementi tjetër;
• vertikal-align: mesme – rreshton elementin në mes në raport me prindin;
• margin-left – vendos margjinën e majtë.

Si të krijoni një lidhje nga një shtresë

Sado e çuditshme të tingëllojë, kjo është e mundur. Ndonjëherë mund të nevojitet një bllok div si lidhje kur shtroni lloje të ndryshme menysh. Le të shohim një shembull praktik të zbatimit të një shtrese lidhjeje:

#shtresa1( gjerësia: 500 px; lartësia: 100 px; sfondi: rgb (51,255,204); kufiri: brazdë; ) a ( shfaqja: bllok; rreshtimi i tekstit: në qendër; lartësia: 100%; ngjyra: rgb (255,0,51) ;) Lidhje me faqen tonë të internetit

Në këtë shembull, duke përdorur ekranin e linjës: bllok, ne vendosim lidhjen me vlerën e një elementi blloku. Dhe në mënyrë që e gjithë lartësia e bllokut div të bëhet një lidhje, vendosni lartësinë : 100%. Fshehja dhe shfaqja e elementeve të bllokut

Elementet e bllokut ofrojnë më shumë mundësi për të zgjeruar funksionalitetin e ndërfaqes sesa paraqitja e vjetëruar në tabelë. Shpesh ndodh që dizajni i faqes në internet të jetë unik dhe i dallueshëm. Por për një ekskluzivitet të tillë duhet të paguani me mungesë hapësire të lirë.

Kjo është veçanërisht e vërtetë për faqen kryesore, kostoja e reklamimit në të cilën është më e larta. Prandaj, lind problemi se ku të "shtyhet" një baner tjetër reklamues. Dhe këtu nuk mund të largoheni me përafrimin e div në qendër të faqes!

Një zgjidhje më racionale është krijimi i një blloku të fshehur. Këtu është një shembull i thjeshtë i një zbatimi të tillë:

#layer1( display:block; gjerësia: 500px; lartësia: 100px; sfond: rgb(51,255,204); border:groove; ) funksion show() ( if(layer1=="asnjë") ( layer1="block"; ) other ( layer1="asnjë"; ) document.getElementById("layer1").style.display=layer1; )

Ky është butoni magjik. Duke klikuar mbi të do të fshihet ose shfaqet blloku i fshehjes.