Rreshton një element absolut në qendër. Blloqet DIV me qendër CSS: horizontale dhe vertikale

18.02.15 21.4K

Nëse preni ndonjë faqe interneti të krijuar në bazuar në html, atëherë një strukturë e caktuar shtresë pas shtrese do të shfaqet para jush. Për më tepër, me të tijën pamjen 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ë vëllimi i kodit dhe shpejtësi të ulët shkarkime.

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

Përveç shpejtësi e lartë Ndërtimi i bllokut të ngarkimit të sitit ju lejon të zvogëloni vëllimin disa herë kodi 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ë 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Ë faqosja 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;
• trashëgoj – trashëgimi me vlerë elementi prind.

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

#majtas ( 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 kjo nuk është opsioni më i 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 e mëposhtëm Ne do të përdorim një shtresë enë 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 margjinën e vetive vlerë zero kufijtë nga skaji i sipërm dhe automatik në anët (diferencë: 0 automatik):

#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: rgb(0,255,153 #qendër (gjerësia: 200px; float: majtas; sfondi: rgb(255,0); ) Blloku i majtë Blloku qendror;

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ë seri të reja për të përqendruar shtresat brenda një kontejneri. vetitë css :

#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; rreshtim vertikal: në mes të majta: 35 pikselë ) #djathtas (gjerë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; )

Përshkrim i shkurtër i vetive css dhe vlerave të tyre në të cilat 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 gjatë paraqitjes lloje të ndryshme menu. Le të shqyrtojmë shembull praktik zbatimi i shtresës së lidhjes:

#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%. Fshih dhe trego elementet e bllokut

Elementet e bllokut ofrojnë më shumë mundësi për të zgjeruar funksionalitetin e ndërfaqes sesa paraqitjen e vjetëruar tabelare. 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ë.

Sidomos ka të bëjë me faqen kryesore, kostoja e reklamimit në të cilën është më e larta. Prandaj, lind problemi se ku të "shtyhet" një tjetër baner reklamues. Dhe tani shtrirje div Nuk ka asnjë mënyrë që t'i ikësh 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.

Në duke krijuar një ndarje blloqe, ndoshta keni hasur në situata ku duhet të përqendroni div tuaj horizontalisht dhe vertikalisht duke përdorur CSS të pastër. Për shembull, kur krijoni dritare kërcyese me . Ka disa mënyra për të zbatuar centrimin, dhe në këtë artikull do të ndaj mënyrat e mia të preferuara dhe më të lehta, duke përdorur CSS ose jQuery.

Së pari, bazat:

Përqendrimi horizontal në CSS

Kjo është e lehtë për t'u bërë, ne e përdorim diferencë për tonë div bllokoj.

Emri i klasës (diferenca: 0 automatik; gjerësia: 200 px; lartësia: 200 px; )

Për qendërzim bllok div vetëm horizontalisht, ju duhet të përcaktoni gjerësinë (gjerësinë) e bllokut, përdorni veçorinë automatike për kufijtë e majtë dhe të djathtë. Kjo metodë do të funksionojë për të gjithë elementët e bllokut (div, p, h1, e kështu me radhë...). Për të aplikuar përqendrimin horizontal në elementët e linjës (lidhjet, imazhet...), duhet të aplikoni ekranin: bllok;

Përqendrimi horizontal dhe vertikal në CSS

Përqendrimi i një blloku div horizontalisht dhe vertikalisht në të njëjtën kohë është pak më i ndërlikuar. Ju duhet të dini dimensionet e bllokut div para kohe.

Klasa Emri (gjerësia: 300 px; lartësia: 200 px; pozicioni: absolut; majtas: 50%; sipër: 50%; margjina: -100 px 0 0 -150 px; )

