Sot, i dashur lexues, do të merremi me problemin e shtrirjes vertikale në një bllok. div.
Shanset janë që ju tashmë dini për pronën e mrekullueshme CSS vertikal-drejtuar. Dhe vetë Zoti na tha që ta përdorim këtë veti për shtrirje vertikale (nuk është më kot që ka një emër të tillë vetë-shpjegues).
Formulimi i problemit:Është e nevojshme të përqendrohet përmbajtja e bllokut të lartësisë së ndryshueshme në lidhje me vertikalen.
Tani le të zbresim në zgjidhjen e problemit.
Dhe kështu, ne kemi një bllok, lartësia e tij mund të ndryshojë:
Gjëja e parë që ju vjen në mendje është të bëni trukun e mëposhtëm:
Ka çdo arsye për të besuar se fraza Blloko përmbajtjen do të përafrohet në qendër të lartësisë së ndarjes së kontejnerit.
Por nuk ishte aty! Ne nuk do të arrijmë asnjë shtrirje të pritshme në qendër në këtë mënyrë. Dhe pse? Duket se gjithçka tregohet saktë. Rezulton se kjo është kapja: prona vertikal-drejtuar mund të përdoret vetëm për të lidhur përmbajtjen e qelizave të tabelës ose për të lidhur elementët e linjës në lidhje me njëri-tjetrin.
Sa i përket shtrirjes brenda qelizës së tabelës, mendoj se gjithçka është e qartë. Unë do të shpjegoj një rast tjetër me elementë inline.
Rreshtimi vertikal i elementeve inline
Supozoni se keni një varg teksti që është ndarë me etiketa inline në pjesë:
Ju mirëpret copë tekst!
Një etiketë inline kuptohet si një kontejner, pamja e të cilit nuk çon në mbështjelljen e përmbajtjes në një linjë të re.
Veprimi i etiketës së bllokut çon në mbështjelljen e përmbajtjes së kontejnerit në një linjë të re.
Është një etiketë blloku. Nëse bashkojmë copa teksti në blloqe, atëherë secila prej tyre do të shfaqet në një rresht të ri. Duke përdorur etiketën e cila, ndryshe nga, është me shkronja të vogla, nuk do të ketë mbështjellje të kontejnerëve në një linjë të re, të gjitha kontejnerët qëndrojnë në një linjë.Enë Është i përshtatshëm për t'u përdorur kur specifikoni një pjesë të tekstit me formatim të veçantë (duke theksuar me ngjyra, një font të ndryshëm, etj.)
Për kontejnerë zbatoni vetitë e mëposhtme CSS:
#perviy (rreshtim vertikal: nën;) #vtoroy (rreshtim vertikal: 3 px;) #tretiy (rreshtim vertikal: -3 px;)
Si rezultat, rreshti i tekstit do të duket si ky:
Kjo nuk është gjë tjetër veçse shtrirja vertikale e elementeve inline dhe vetia CSS vertikal-drejtuar përballon në mënyrë të përsosur këtë detyrë.
Ne largohemi pak, tani kthehemi në detyrën tonë kryesore.
Rreshtimi vertikal në një enë div
Pavarësisht, ne do të përdorim vetinë për t'u lidhur brenda kontejnerit div. vertikal-drejtuar... Siç thashë tashmë, kjo veti mund të përdoret në rastin e shtrirjes së elementeve inline (ne e diskutuam këtë rast në detaje më lart dhe nuk na përshtatet për shtrirjen në një kontejner div); mbetet vetëm të shfrytëzohet fakti që vertikal-drejtuar punon për qelizat e tabelës.
Si mund ta përdorim këtë? Ne nuk kemi tavolinë, po punojmë me një kontejner div.
Ha, rezulton të jetë shumë e thjeshtë.
Vetia CSS shfaqja na lejon të kthejmë bllokun tonë div në një qelizë tabele, kjo mund të bëhet lehtësisht dhe natyrshëm:
Le të kemi një ndarje klase përpilimi i tekstit:
Blloko përmbajtjenPër këtë bllok, specifikoni pronën e mëposhtme CSS:
Textalign (ekrani: qeliza e tabelës;)
Ky udhëzim CSS do ta kthejë mrekullisht div tonë në një qelizë tabele pa e ndryshuar vizualisht atë në asnjë mënyrë. Dhe për një qelizë tabele, ne mund të aplikojmë pronën vertikal-drejtuar shtrirja e dëshiruar vertikale do të funksionojë plotësisht.
Megjithatë, gjithçka nuk mund të përfundojë kaq thjesht. Ne kemi një shfletues të mrekullueshëm IE. Ai nuk di të punojë me pronën shfaqja: qeliza e tabelës(Unë sugjeroj që të njiheni me tabelën që ilustron performancën e kësaj vetie CSS në shfletues të ndryshëm në faqen e internetit htmlbook.ru). Prandaj, do të duhet të kalojmë në truket e ndryshme.
Ka shumë mënyra për të arritur shtrirjen në një kontejner div për të gjithë shfletuesit:
- Metoda duke përdorur një div cotneyer shtesë ndihmëse
- Metoda e përdorimit të shprehjes. Ajo shoqërohet me një llogaritje të zgjuar të lartësive të bllokut. Njohja e JavaScript është e domosdoshme këtu.
- Përdorimi i vetive line-height. Kjo metodë është e përshtatshme vetëm për shtrirje vertikale në një bllok me lartësi të njohur, që do të thotë se në përgjithësi nuk është e zbatueshme.
- Përdorimi i kompensimit të përmbajtjes absolute dhe relative në rastin e shfletuesit IE. Kjo metodë më duket më e qarta dhe më e thjeshta. Gjithashtu, është i zbatueshëm për një ndarje kontejneri me lartësi të ndryshueshme. Ne do të ndalemi në të më në detaje.
Siç e kuptoni, na mbetet të zgjidhim problemin e shtrirjes vertikale në IE, lidhur me keqkuptimin e saj të pronës. shfaqja: qeliza e tabelës(as IE6, as IE7, as IE8 nuk janë të njohur me këtë pronë). Prandaj, duke përdorur koment i kushtëzuar posaçërisht për shfletuesit e familjes IE, ne do të specifikojmë veçori të tjera CSS.
Koment me kusht
Lloji i dizajnit:
... Инструкции, действующие только в случае выполнения условия в квадратных скобках...
quhet koment i kushtëzuar (kujdes, forma e komentit të kushtëzuar duhet të përputhet plotësisht me shembullin e dhënë, deri në një hapësirë).
Udhëzimet e përfshira në një koment të tillë të kushtëzuar do të ekzekutohen vetëm nëse shfletuesi që interpreton këtë kod i përket familjes IE.
Kështu, duke përdorur një koment të kushtëzuar, ne mund të fshehim një pjesë të kodit nga të gjithë shfletuesit përveç IE.
Zgjidhja e problemit
Për shkak të gjithë këtij majdanozi, do të na duhet të ushqejmë HTML-në tonë me dy kontejnerë shtesë. Kështu do të duket blloku ynë i tekstit:
Ky është një lloj teksti verifikimi.
Ai përbëhet nga dy rreshta.Për klasën e kontejnerëve div përafrim tekstesh cakton vetitë e CSS që rreshtojnë përmbajtjen e saj vertikalisht për të gjithë shfletuesit normalë (përveç IE, natyrisht):
Ekrani: qeliza e tabelës; vertikale-linjë: në mes;
Dhe dy veti të tjera që vendosin gjerësinë dhe lartësinë për bllokun:
Gjerësia: 500 px; lartësia: 500 px;
Kjo është mjaft e mjaftueshme për të lidhur përmbajtjen e kontejnerit në qendër në lidhje me vertikale, në të gjithë shfletuesit. përveç IE.
Tani fillojmë të shtojmë vetitë që lidhen me shtrirjen. për shfletuesit e familjes IE(Ishte për ta që ne përdorëm blloqe shtesë div dhe shtrirje):
Duke iu referuar etiketës div brenda një blloku klase përafrim tekstesh... Për ta bërë këtë, së pari duhet të specifikoni emrin e klasës, dhe më pas, të ndarë me një hapësirë, etiketën të cilës po i referohemi.
Textalign div (pozicioni: absolute; lart: 50%;)
Një ndërtim i tillë do të thotë: për të gjitha etiketat div brenda një blloku me klasën përafrim tekstesh zbatoni vetitë e listuara.
Prandaj, stilet e specifikuara për bllokun përafrim tekstesh modifikohen:
Textalign (ekrani: qeliza e tabelës; rreshtimi vertikal: mes; gjerësia: 500 px; lartësia: 500 px; pozicioni: relative;)
Pika e sipërme majtas e kutisë së tekstit tani është zhvendosur poshtë me 50%.
Për të sqaruar se çfarë po ndodh, unë vizatova një ilustrim:
Siç mund ta shihni nga fotografia, ne kemi bërë disa përparime. Por kjo nuk është e gjitha! Pika e sipërme majtas e kutisë së verdhë është zhvendosur me të vërtetë 50% poshtë nga kutia mëmë (vjollcë). Por ne kemi nevojë për diçka në pesëdhjetë për qind të lartësisë së bllokut të purpurt për të qenë qendra e bllokut të verdhë, jo pika e saj lart majtas.
Tani etiketa do të përdoret shtrirje dhe pozicionimi i tij relativ:
Hapësira e rreshtimit të tekstit (pozicioni: relative; lart: -50%;)
Kështu, bllokun e verdhë e kemi zhvendosur lart me 50% të lartësisë së tij, në raport me pozicionin e fillimit. Siç mund ta imagjinoni, lartësia e kutisë së verdhë është e barabartë me lartësinë e përmbajtjes së përqendruar. Dhe operacioni i fundit me kontejnerin e hapësirës e pozicionoi përmbajtjen tonë në mes të bllokut të purpurt. Hora!
Një shaman i vogël
Para së gjithash, ne duhet të fshehim majdanozin nga të gjithë shfletuesit normalë dhe ta hapim atë për IE. Kjo mund të bëhet, natyrisht, me ndihmën e një komenti të kushtëzuar, jo më kot u njohëm me të:
Ka një problem të vogël. Nëse përmbajtja e përqendruar është shumë e lartë, atëherë ajo çon në pasoja të pakëndshme: shfaqet një lartësi shtesë vertikale e lëvizjes.
Zgjidhja: duhet të shtohet pronë vërshoj: i fshehur bllokoj përafrim tekstesh.
Njihuni me pronën në detaje vërshoj mund të jetë në.
Pamja përfundimtare e udhëzimeve të bllokut CSS përafrim tekstesh duket si:
Textalign (ekrani: qeliza e tabelës; rreshtimi vertikal: mes; gjerësia: 500 px; lartësia: 500 px; pozicioni: relative; tejmbushja: i fshehur; kufiri: 1 px i zi;)
Më falni, harrova të përmend një pikë të rëndësishme. Nëse provoni caktoni lartësinë e bllokut të klasës përafrim tekstesh si përqindje atëherë ju keni asgjë nuk do të vijë prej saj.
Përqendrimi në bllok me lartësi të ndryshueshme
Shumë shpesh është e nevojshme të vendosni lartësinë e një blloku të klasës. përafrim tekstesh jo në piksel, por si përqindje e lartësisë së bllokut prind dhe rreshtoni përmbajtjen e kontejnerit div në mes.
Kapja është se është e pamundur ta bësh këtë për një qelizë tabele (dhe në fund të fundit, bllokun e klasës përafrim tekstesh kthehet në një qelizë tavoline, falë pronës shfaqja: qeliza e tabelës).
Në këtë rast, ju duhet të përdorni një bllok të jashtëm për të cilin është specifikuar vetia CSS shfaqja: tabela dhe tashmë që ajo të vendosë vlerën në përqindje të lartësisë. Më pas blloku u fut brenda tij, me direktivën CSS shfaqja: qeliza e tabelës, do të trashëgojë me kënaqësi lartësinë e bllokut prind.
Për të zbatuar një bllok me lartësi të ndryshueshme në shembullin tonë, ne do të rregullojmë pak CSS-në:
Klasa përafrim tekstesh do të ndryshojmë vlerën e pasurisë shfaqja Me qelizë tavoline në tabela dhe hiqni direktivën e shtrirjes vertikale-linjë: në mes... Tani mund të ndryshojmë me siguri vlerën e lartësisë nga 500 piksele në, për shembull, 100%.
Kështu, vetitë CSS për bllokun e klasës përafrim tekstesh do të duket kështu:
Textalign (ekrani: tabela; gjerësia: 500 px; lartësia: 100%; pozicioni: relative; vërshimi: i fshehur; kufiri: 1 px i zi;)
Mbetet të zbatohet përqendrimi i përmbajtjes. Për ta bërë këtë, një kontejnerë ndahet në një bllok klase përafrim tekstesh(ky është i njëjti bllok i verdhë në foto), ju duhet të vendosni pronën CSS shfaqja: qeliza e tabelës atëherë do të trashëgojë 100% lartësi nga blloku prind përafrim tekstesh(blloku vjollcë). Dhe asgjë nuk na pengon të përafrojmë përmbajtjen e kontejnerit të mbivendosur div në qendër me pronën vertikale-linjë: në mes.
Ne marrim një listë tjetër shtesë të vetive CSS për div të vendosura në kontejner përafrim tekstesh.
Textalign div (ekrani: qeliza e tabelës; rreshtimi vertikal: në mes;)
Ky është i gjithë truku. Opsionale, ju mund të ndryshoni lartësinë me përmbajtje të përqendruar.
Për më shumë informacion mbi rreshtimin vertikal të një blloku me lartësi të ndryshueshme, shihni.
Nëse preni ndonjë faqe interneti të bazuar në html, atëherë do të shihni një strukturë të caktuar shtresë pas shtrese. Për më tepër, në pamjen e saj, do të jetë e ngjashme me një pastë sfumuar. 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 ushqeni urinë tuaj, dhe më pas ne do t'ju tregojmë se si ta përqendroni shtresën e div në faqen tuaj:
Përfitimet e etiketimit
Ekzistojnë dy lloje kryesore të ndërtimit të një strukture siti:
- Tabela;
- E bllokuar.
Paraqitja e tabelave ka qenë mbizotëruese që nga fillimi i internetit. Përparësitë e tij përfshijnë saktësinë e pozicionimit të specifikuar. Por, megjithatë, ajo ka disavantazhe të dukshme. Ato kryesore janë vëllimi i kodit dhe shpejtësia e ulët e shkarkimit.
Kur përdorni një plan urbanistik, faqja e internetit nuk do të shfaqet derisa të ngarkohet plotësisht. Ndërsa kur përdoren blloqe div, elementet shfaqen menjëherë.
Përveç shpejtësisë së lartë të ngarkimit, ndërtimi i bazuar në bllok i faqes lejon disa herë uljen e sasisë së kodit html. 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ë një faqe. Një shembull klasik i përdorimit të tij është shfaqja e tabelave.
Blloko ndërtimin e bazuar në etiketa
quhen gjithashtu shtresa-për-shtresë, dhe vetë blloqet janë shtresa. Kjo ndodh sepse kur përdoren vlera të caktuara të vetive, ato mund të vendosen njëra mbi tjetrën, si shtresat në Photoshop.Ndihma për pozicionim
Në paraqitjen e bllokut, pozicionimi i shtresave bëhet më së miri duke përdorur fletë stili kaskadë. Prona kryesore CSS përgjegjëse për pozicionimin
, është një noton.
Sintaksa e vetive:
noton: majtas | drejtë | asnjë | trashëgojnë,
Ku:
- majtas - rreshton elementin në të majtë të ekranit. Rrjedha rreth pjesës tjetër të elementeve ndodh në të djathtë;
- djathtas - shtrirja në të djathtë, rrjedhja rreth elementëve të tjerë - në të majtë;
- asnjë - nuk lejohet mbështjellje;
- trashëgojnë - trashëgojnë vlerën e elementit mëmë.
Le të shohim një shembull të lehtë të pozicionimit të div-ve duke përdorur këtë pronë:
Blloku i majtë
Blloku i djathtë
Tani le 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 vlerë qendrore. Dhe kur vendosni një bllok të ri në vlerën e shtrirjes djathtas ose majtas, ai zhvendoset në drejtimin e specifikuar. Prandaj, mbetet vetëm për të vendosur float: lënë në të tre blloqet:
Por as ky nuk është alternativa më e mirë. Kur dritarja zvogëlohet, të gjitha shtresat vendosen në një rresht vertikalisht, dhe kur madhësia rritet, ato ngjiten në skajin e majtë të dritares. Prandaj, nevojitet një mënyrë më e mirë për të përafruar div në qendër.
Shtresat e qendrës
Në shembullin tjetër, ne do të përdorim një shtresë kontejneri në të cilën do të vendosim pjesën tjetër të elementeve. Kjo zgjidh problemin e zhvendosjes së blloqeve në lidhje me njëri-tjetrin kur dritarja ndryshohet. Përqendrimi i kontejnerit në mes bëhet duke vendosur vetitë e marzhit në zero për margjinën e sipërme dhe automatike në anët (diferenca: 0 auto):
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 të css-së, klasa 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ë në çdo madhësi të dritares së shfletuesit. Kështu duket përqendrimi vertikal i 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 kontejnerit:
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 div brenda div:
- Display: inline-block - Rreshton një element blloku me një linjë dhe siguron që ai të jetë i mbështjellë rreth një elementi tjetër.
- vertikal-align: mesme - rreshton elementin në mes në lidhje me prindin;
- margin-left - vendos margjinën në të majtë.
Si të krijoni një lidhje nga një shtresë
Mjaft e çuditshme tingëllon, por 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:
Lidhje me faqen tonë
Në këtë shembull, duke përdorur ekranin e linjës: bllok, vendosim lidhjen me vlerën e elementit të bllokut. Dhe për ta bërë lidhjen të gjithë lartësinë e bllokut div, vendosni lartësinë: 100%.
Fshehja dhe shfaqja e elementeve të bllokut
Elementet e bllokut ofrojnë më shumë opsione për zgjerimin e funksionalitetit të ndërfaqes sesa paraqitja e vjetër e tabelës. Shpesh ndodh që dizajni i një faqe interneti 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, e cila ka koston më të lartë të vendosjes së reklamave. Prandaj, ka një problem se ku të "shtyhet" një tjetër baner reklamues. Përafrimi i div në qendër të faqes nuk mjafton!
Një zgjidhje më racionale është krijimi i një blloku të fshehur. Këtu është një shembull i thjeshtë i një zbatimi të tillë:
Ky është një buton magjik. Duke klikuar mbi të do të fshihet ose shfaqet blloku i fshehjes.
Në këtë shembull, pozicioni i blloqeve div nuk ndryshon në asnjë mënyrë. Ky është një funksion i thjeshtë JavaScript që ndryshon vlerën e vetive të ekranit css pasi klikoni butonin ( ngjarje onclick).
Shfaq sintaksën:
shfaqja: bllok | inline | blloqe inline | inline-tabela | artikull-listë | asnjë | xhiruar | tabela | mbishkrimi i tabelës | qeliza tabele | tabelë-kolona-grup | tabela-kolona | tavolinë-footer-grup | tabela-header-grup | rresht tavoline | tabelë-rresht-grupSiç mund ta shihni, kjo pronë mund të marrë shumë vlera. Prandaj është shumë i dobishëm dhe mund të përdoret për pozicionimin e elementeve. Në një nga shembujt e mëparshëm, duke përdorur një nga vlerat e tij ( blloqe inline) ne kemi zbatuar div-të e shtrirjes qendrore brenda div-ve.
Ne përdorëm dy vlera për veçorinë e ekranit për të fshehur dhe shfaqur shtresën.
Shumë shpesh në plan urbanistik kërkohet të përqendroni disa elemente horizontalisht dhe/ose vertikalisht. Prandaj, vendosa të bëj një artikull me metoda të ndryshme përqendrimi, në mënyrë që gjithçka të jetë në dorë në një vend.
Rreshtimi horizontal
diferenca: auto
Shtrirja horizontale me diferencë përdoret kur dihet gjerësia e elementit në qendër. Punon për elementët e bllokut:
Elementi (margjina-majtas: automatik; margjina-djathtas: automatik; gjerësia: 50%;)
Përcaktimi i vlerës automatike për mbushjen 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 rreshtimin e tekstit në qendër brenda një blloku. text-align: qendër:
Përafrimi me text-align Unë jam në qendër
pozicioni dhe diferenca negative në të majtë
I përshtatshëm për blloqe të përqendruara me gjerësi të njohur. Ne i japim pozicionin e bllokut prind: në lidhje me pozicionin në lidhje me të, elementi në qendër është pozicioni: absolut, majtas: 50%, dhe një marzh negativ majtas, që është e barabartë me gjysmën e gjerësisë së elementit:
Përafrimi me pozicionin Unë jam në qendër
shfaqja: inline-block + text-align: qendër
Kjo metodë është e përshtatshme për rreshtimin e blloqeve me gjerësi të panjohur, por kërkon një mbështjellës prind. Për shembull, në këtë mënyrë mund të përqendroni një menu horizontale:
Përafrimi me ekranin: inline-block + text-align: qendër; Rreshtimi vertikal
vija e gjatesise
Për të rreshtuar një rresht teksti, mund të përdorni të njëjtën lartësi dhe ndarje rreshtash për bllokun prind. I përshtatshëm për butona, artikuj të menysë dhe më shumë.
vija e gjatesise Unë jam i vendosur vertikalisht
pozicioni dhe marzhi negativ lart
Një element mund të rreshtohet vertikalisht duke i dhënë një lartësi fikse dhe duke aplikuar pozicionin: absolute dhe një diferencë negative lart e barabartë me gjysmën e lartësisë së elementit që rreshtohet. Bllokut prind duhet t'i caktohet pozicioni: relative:
Mbështjellësi (pozicioni: relative;) elementi (lartësia: 200 px; diferenca: -100 px 0 0; pozicioni: absolut; sipër: 50%;)
Kështu, duke përdorur pozicionimin dhe marzhet negative, mund ta përqendroni elementin në faqe.
shfaqja: qeliza e tabelës
Për shtrirjen vertikale, vetia e ekranit: qeliza e tabelës aplikohet në element, gjë që e bën atë të imitojë një qelizë tabele. Ne gjithashtu vendosëm lartësinë dhe shtrirjen vertikale: në mes të saj. Të gjitha këto do ta mbështjellim në një enë me vetinë dislpay: tabela; :
Ekrani i shtrirjes vertikale: qeliza e tabelës Unë jam i vendosur vertikalisht
Përafrimi dinamik i një elementi në faqe
Ne kemi mbuluar mënyra për të lidhur elementët në një faqe duke përdorur CSS. Tani le të hedhim një vështrim në zbatimin e variantit jQuery.
Le të përfshijmë jQuery në faqe:
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, le të llogarisim dhe varim në mënyrë dinamike koordinatat e qendrës së faqes në vetitë 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ësia ()) / 2 + "px" // mos harroni të shtoni pozicionin: absolut në element 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 e faqes horizontalisht. Linja e dytë bën të njëjtën gjë, vetëm me lartësinë, për shtrirjen vertikale.
Funksioni është gati, mbetet ta varni në DOM gati dhe ngjarjet e ndryshimit të madhësisë së dritares:
$ (funksioni () (// thirrni funksionin e përqendrimit kur DOM është gati alignCenter ($ (elem)); // thirrni funksionin kur dritarja ndryshon madhësinë $ (dritare) .resize (funksioni () (alignCenter ($ ( elem));)) // funksioni për të përqendruar funksionin e elementit alignCenter (elem) (elem.css ((// llogarit koordinatat e majta dhe të sipërme majtas: ($ (dritare) .width () - elem.width ()) / 2 + "px", sipër: ($ (dritare) .lartësia () - elem.lartësia ()) / 2 + "px")))))
Duke përdorur Flexbox
Karakteristikat e reja të CSS3, si Flexbox, po bëhen ngadalë të zakonshme. Teknologjia ndihmon në krijimin e paraqitjes pa përdorimin e notave, pozicionimit, etj. Mund të përdoret gjithashtu për të përqendruar elementët. Për shembull, le të përdorim flexbox në mbështjellësin prind dhe vendosim përmbajtjen brenda:
Mbështjellësi (ekrani: -webkit-box; ekrani: -moz-box; shfaqja: -ms-flexbox; shfaqja: -webkit-flex; shfaqja: flex; lartësia: 500 px; gjerësia: 500 px;) .mbështjellës .përmbajtja (margjina: auto; / * marzhi: 0 automatik; vetëm horizontalisht * / / * marzhi: automatik 0; vertikalisht vetëm * /)
Lorem ipsum dolor sit ametKy rregull e përqendron elementin horizontalisht dhe vertikalisht në të njëjtën kohë - diferenca tani funksionon jo vetëm për shtrirjen horizontale, por edhe për shtrirjen vertikale. Dhe pa një gjerësi / lartësi të njohur.
Burimet e ndërlidhura
Ndihmoni projektin
Rreshtimi horizontal dhe vertikal i elementeve mund të bëhet në mënyra të ndryshme. Zgjedhja e metodës varet nga lloji i elementit (blloku ose inline), nga lloji i pozicionimit, dimensionet, etj.
1. Shtrirja horizontale në qendër të bllokut / faqes
1.1. Nëse blloku ka një gjerësi:
div (gjerësia: 300 px; margjina: 0 automatikisht; / * përqendroni elementin horizontalisht brenda bllokut prind * /)Nëse dëshironi të rreshtoni një element inline në këtë mënyrë, ai duhet të vendoset për të shfaqur: bllok;
1.2. Nëse blloku është i vendosur në një bllok tjetër dhe nuk është vendosur / vendosur gjerësia për të:
.mbështjellës (tekst-linjë: në qendër;)1.3. Nëse blloku ka një gjerësi dhe duhet të fiksohet në qendër të bllokut prind:
.wrapper (pozicioni: relative; / * vendosni pozicionimin relativ për kutinë mëmë, në mënyrë që më vonë të mund ta pozicionojmë absolutisht kutinë brenda saj * /) .box (gjerësia: 400 px; pozicioni: absolute; majtas: 50%; margjina- majtas: -200 px; / * zhvendoseni bllokun majtas me një distancë të barabartë me gjysmën e gjerësisë së tij * /)1.4. Nëse nuk është specifikuar gjerësi për blloqet, mund të qendroni duke përdorur bllokun e mbështjellësit prind:
.mbështjellës (lidhja e tekstit: në qendër; / * poziciononi përmbajtjen e bllokut në qendër * /) .kuti (ekrani: blloku inline; / * renditni blloqet në një rresht horizontalisht * / margjina-djathtas: -0,25em ; / * hiqni dhëmbëzimin e duhur midis blloqeve * /)2. Rreshtimi vertikal
2.1. Nëse teksti përfshin një rresht, për shembull, për butonat dhe artikujt e menysë:
.buton (lartësia: 50 px; lartësia e vijës: 50 px;)2.2. Për të rreshtuar një bllok vertikalisht brenda një blloku prind:
.mbështjellës (pozicioni: relative;) .kutia (lartësia: 100 px; pozicioni: absolute; sipër: 50%; diferenca: -50 px 0 0 0;)2.3. Rreshtimi vertikal sipas llojit të tabelës:
.mbështjellës (ekrani: tabela; gjerësia: 100%;) .kutia (ekrani: qeliza e tabelës; lartësia: 100 px; rreshtimi i tekstit: në qendër; rreshtimi vertikal: në mes;)2.4. Nëse një bllok ka një gjerësi dhe lartësi dhe duhet të përqendrohet në bllokun mëmë:
mbështjellës (pozicioni: relative;) .kutia (lartësia: 100 px; gjerësia: 100 px; pozicioni: absolut; lart: 0; djathtas: 0; poshtë: 0; majtas: 0; margjina: auto; tejmbushja: automatik; / * në përmbajtja nuk u zvarrit * /)2.5. Pozicionimi absolut në qendër të faqes / bllokut duke përdorur transformimin CSS3:
nëse elementi është i dimensionuar
div (gjerësia: 300 px; / * vendosni gjerësinë e bllokut * / lartësinë: 100 px; / * vendosni lartësinë e bllokut * / transformoni: përktheni (-50%, -50%); pozicioni: absolut; lart: 50%; majtas: 50% ;)
nëse elementi nuk është i dimensionuar dhe nuk është bosh
h1 (marzhi: 0; transformimi: përkthe (-50%, -50%); pozicioni: absolut; lart: 50%; majtas: 50%;)Disa tekst këtu
Ka disa mënyra thelbësisht të ndryshme për të përqendruar një objekt vertikalisht duke përdorur CSS, por mund të jetë e ndërlikuar të zgjedhësh atë të duhurin. Ne do të shikojmë disa prej tyre, dhe gjithashtu do të krijojmë një faqe të vogël duke përdorur njohuritë e marra.
Rreshtimi vertikal i qendrës me CSS nuk është i lehtë për t'u arritur. Ka shumë mënyra, dhe jo të gjitha funksionojnë në të gjithë shfletuesit. Le të hedhim një vështrim në 5 metoda të ndryshme dhe të mirat dhe të këqijat e secilës. Shembull.
Mënyra 1
Kjo metodë supozon se ne po vendosim një element
mënyra e paraqitjes është si një tabelë, pas kësaj ne mund të përdorim vetinë vertikale-align në të (e cila funksionon ndryshe në elementë të ndryshëm).
#wrapper (ekrani: tabela;) #cell (ekrani: qeliza e tabelës; rreshtimi vertikal: në mes;)Disa informacione të dobishme që duhet të përqendrohen.pro
- Përmbajtja mund të ndryshojë në mënyrë dinamike lartësinë (lartësia nuk përcaktohet në CSS).
- Përmbajtja nuk pritet nëse nuk ka hapësirë të mjaftueshme për të.
Minuset
- Nuk funksionon në IE 7 ose më pak
- Shumë etiketa të mbivendosura
Metoda e 2-të
Kjo metodë përdor pozicionimin absolut të div, i cili e vendos majën e tij në 50% dhe majën e marzhit minus gjysmën e lartësisë së përmbajtjes. Kjo nënkupton që objekti duhet të ketë një lartësi fikse, e cila përcaktohet në stilet CSS.
Meqenëse lartësia është fikse, mund të vendosni tejmbushjen: auto; për div që përmban përmbajtjen, kështu që nëse përmbajtja nuk përshtatet, atëherë do të shfaqen shiritat e lëvizjes.
Përmbajtja Këtu#përmbajtje (pozicioni: absolut; lart: 50%; lartësia: 240 px; margjina e sipërme: -120 px; / * minus gjysma e lartësisë * /)pro
- Punon në të gjithë shfletuesit.
- Nuk ka fole të panevojshme.
Minuset
- Kur nuk ka hapësirë të mjaftueshme, përmbajtja zhduket (për shembull, div është brenda trupit, dhe përdoruesi ka tkurrur dritaret, në këtë rast shiritat e lëvizjes nuk do të shfaqen.
Metoda e 3-të
Në këtë metodë, ne do ta mbështjellim div-në e përmbajtjes me një div tjetër. Le ta vendosim lartësinë e tij në 50% (lartësia: 50%;), dhe kufirin e poshtëm në gjysmën e lartësisë (margin-fund: -contentheight;). Përmbajtja do të pastrojë notën dhe do të përqendrohet.
#floater (lundrues: majtas; lartësia: 50%; margjina e poshtme: -120 px;) #përmbajtje (e qartë: të dyja; lartësia: 240 px; pozicioni: relative;)këtu është përmbajtjapro
- Punon në të gjithë shfletuesit.
- Kur nuk ka hapësirë të mjaftueshme (për shembull, kur dritarja zvogëlohet) përmbajtja nuk është prerë, do të shfaqen shiritat e lëvizjes.
Minuset
- Unë mendoj vetëm një gjë: se përdoret një element shtesë bosh.
Metoda e 4-të.
Kjo metodë përdor vetinë e pozicionit: absolute; për divs me dimensione fikse (gjerësi dhe lartësi). Pastaj i vendosim koordinatat në krye: 0; fund: 0; por meqenëse ka një lartësi të caktuar, nuk mund të shtrihet dhe është në qendër. Kjo është shumë e ngjashme me metodën e njohur të përqendrimit horizontal të një elementi blloku me gjerësi fikse (diferencë: 0 automatik;).
Informacion i rendesishem.#përmbajtje (pozicioni: absolut; lart: 0; poshtë: 0; majtas: 0; djathtas: 0; kufiri: automatik; lartësia: 240 px; gjerësia: 70%;)pro
- Shume e thjeshte.
Minuset
- Nuk funksionon në Internet Explorer
- Përmbajtja do të pritet pa shirita lëvizjeje nëse nuk ka hapësirë të mjaftueshme në kontejner.
Metoda e 5-të
Ju mund ta përdorni këtë metodë për të rreshtuar në qendër një rresht teksti. Thjesht vendosëm lartësinë e tekstit (lartësia e rreshtit) të barabartë me lartësinë (lartësinë) e elementit. Pas kësaj, linja do të shfaqet në qendër.
Disa rreshta teksti#content (lartësia: 100 px; lartësia e rreshtit: 100 px;)pro
- Punon në të gjithë shfletuesit.
- Nuk e pret tekstin nëse nuk përshtatet.
Minuset
- Punon vetëm me tekst (nuk funksionon me elementë blloku).
- Nëse ka më shumë se një rresht teksti, duket shumë keq.
Kjo teknikë është shumë e dobishme për objekte të vogla, të tilla si përqendrimi i tekstit në një buton ose kuti teksti.
Tani që e dini se si të arrini shtrirjen vertikale të qendrës, le të krijojmë një faqe interneti të thjeshtë që në fund duket kështu:
Hapi 1
Është gjithmonë mirë të filloni me shënimin semantik. Faqja jonë do të strukturohet si më poshtë:
- #floater (për të rreshtuar përmbajtjen në qendër)
- #centred (elementi qendror)
- #ana
- #logo
- #nav (lista
- #përmbajtje
- #poshtë (për të drejtat e autorit dhe gjëra të tjera)
Le të shkruajmë shënimin e mëposhtëm html:
Një kompani me qendër Një kompaniTitulli i faqes
Ri-inxhinieroni në mënyrë holistike kontraktimin me vlerë të shtuar pas bashkëpunimit të përqendruar në proces dhe ndarjes së ideve. Thjeshtoni energjikisht tregjet e veçanta me ndikim nëpërmjet imperativave të aktivizuara. Mbizotëroni në mënyrë holistike inovacionin premium pas skenarëve bindës. Rishikoni pa probleme standardet e larta në kapitalin njerëzor me produkte të prodhimit më të avancuar. Skemat e përputhshme me standardet në mënyrë të veçantë sindikale përpara vortaleve të fuqishme. Rikaptiualizoni në mënyrë unike gatishmërinë e ueb-it të përdorur përkundrejt informacionit jashtë kutisë.
Kreu 2
Përqafoni me efikasitet gatishmërinë e personalizuar për ueb sesa proceset e drejtuara nga klienti. Rritni me vendosmëri imperativat ndër-platformë përballë teknologjive proaktive. Fuqizoni me lehtësi shërbime meta multidisiplinare pa ndërfaqe të gjerë të ndërmarrjes. Drejtoni me lehtësi fushat e temave strategjike konkurruese me tregje elektronike të fokusuara. Sindikata fosfluoreshente e komuniteteve të klasit botëror përballë tregjeve me vlerë të shtuar. Rishpikni siç duhet shërbimet holistike përpara shërbimeve të fuqishme elektronike.
Njoftimi për të drejtën e autorit shkon këtu
Hapi 2
Tani do të shkruajmë CSS-në më të thjeshtë për të pozicionuar elementët në faqe. Ju duhet ta ruani këtë kod në skedarin tuaj style.css. Është për të që lidhja është regjistruar në skedarin html.
Html, trupi (margjina: 0; mbushja: 0; lartësia: 100%;) trupi (sfondi: url ("page_bg.jpg") 50% 50% pa përsëritje # FC3; font-familja: Georgia, Times, serifs; ) #floater (pozicioni: relative; float: majtas; lartësia: 50%; margjina e poshtme: -200 px; gjerësia: 1 px;) #qendër (pozicioni: relative; i qartë: majtas; lartësia: 400 px; gjerësia: 80%; maksimale -gjerësia: 800 px; min. gjerësia: 400 px; diferenca: 0 automatike; sfondi: #fff; kufiri: 4 px solid # 666;) #poshtë (pozicioni: absolute; poshtë: 0; djathtas: 0;) #nav (pozicioni: absolute; majtas: 0; lart: 0; poshtë: 0; djathtas: 70%; mbushje: 20 px; margjina: 10 px;) #content (pozicioni: absolut; majtas: 30%; djathtas: 0; lart: 0; poshtë: 0; tejmbushje: automatik; lartësia: 340 px; mbushje: 20 px; diferencë: 10 px;)
Përpara se të mund ta bëjmë përmbajtjen tonë të përqendruar, duhet të vendosim lartësinë e trupit dhe html në 100%. Meqenëse lartësia llogaritet pa kufij të brendshëm dhe të jashtëm (mbushje dhe diferencë), ne i vendosim ato (kufijtë) në 0 në mënyrë që të mos ketë shirita lëvizës.
Mbushja e poshtme për elementin "floater" -a është e barabartë me minus gjysmën e lartësisë së përmbajtjes (400px), përkatësisht -200px;
Faqja juaj tani duhet të duket diçka si kjo:
Gjerësia e elementit #qendër është 80%. Kjo e bën faqen tonë tashmë në ekrane të vogla dhe më të gjerë në ato të mëdha. shumica e faqeve duken të turpshme në monitorët e rinj të gjerë në këndin e sipërm të majtë. Vetitë min-width dhe max-width gjithashtu kufizojnë faqen tonë në mënyrë që ajo të mos duket shumë e gjerë ose shumë e ngushtë. Internet Explorer nuk i mbështet këto veçori. Ju duhet të vendosni një gjerësi fikse për të.
Meqenëse elementi #center është vendosur në pozicion: relative, ne mund të përdorim pozicionimin absolut të elementeve brenda tij. Pastaj vendosni tejmbushjen: auto; për elementin #content, në mënyrë që shiritat e lëvizjes të shfaqen në rast se përmbajtja nuk përshtatet.
Hapi 3
Dhe gjëja e fundit që do të bëjmë është të shtojmë disa stile për ta bërë faqen të duket pak më tërheqëse. Le të fillojmë me menunë.
#nav ul (stili i listës: asnjë; mbushja: 0; margjina: 20 px 0 0 0; teksti-indent: 0;) #nav li (mbushje: 0; margjina: 3 px;) #nav li a (ekrani: bllok; ngjyra e sfondit: # e8e8e8; mbushja: 7 px; margjina: 0; dekorimi i tekstit: asnjë; ngjyra: # 000; kufiri i poshtëm: 1 px solid #bbb; rreshtimi i tekstit: djathtas;) #nav li a :: pas ( përmbajtja: "" "; ngjyra: #aaa; pesha e shkronjave: bold; ekrani: inline; notues: djathtas; margjina: 0 2px 0 5px;) #nav li a: hover, #nav li a: fokus (sfondi: # f8f8f8; kufiri-fund-ngjyra: # 777;) #nav li a: hover :: pas (margjina: 0 0 0 7px; ngjyra: # f93;) #nav li a: aktive (mbushje: 8px 7px 6px 7px;)
Gjëja e parë që bëmë për ta bërë menunë të dukej më mirë ishte heqja e pikave duke vendosur atributin e stilit të listës në asnjë, dhe gjithashtu vendosëm mbushjen dhe mbushjen, pasi ato janë shumë të ndryshme si parazgjedhje në shfletues të ndryshëm.
Vini re se më pas udhëzuam që lidhjet të shfaqen si elementë blloku. Tani, kur shfaqen, ato shtrihen në të gjithë gjerësinë e elementit në të cilin ndodhen.
Një tjetër gjë interesante që kemi përdorur për menunë është: para dhe: pas pseudo-klasave. Ato ju lejojnë të shtoni çdo gjë para dhe pas një elementi. Kjo është një mënyrë e mirë për të shtuar ikona ose simbole të tilla si një shigjetë në fund të çdo lidhjeje. Ky truk nuk funksionon në Internet Explorer 7 dhe më poshtë.
Hapi 4
E fundit, por jo më pak e rëndësishme, ne do të shtojmë disa kthesa në dizajnin tonë për edhe më shumë bukuri.
#centred (-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;) h1, h2, h3, h4, h5, h6 (font-family: Helvetica, Arial, sans- serif; pesha e shkronjave: normale; ngjyra: # 666;) h1 (ngjyra: # f93; kufiri i poshtëm: 1 px solid #ddd; hapësira midis shkronjave: -0.05em; pesha e shkronjave: bold; margjina e sipërme: 0; padding-top: 0;) #bottom (mbushje: 10px; madhësia e shkronjave: 0.7em; ngjyra: # f03;) #logo (madhësia e shkronjave: 2em; rreshtimi i tekstit: në qendër; ngjyra: # 999;) #logo i fortë (pesha e shkronjave: normale;) shtrirja #logo (ekrani: bllok; madhësia e shkronjave: 4em; lartësia e rreshtit: 0,7em; ngjyra: # 666;) p, h2, h3 (lartësia e rreshtit: 1,6em;) a (ngjyra: # f03;)
Në këto stile, ne vendosim qoshe të rrumbullakosura për elementin #cented. Në CSS3, kjo do të jetë përgjegjësi e pronës së rrezes kufitare. Kjo nuk është zbatuar ende nga disa shfletues, përveç përdorimit të prefikseve -moz dhe -webkit për Mozilla Firefox dhe Safari / Webkit.
Përputhshmëria
Siç e keni marrë me mend, burimi kryesor i çështjeve të përputhshmërisë është Internet Explorer:
- Elementi #floater duhet të vendoset në gjerësinë e tij.
- IE 6 ka mbushje shtesë rreth menyve
235,882 shikime
Artikujt kryesorë të lidhur