Duke përdorur pozicionimin absolut të një blloku, ne mund ta shkëputim atë nga elementët përreth dhe të përcaktojmë pozicionin e tij në lidhje me madhësinë e dritares së shfletuesit. Zhvendosni bllokun e div 50% majtas dhe sipër dritares. Këndi i sipërm majtas i bllokut është tani në qendër të dritares së shfletuesit. Mbetet vetëm të vendosni bllokun div në qendër të faqes duke e zhvendosur gjysmën e gjerësisë majtas dhe gjysmën e lartësisë lart. Hora! Rezultati ishte një qendërzim i shkëlqyer i bllokut css i pastër kodi.

Përqendrimi horizontal dhe vertikal me jQuery

Siç u përmend më herët - Metoda CSS centrimi punon vetëm me dimensione fikse. Nëse dimensionet nuk janë të përcaktuara, metoda jQuery do të vijë në shpëtim:

$(dritare).resize(funksion())( $(".className").css(( pozicioni:"absolute", majtas: ($(dritare).width() - $(".className").outerWidth ( ))/2, lart: ($(dritare).lartësia() - $(".className").outerHeight())/2 )); // Për të ekzekutuar një funksion kur dritarja është e ngarkuar: $(window).resize();

Operacioni këtë metodëështë të ekzekutoni funksionin resize() duke përdorur linjën $(window).resize() . Ky funksion funksionon sa herë që ndryshon madhësia e dritares së shfletuesit. Ne përdorim outerWidth() dhe outerHeight() sepse, ndryshe nga width() dhe height(), ato përfshijnë mbushjen dhe trashësinë e kufijve në madhësinë që kthehen. Rreshti i fundit fillon procesin e përqendrimit të bllokut div kur faqja ngarkohet.

Avantazhi i përdorimit të kësaj metode është se ju mund të mos e dini se çfarë madhësie është div. Disavantazhi kryesor– kjo funksionon vetëm kur JavaScript është i aktivizuar. Prandaj, kjo metodë është e pranueshme për ndërfaqet shumëfunksionale si VKontakte, Facebook, etj.

Si gjithmonë, mos ngurroni të sugjeroni metodën tuaj të preferuar për qendrimin e blloqeve duke komentuar.

Sa kopje janë thyer tashmë në lidhje me detyrën e rreshtimit të elementeve në një faqe. Unë sjell në vëmendjen tuaj një përkthim të një artikulli të shkëlqyer me një zgjidhje për këtë problem nga Stephen Shaw për Smashing Magazine - Absolute Horizontal And Vertical Centering në CSS.

Të gjithë e dinim për marzhin: 0 auto; për qendërzim horizontal, por diferencë: auto; nuk funksionoi për vertikale. Kjo mund të rregullohet lehtësisht duke vendosur thjesht lartësinë dhe duke aplikuar stilet e mëposhtme:

Absolute-Center (diferencë: automatik; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas: 0; )
Unë nuk jam i pari që propozoj këtë zgjidhje, por kjo qasje përdoret rrallë kur shtrirje vertikale. Në komentet e artikullit Si të përqendroni çdo gjë me CSS, Simon i referohet një shembulli jsFiddle që ofron zgjidhje perfekte për qendërzim vertikal. Këtu janë disa të tjera për këtë temë.

Le të hedhim një vështrim më të afërt në metodën.

Përparësitë

• Përputhshmëria e ndërshfletuesve (përfshirë IE 8-10)
• Asnjë shënim shtesë, stil minimal
• Përshtatshmëria
• Pavarësia nga mbushja (pa madhësi kutie!)
• Punon për imazhe

Të metat

• Lartësia duhet të specifikohet (shih Lartësia e ndryshueshme)
• Rekomandohet të vendosni tejmbushjen: automatik në mënyrë që përmbajtja të mos përhapet
• Nuk funksionon në Windows Phone

Pajtueshmëria e shfletuesit Metoda është testuar dhe funksionon shkëlqyeshëm në Chrome, Firefox, Safari, Mobile Safari dhe madje edhe IE 8-10. Një përdorues përmendi se përmbajtja nuk përputhet vertikalisht në Windows Phone Përmbajtja e vendosur në një kontejner me pozicionin: relative do të përafrohet mirë:

Absolute-Center (gjerësia: 50%; lartësia: 50%; tejmbushja: automatik; kufiri: automatik; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas: 0; )

Përdorimi i portit të shikimit Vendosni përmbajtjen në pozicionin: fiks dhe vendosni indeksin z:

Absolute-Center.is-Fixed (gjerësia: 50%; lartësia: 50%; tejmbushja: automatik; diferenca: auto; pozicioni: fiks; lart: 0; majtas: 0; poshtë: 0; djathtas: 0; indeksi z: 999;

Përshtatshmëria Avantazhi kryesor i metodës së përshkruar është se ajo funksionon në mënyrë perfekte kur lartësia ose gjerësia specifikohet si përqindje, madje edhe duke kuptuar min-width/max-width dhe min-height/max-height.

Absolute-Center.is-Responsive ( gjerësia: 60%; lartësia: 60%; gjerësia minimale: 400 px; gjerësia maksimale: 500 px; mbushja: 40 px; tejmbushja: automatik; diferenca: auto; pozicioni: absolute; lart: 0; majtas: 0; poshtë: 0;

Offsets Nëse faqja ka një kokë fikse ose ju duhet të bëni ndonjë dhëmbëzim tjetër, ju vetëm duhet të shtoni kodin si krye: 70px; Ndërsa diferenca është vendosur: auto; blloku i përmbajtjes do të jetë i përqendruar saktë në lartësi.

Mund ta rreshtoni gjithashtu përmbajtjen në anën e dëshiruar, duke e lënë qendrimin në lartësi. Për ta bërë këtë ju duhet të përdorni të drejtën: 0; majtas: auto; për shtrirjen djathtas ose majtas: 0; djathtas: auto; për shtrirjen majtas.

Absolute-Center.is-Right ( gjerësia: 50%; lartësia: 50%; diferenca: automatik; tejmbushja: automatik; pozicioni: absolut; lart: 0; majtas: automatik; poshtë: 0; djathtas: 20 px; rreshtimi i tekstit: drejtë;

Shumë përmbajtje Për të siguruar që një sasi e madhe përmbajtjesh të mos lejojë ndryshimin e paraqitjes, ne përdorim tejmbushjen: auto . Do të shfaqet një shirit lëvizës vertikal. Mund të shtoni gjithashtu lartësinë maksimale: 100%; nëse përmbajtja nuk ka mbushje shtesë.
.Absolute-Center.is-Overflow ( gjerësia: 50%; lartësia: 300 px; lartësia maksimale: 100%; kufiri: automatik; tejmbushja: automatik; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas : 0;

Imazhet Kjo metodë funksionon mirë edhe për imazhe! Shtoni lartësinë e stilit: automatik; atëherë imazhi do të shkallëzohet së bashku me kontejnerin.

Absolute-Center.is-Image (gjerësia: 50%; lartësia: automatik; kufiri: automatik; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas: 0; )

Lartësia e ndryshueshme Metoda e përshkruar kërkon një lartësi të caktuar blloku, e cila mund të specifikohet si përqindje dhe të kontrollohet duke përdorur lartësinë maksimale, gjë që e bën metodën ideale për faqet reaguese. Një mënyrë për të mos vendosur lartësinë është duke përdorur ekranin: tavolinë. Në këtë rast, blloku i përmbajtjes përqendrohet pavarësisht nga madhësia.

Mund të ketë probleme me përputhshmërinë e ndër-shfletuesve, ndoshta duhet të përdorni metodën e qelizave të tabelës (përshkruar më poshtë).

• Firefox/IE8: Përdorimi i ekranit: tabela e rreshton bllokun vertikalisht në krye të dokumentit.
• IE9/10: Përdorimi i ekranit: tabela rreshton bllokun majtas këndi i sipërm faqet.
• Mobile Safari: Nëse gjerësia është vendosur në përqindje, përqendrimi horizontal vuan

.Absolute-Center.is-Variable (ekrani: tabela; gjerësia: 50%; tejmbushja: automatik; kufiri: automatik; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas: 0; )

Metoda të tjera Metoda e përshkruar funksionon mirë në shumicën e rasteve, por ka metoda të tjera që mund të jenë të zbatueshme për të zgjidhur problemet specifike mënyrë popullore. I përshtatshëm nëse dihen dimensionet e bllokut.

Është-Negative ( gjerësia: 300 px; lartësia: 200 px; mbushja: 20 px; pozicioni: absolute; lart: 50%; majtas: 50%; margjina majtas: -170 px; /* (gjerësia + mbushja)/2 */ margjina- sipër: -120 px /* (lartësia + mbushje)/2 */ )
Përparësitë:

• Pajtueshmëria me ndërshfletues
• Kodi minimal

Të metat:

• Jo adaptive
• Paraqitja zvarritet nëse ka shumë përmbajtje në enë
• Duhet të kompensoni mbushjen ose të përdorni madhësinë e kutisë: kuti kufitare

Përdorimi i transformimit Një nga më mënyra të thjeshta, mbështet ndryshimin e lartësisë. Ekziston një artikull i detajuar mbi këtë temë - "Përqendrimi i elementeve të gjerësisë/lartësisë së përqindjes" nga CSS-Tricks.

Is-Transformed ( gjerësia: 50%; marzhi: automatik; pozicioni: absolut; lart: 50%; majtas: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%);
Përparësitë:

• Lartësia e ndryshueshme
• Kodi minimal

Të metat:

• Nuk funksionon në IE 8
• Përdorimi i parashtesave
• Mund të ndërhyjë me efekte të tjera të transformimit
• Në disa raste, skajet e bllokut dhe teksti turbullohen gjatë paraqitjes

Tabela-cell Ndoshta një nga mënyrat më të mira dhe më të lehta. Përshkruar në detaje në artikullin "Qendrimi vertikal me lartësi fleksibël me CSS, përtej IE7" nga 456bereasttreet. Pengesa kryesore është shënimi shtesë: kërkohen tre elementë:

<!-- PËRMBAJTJA -->
CSS:
.Pos-Container.is-Table ( shfaqja: tabela; ) .is-Tabela .Table-Cell ( shfaqja: qeliza e tabelës; rreshtimi vertikal: mes; ) .është-Tabela .Blloku qendror ( gjerësia: 50%; marzhi: 0 auto;
Përparësitë:

• Lartësia e ndryshueshme
• Paraqitja nuk funksionon kur sasi të mëdha teksti në bllok
• Pajtueshmëria me ndërshfletues

Të metat:

• Struktura komplekse

Flexbox E ardhmja e CSS, flexbox do të zgjidhë shumë nga problemet e paraqitjes së sotme. Kjo është shkruar në detaje në një artikull të revistës Smashing të quajtur Centrimi i elementeve me Flexbox.

Pos-Container.is-Flexbox ( shfaqja: -webkit-box; shfaqja: -moz-box; shfaqja: -ms-flexbox; shfaqja: -webkit-flex; shfaqja: flex; -webkit-box-align: në qendër; - moz-box-align: -ms-flex-align: -webkit-align-items: -webkit-box-center; : qendër; justify-content: qendër)
Përparësitë:

• Përmbajtja mund të jetë çdo lartësi ose gjerësi
• Mund të përdoret në raste më komplekse

Të metat:

• Nuk ka mbështetje për IE 8-9
• Kërkon enë ose stile në trup
• Kërkon një shumëllojshmëri të gjerë të parashtesave për të funksionimin e duhur në shfletuesit modernë
• Probleme të mundshme të performancës

Përfundimi Çdo metodë ka avantazhet dhe disavantazhet. Në thelb, zgjedhja varet nga zgjedhja e shfletuesve që duhet të mbështeten

Sa kopje janë thyer tashmë në lidhje me detyrën e rreshtimit të elementeve në një faqe. Unë sjell në vëmendjen tuaj një përkthim të një artikulli të shkëlqyer me një zgjidhje për këtë problem nga Stephen Shaw për Smashing Magazine - Absolute Horizontal And Vertical Centering në CSS.

Të gjithë e dinim për marzhin: 0 auto; për qendërzim horizontal, por diferencë: auto; nuk funksionoi për vertikale. Kjo mund të rregullohet lehtësisht duke vendosur thjesht lartësinë dhe duke aplikuar stilet e mëposhtme:

Absolute-Center (diferencë: automatik; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas: 0; )
Unë nuk jam i pari që propozoj këtë zgjidhje, por kjo qasje përdoret rrallë për shtrirjen vertikale. Në komentet e artikullit Si të përqendroni ndonjë gjë me CSS, Simon lidhet me një shembull jsFiddle që ofron një zgjidhje të shkëlqyer për përqendrimin vertikal. Këtu janë disa të tjera për këtë temë.

Le të hedhim një vështrim më të afërt në metodën.

Përparësitë

• Përputhshmëria e ndërshfletuesve (përfshirë IE 8-10)
• Asnjë shënim shtesë, stil minimal
• Përshtatshmëria
• Pavarësia nga mbushja (pa madhësi kutie!)
• Punon për imazhe

Të metat

• Lartësia duhet të specifikohet (shih Lartësia e ndryshueshme)
• Rekomandohet të vendosni tejmbushjen: automatik në mënyrë që përmbajtja të mos përhapet
• Nuk funksionon në Windows Phone

Pajtueshmëria e shfletuesit Metoda është testuar dhe funksionon shkëlqyeshëm në Chrome, Firefox, Safari, Mobile Safari dhe madje edhe IE 8-10. Një përdorues përmendi se përmbajtja nuk përputhet vertikalisht në Windows Phone Përmbajtja e vendosur në një kontejner me pozicionin: relative do të përafrohet mirë:

Absolute-Center (gjerësia: 50%; lartësia: 50%; tejmbushja: automatik; kufiri: automatik; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas: 0; )

Përdorimi i portit të shikimit Vendosni përmbajtjen në pozicionin: fiks dhe vendosni indeksin z:

Absolute-Center.is-Fixed (gjerësia: 50%; lartësia: 50%; tejmbushja: automatik; diferenca: auto; pozicioni: fiks; lart: 0; majtas: 0; poshtë: 0; djathtas: 0; indeksi z: 999;

Përshtatshmëria Avantazhi kryesor i metodës së përshkruar është se ajo funksionon në mënyrë perfekte kur lartësia ose gjerësia specifikohet si përqindje, madje edhe duke kuptuar min-width/max-width dhe min-height/max-height.

Absolute-Center.is-Responsive ( gjerësia: 60%; lartësia: 60%; gjerësia minimale: 400 px; gjerësia maksimale: 500 px; mbushja: 40 px; tejmbushja: automatik; diferenca: auto; pozicioni: absolute; lart: 0; majtas: 0; poshtë: 0;

Offsets Nëse faqja ka një kokë fikse ose ju duhet të bëni ndonjë dhëmbëzim tjetër, ju vetëm duhet të shtoni kodin si krye: 70px; Ndërsa diferenca është vendosur: auto; blloku i përmbajtjes do të jetë i përqendruar saktë në lartësi.

Mund ta rreshtoni gjithashtu përmbajtjen në anën e dëshiruar, duke e lënë qendrimin në lartësi. Për ta bërë këtë ju duhet të përdorni të drejtën: 0; majtas: auto; për shtrirjen djathtas ose majtas: 0; djathtas: auto; për shtrirjen majtas.

Absolute-Center.is-Right ( gjerësia: 50%; lartësia: 50%; diferenca: automatik; tejmbushja: automatik; pozicioni: absolut; lart: 0; majtas: automatik; poshtë: 0; djathtas: 20 px; rreshtimi i tekstit: drejtë;

Shumë përmbajtje Për të siguruar që një sasi e madhe përmbajtjesh të mos lejojë ndryshimin e paraqitjes, ne përdorim tejmbushjen: auto . Do të shfaqet një shirit lëvizës vertikal. Mund të shtoni gjithashtu lartësinë maksimale: 100%; nëse përmbajtja nuk ka mbushje shtesë.
.Absolute-Center.is-Overflow ( gjerësia: 50%; lartësia: 300 px; lartësia maksimale: 100%; kufiri: automatik; tejmbushja: automatik; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas : 0;

Imazhet Kjo metodë funksionon mirë edhe për imazhe! Shtoni lartësinë e stilit: automatik; atëherë imazhi do të shkallëzohet së bashku me kontejnerin.

Absolute-Center.is-Image (gjerësia: 50%; lartësia: automatik; kufiri: automatik; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas: 0; )

Lartësia e ndryshueshme Metoda e përshkruar kërkon një lartësi të caktuar blloku, e cila mund të specifikohet si përqindje dhe të kontrollohet duke përdorur lartësinë maksimale, gjë që e bën metodën ideale për faqet reaguese. Një mënyrë për të mos vendosur lartësinë është përdorimi i ekranit: tabela . Në këtë rast, blloku i përmbajtjes përqendrohet pavarësisht nga madhësia.

Mund të ketë probleme me përputhshmërinë e ndër-shfletuesve, ndoshta duhet të përdorni metodën e qelizave të tabelës (përshkruar më poshtë).

• Firefox/IE8: Përdorimi i ekranit: tabela e rreshton bllokun vertikalisht në krye të dokumentit.
• IE9/10: Përdorimi i ekranit: tabela e rreshton bllokun në këndin e sipërm majtas të faqes.
• Mobile Safari: Nëse gjerësia është vendosur në përqindje, përqendrimi horizontal vuan

.Absolute-Center.is-Variable (ekrani: tabela; gjerësia: 50%; tejmbushja: automatik; kufiri: automatik; pozicioni: absolut; lart: 0; majtas: 0; poshtë: 0; djathtas: 0; )

Metoda të tjera Metoda e përshkruar funksionon mirë në shumicën e rasteve, por ka metoda të tjera që mund të përdoren për të zgjidhur probleme specifike. I përshtatshëm nëse dihen dimensionet e bllokut.

Është-Negative ( gjerësia: 300 px; lartësia: 200 px; mbushja: 20 px; pozicioni: absolute; lart: 50%; majtas: 50%; margjina majtas: -170 px; /* (gjerësia + mbushja)/2 */ margjina- sipër: -120 px /* (lartësia + mbushje)/2 */ )
Përparësitë:

• Pajtueshmëria me ndërshfletues
• Kodi minimal

Të metat:

• Jo adaptive
• Paraqitja zvarritet nëse ka shumë përmbajtje në enë
• Duhet të kompensoni mbushjen ose të përdorni madhësinë e kutisë: kuti kufitare

Përdorimi i transformimit Një nga metodat më të thjeshta, mbështet ndryshimet e lartësisë. Ekziston një artikull i detajuar mbi këtë temë - "Përqendrimi i elementeve të gjerësisë/lartësisë së përqindjes" nga CSS-Tricks.

Is-Transformed ( gjerësia: 50%; marzhi: automatik; pozicioni: absolut; lart: 50%; majtas: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%);
Përparësitë:

• Lartësia e ndryshueshme
• Kodi minimal

Të metat:

• Nuk funksionon në IE 8
• Përdorimi i parashtesave
• Mund të ndërhyjë me efekte të tjera të transformimit
• Në disa raste, skajet e bllokut dhe teksti turbullohen gjatë paraqitjes

Tabela-cell Ndoshta një nga mënyrat më të mira dhe më të lehta. Përshkruar në detaje në artikullin "Qendrimi vertikal me lartësi fleksibël me CSS, përtej IE7" nga 456bereasttreet. Pengesa kryesore është shënimi shtesë: kërkohen tre elementë:

<!-- PËRMBAJTJA -->
CSS:
.Pos-Container.is-Table ( shfaqja: tabela; ) .is-Tabela .Table-Cell ( shfaqja: qeliza e tabelës; rreshtimi vertikal: mes; ) .është-Tabela .Blloku qendror ( gjerësia: 50%; marzhi: 0 auto;
Përparësitë:

• Lartësia e ndryshueshme
• Layout nuk funksionon kur ka një sasi të madhe teksti në një bllok
• Pajtueshmëria me ndërshfletues

Të metat:

• Struktura komplekse

Flexbox E ardhmja e CSS, flexbox do të zgjidhë shumë nga problemet e paraqitjes së sotme. Kjo është shkruar në detaje në një artikull të revistës Smashing të quajtur Centrimi i elementeve me Flexbox.

Pos-Container.is-Flexbox ( shfaqja: -webkit-box; shfaqja: -moz-box; shfaqja: -ms-flexbox; shfaqja: -webkit-flex; shfaqja: flex; -webkit-box-align: në qendër; - moz-box-align: -ms-flex-align: -webkit-align-items: -webkit-box-center; : qendër; justify-content: qendër)
Përparësitë:

• Përmbajtja mund të jetë çdo lartësi ose gjerësi
• Mund të përdoret në raste më komplekse

Të metat:

• Nuk ka mbështetje për IE 8-9
• Kërkon enë ose stile në trup
• Kërkon një shumëllojshmëri të gjerë prefiksash për të punuar si duhet në shfletuesit modernë
• Probleme të mundshme të performancës

Përfundimi Çdo metodë ka avantazhet dhe disavantazhet. Në thelb, zgjedhja varet nga zgjedhja e shfletuesve që duhet të mbështeten

Në procesin e vendosjes së faqeve në internet, detyra e përqendrimit të blloqeve është mjaft e zakonshme. Ky mund të jetë përqendrimi vertikal ose horizontal.

Për shembull, nëse faqja ka gjerësi fikse, atëherë do të ishte racionale ta rreshtonim në qendër të dritares së shfletuesit, sepse kjo e bën tekstin më të lehtë për t'u lexuar (veçanërisht nëse monitori është i madh). Disa dizajne përgjithësisht përfshijnë vendosjen e bllokut në qendër të dritares së shfletuesit, d.m.th., si qendërzim vertikal ashtu edhe horizontal.

Së pari, le të flasim për përqendrimin horizontal. Teknika më e njohur është vendosja e bllokut në qendër duke vendosur kufijtë e djathtë dhe të majtë në "auto". Le të themi se duam të vendosim në qendër një bllok me id = "container" dhe një gjerësi prej 860 px. Në këtë rast, në skedar CSS ju duhet të shkruani:

#enë (
sfond-ngjyra:#EEE;
gjerësia: 860 px;
margjina: 0 px automatike;
}

Megjithatë, I.E. Versionet më të vjetra (për shembull 5.0) nuk do ta vendosin këtë bllok në qendër. Sigurisht, askush nuk përdor më shfletues të tillë të lashtë (nga 1800 vizitorët e mi të përditshëm - vetëm 1), por për çdo rast, është më mirë ta bëni atë të funksionojë edhe atje :)

Për ta bërë këtë, elementi prind, domethënë ai brenda të cilit ne përqendrojmë bllokun tonë (zakonisht elementi prind është etiketë TRUPI), duhet të vendosni parametrin text-align:center. Në këtë rast, blloku do të rreshtohet në qendër, por e gjithë përmbajtja e tij do të jetë gjithashtu në linjë në qendër, por ne nuk kemi nevojë për këtë. Prandaj, brenda këtij blloku vendosim shtrirjen e paracaktuar - text-align:left .

trupi (lidhja e tekstit: qendër)

#enë (
sfond-ngjyra:#EEE;
gjerësia: 860 px;
margjina: 0 px automatike;
text-align:left;
}

Ekziston edhe një mënyrë tjetër shtrirje horizontale bllok në bazë të . Siç ndoshta e dini, si parazgjedhje, çdo element blloku shtypet në skajin e majtë të elementit prind. Prandaj, për ta lidhur atë në qendër ju nevojitet:

2. Zhvendoseni në të djathtë me 50% të gjerësisë së dritares së shfletuesit

3. Duke përdorur mbushjen negative, zhvendoseni në të majtë me një distancë të barabartë me gjysmën e gjerësisë së bllokut.

Në këtë mënyrë blloku do të përqendrohet. Për qartësi më të madhe, shikoni videon më poshtë:

Shembull i kodit CSS:

#enë (
sfond-ngjyra:#559964;
pozicioni:absolut;
majtas:50%;
margjina-majtas:-430px;
gjerësia: 860 px;
}

Duhet të theksohet se nëse dëshironi të poziciononi një bllok jo në lidhje me dritaren e shfletuesit, por, për shembull, në lidhje me një bllok tjetër, atëherë për këtë bllok tjetër duhet të vendosni pozicionin: relative;

Le të themi se blloku ynë #container, i cili duhet të përqendrohet, ndodhet brenda bllokut #wrap. Atëherë kodi do të duket si ky:

#wrap(pozicioni:relativ)

#enë (
sfond-ngjyra:#559964;
pozicioni:absolut;
majtas:50%;
margjina-majtas:-430px;
gjerësia: 860 px;
}

Tani le të shohim rastin kur duhet të rreshtoni një bllok në qendër të faqes, d.m.th. Aplikoni centrimin horizontal dhe vertikal në të njëjtën kohë. Pozicionimi hyn sërish në lojë këtu. Pra na duhen:

1. Vendosni bllokun pozicionim absolut

2. Zhvendoseni atë djathtas me 50% dhe poshtë me 50%, duke vendosur këndin e sipërm të majtë në qendër të dritares së shfletuesit.

3. Duke përdorur mbushjen negative, lëvizeni lart me një distancë të barabartë me gjysmën e lartësisë së bllokut dhe majtas me një distancë të barabartë me gjysmën e gjerësisë së bllokut.

Kjo do ta vendosë bllokun në qendër të faqes së internetit.

Le të themi se lartësia e bllokut tonë është 600 px, dhe gjerësia është 860 px. Pastaj kodi CSS do të duket si ky:

#enë (
sfond-ngjyra:#559964;
pozicioni:absolut;
krye: 50%;
majtas:50%;
margin-top:-300px;
margjina-majtas:-430px;
lartësia: 600 px;
gjerësia: 860 px;
}

Shpresoj që vetë parimi të jetë i qartë për ju.

Vlerësoni mësimin: 1 2 3 4 5

Komentet:

Unë do të jem i pari që do të shikoj mësimin!!!

Eh... E dyta =) Kohët e fundit e kam hasur këtë problem në IE, kam vuajtur për një kohë të gjatë)) Faleminderit =)

Faleminderit, faqe e shënuar)))

Faleminderit shumë, Andrey, për mësimet e reja!

Thjesht faleminderit, nuk mendoj se ka asgjë për të shtuar këtu))

Faleminderit për mësimin, fjalë për fjalë u përpoqa ta bëja këtë disa ditë më parë, vuajta pak dhe e lashë përkohësisht mënjanë

Por unë kam një problem: faqja në Mozille Firefox nuk dëshiron të rreshtohet, është mbërthyer në skajin e majtë dhe kjo është ajo, asnjë nga sa më sipër nuk ndihmon (e njëjta gjë në Opera).

pse nuk funksionon kjo? - "nëse doni të poziciononi një bllok jo në lidhje me dritaren e shfletuesit, por, për shembull, në lidhje me një bllok tjetër, për këtë bllok tjetër duhet të vendosni pozicionin: relative;"

Faleminderit shumë vetëm një GIANT ju bekoftë!

Gjithçka është në rregull, por për disa arsye të gjitha imazhet bien në vend vetëm pas përditësimit të shfletuesit. Ju lutem më tregoni pse ndodh kjo?

Andrey, ju lutemi shtoni një kërkim në faqe.

Shto një koment.