Kur shtroni një faqe, shpesh është e nevojshme të kryhet shtrirja në qendër duke përdorur metodën CSS: për shembull, përqendrimi i bllokut kryesor. Ekzistojnë disa opsione për zgjidhjen e këtij problemi, secila prej të cilave herët a vonë duhet të përdoret nga çdo projektues i paraqitjes.
Rreshtimi i tekstit në qendër
Shpesh, për qëllime dekorative, është e nevojshme të vendosni tekstin në shtrirjen në qendër; CSS në këtë rast ju lejon të zvogëloni kohën e paraqitjes. Më parë, kjo bëhej duke përdorur atributet HTML, por tani standardi kërkon që teksti të përafrohet duke përdorur fletët e stilit. Ndryshe nga blloqet, për të cilat duhet të ndryshoni kufijtë, në CSS, përqendrimi i tekstit bëhet duke përdorur një rresht të vetëm:
- text-align:center;
Kjo pronë trashëgohet dhe kalohet nga prindi te të gjithë pasardhësit. Ndikon jo vetëm tekstin, por edhe elementë të tjerë. Për ta bërë këtë, ato duhet të jenë inline (për shembull, span) ose blloqe inline (çdo blloqe që ka grupin e vetive të ekranit: bllok). Opsioni i fundit ju lejon gjithashtu të ndryshoni gjerësinë dhe lartësinë e elementit dhe të rregulloni dhëmbët në mënyrë më fleksibël.
Shpesh në faqe, align i caktohet vetë etiketës. Kjo menjëherë e zhvlerëson kodin, pasi W3C e ka zhvlerësuar atributin align. Përdorimi i tij në një faqe nuk rekomandohet.
Përafrimi i një blloku në qendër
Nëse keni nevojë të përqendroni një div, CSS ofron një mënyrë mjaft të përshtatshme: përdorimin e margjinave. Indencat mund të vendosen si për elementët e bllokut ashtu edhe për elementët e blloqeve në linjë. Vlera e pronës duhet të jetë 0 (mbushje vertikale) dhe automatike (mbushje automatike horizontale):
- marzhi: 0 auto;
Tani ky opsion njihet si absolutisht i vlefshëm. Përdorimi i mbushjes së jashtme ju lejon gjithashtu të vendosni imazhin në qendër: ju lejon të zgjidhni shumë probleme që lidhen me pozicionimin e një elementi në faqe.
Rreshtoni një bllok majtas ose djathtas
Ndonjëherë shtrirja e qendrës CSS nuk kërkohet, por ju duhet të vendosni dy blloqe krah për krah: një në skajin e majtë, tjetrin në të djathtë. Për këtë qëllim, ekziston një pronë float, e cila mund të marrë një nga tre vlerat: majtas, djathtas ose asnjë. Le të themi se keni dy blloqe që duhet të vendosen krah për krah. Atëherë kodi do të jetë si ky:
- .majtas (float:majtas;)
- .djathtas (float:djathtas)
Nëse ekziston edhe një bllok i tretë, i cili duhet të jetë i vendosur nën dy blloqet e para (për shembull, një fund), atëherë duhet t'i jepet vetia e qartë:
- .majtas (float:majtas;)
- .djathtas (float:djathtas)
- fundi i faqes (e qartë: të dyja)
Fakti është se blloqet me klasat majtas dhe djathtas bien jashtë rrjedhës së përgjithshme, domethënë, të gjithë elementët e tjerë injorojnë vetë ekzistencën e elementeve të rreshtuar. Karakteristika e qartë: të dyja lejon që fundi ose çdo bllok tjetër të shohë elementët që kanë rënë nga rrjedha dhe ndalon notimin në të majtë dhe në të djathtë. Prandaj, në shembullin tonë, futeri do të lëvizë poshtë.
Rreshtimi vertikal
Ka raste kur nuk mjafton të vendosni shtrirjen qendrore duke përdorur metodat CSS; gjithashtu duhet të ndryshoni pozicionin vertikal të bllokut të fëmijëve. Çdo element inline ose inline-block mund të vendoset në skajin e sipërm ose të poshtëm, në mes të një elementi prind ose në çdo vendndodhje. Më shpesh, blloku duhet të përafrohet në qendër; për këtë, përdoret atributi vertikal-align. Le të themi se ka dy blloqe, njëri i vendosur brenda tjetrit. Në këtë rast, blloku i brendshëm është një element inline-block (ekrani: inline-block). Ju duhet të rreshtoni bllokun e fëmijëve vertikalisht:
- shtrirje në krye - .fëmijë (vertical-align:lart);
- shtrirje në qendër - .fëmijë(vertikal-linjë: në mes);
- shtrirje nga fundi - .fëmijë(vertikal-linjë:poshtë);
As rreshtimi i tekstit dhe as ai vertikal nuk ndikon në elementët e bllokut.
Probleme të mundshme me blloqet e rreshtuara
Ndonjëherë përqendrimi i një div duke përdorur CSS mund të shkaktojë pak probleme. Për shembull, kur përdorni float: le të themi se ka tre blloqe: .first, .second dhe .third. Blloqet e dyta dhe të treta shtrihen në të parën. Elementi me klasën e dytë është rreshtuar majtas, dhe blloku i fundit është rreshtuar djathtas. Pas nivelimit, të dy ranë nga rrjedha. Nëse elementi prind nuk ka një lartësi të caktuar (për shembull, 30em), atëherë ai nuk do të shtrihet më në lartësinë e blloqeve të tij fëmijë. Për të shmangur këtë gabim, përdorni një "spacer" - një bllok special që sheh .second dhe .tretë. Kodi CSS:
- .sekond (float:majtas)
- .tretë (float:djathtas)
- .clearfix(lartësia:0; qartë: të dyja;)
Përdoret shpesh pseudo-class:after, i cili gjithashtu ju lejon të ktheni blloqet në vendin e tyre duke krijuar një pseudo-space (në shembull, një div me klasën e kontejnerit shtrihet brenda.first dhe përmban.majtë dhe djathtas) :
- .left(float:majtas)
- .djathtas (float:djathtas)
- .container:after(përmbajtja:""; shfaq:tabelë; qartë:të dyja;)
Opsionet e mësipërme janë më të zakonshmet, megjithëse ka disa variacione. Ju gjithmonë mund të gjeni mënyrën më të thjeshtë dhe më të përshtatshme për të krijuar një pseudo-hapësirë përmes eksperimentimit.
Një problem tjetër që shpesh hasin dizajnerët e paraqitjes është shtrirja e elementeve të blloqeve inline. Një hapësirë shtohet automatikisht pas secilës prej tyre. Vetia e marzhit, e cila është vendosur në një ndarje negative, ndihmon për të përballuar këtë. Ka metoda të tjera që përdoren shumë më rrallë: p.sh., zeroing.Në këtë rast, font-size: 0 shkruhet në vetitë e elementit prind. Nëse ka tekst brenda blloqeve, atëherë madhësia e kërkuar e shkronjave është kthyer tashmë në vetitë e elementeve të blloqeve inline. Për shembull, madhësia e shkronjave: 1em. Kjo metodë nuk është gjithmonë e përshtatshme, kështu që opsioni me dhëmbëza të jashtme përdoret shumë më shpesh.
Përafrimi i blloqeve ju lejon të krijoni faqe të bukura dhe funksionale: kjo përfshin paraqitjen e paraqitjes së përgjithshme, rregullimin e produkteve në dyqanet online dhe fotografitë në faqen e internetit të kartës së biznesit.
Shtrirja e tekstit përcakton pamjen e tij dhe orientimin e skajeve të paragrafit dhe mund të jetë majtas, djathtas, në qendër ose të justifikuar. Në tabelë Figura 1 tregon opsionet për rreshtimin e një blloku teksti.
| Rreshtimi majtas | Shtrirja e djathtë | Shtrirja në qendër | Justifikim |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Opsioni më i zakonshëm është rreshtimi majtas, ku teksti në të majtë shtyhet në skaj ndërsa teksti në të djathtë mbetet i dehur. Shtrirja djathtas dhe qendra përdoret kryesisht në titujt dhe nëntitujt. Mbani në mend se kur përdorni justifikimin, mund të shfaqen hapësira të mëdha midis fjalëve në tekst, gjë që nuk është shumë tërheqëse.
Etiketa e paragrafit përdoret zakonisht për të vendosur shtrirjen e tekstit
Me atributin align, i cili specifikon metodën e shtrirjes. Është gjithashtu e mundur të rreshtoni një bllok teksti duke përdorur një etiketë
| Kodi HTML | Përshkrim |
|---|---|
| Shton një paragraf të ri të tekstit, majtas rreshtuar si parazgjedhje. Ndarjet e vogla vertikale shtohen automatikisht para dhe pas paragrafëve. | |
Teksti |
Shtrirja në qendër. |
Teksti |
Rreshtimi majtas. |
Teksti |
|
Teksti |
Shtrirja e gjerësisë. |
| Çaktivizon mbështjelljen automatike të linjës, edhe nëse teksti është më i gjerë se dritarja e shfletuesit. | |
| Teksti |
Lejon shfletuesin të thyejë një rresht në vendndodhjen e specifikuar, edhe nëse përdoret një etiketë |
Teksti
|
Shtrirja në qendër. |
Teksti
|
Rreshtimi majtas. |
Teksti
|
Shtrirja e djathtë. |
Teksti
|
Shtrirja e gjerësisë. |
Shtrirja majtas e elementeve është vendosur si parazgjedhje, kështu që nuk ka nevojë ta specifikoni përsëri. Pra, align="majtas" mund të hiqet.
Dallimi midis paragrafit (etiketa
) dhe tag
Atributi align është mjaft universal dhe mund të zbatohet jo vetëm në tekstin kryesor, por edhe në tituj si
. Shembulli 1 tregon se si të vendosni shtrirjen në një rast të tillë.
Shembulli 1: Rreshtimi i tekstit
Si të kapni një luan?
Metoda e forcës brutale
Ne e ndajmë shkretëtirën në një numër zonash elementare, madhësia e të cilave përkon me dimensionet e përgjithshme të luanit, por është më e vogël se madhësia e kafazit. Më pas, me kërkim të thjeshtë përcaktojmë zonën në të cilën ndodhet luani, gjë që automatikisht çon në kapjen e tij.
Metoda e dikotomisë
E ndajmë shkretëtirën në dy gjysma. Në njërën pjesë ka një luan, në tjetrën nuk ka asnjë. Marrim gjysmën në të cilën ndodhet luani dhe e ndajmë sërish përgjysmë. E përsërisim këtë derisa luani të kapet.
Rezultati i shembullit është paraqitur në Fig. 1.
Oriz. 1. Lidhni tekstin djathtas dhe majtas
Në këtë shembull, titulli është rreshtuar në qendër të dritares së shfletuesit, paragrafi i theksuar është rreshtuar në të djathtë dhe teksti i trupit është rreshtuar në të majtë.
Ka disa mënyra thelbësisht të ndryshme për të përqendruar një objekt vertikalisht duke përdorur CSS, por zgjedhja e duhur mund të jetë e ndërlikuar. Ne do të shikojmë disa prej tyre dhe gjithashtu do të krijojmë një uebsajt të vogël duke përdorur njohuritë e marra.
Rreshtimi i qendrës vertikale nuk është i lehtë për t'u arritur duke përdorur CSS. Ka shumë mënyra dhe jo të gjitha funksionojnë në të gjithë shfletuesit. Le të shohim 5 metoda të ndryshme dhe të mirat dhe të këqijat e secilës. Shembull.
Metoda 1
Kjo metodë supozon se kemi vendosur disa elementë
pro
- Përmbajtja mund të ndryshojë lartësinë në mënyrë dinamike (lartësia nuk përcaktohet në CSS).
- Përmbajtja nuk ndërpritet 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, me lart të vendosur në 50% dhe marzh-lart 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 një div që përmban përmbajtje, kështu, nëse përmbajtja nuk përshtatet, do të shfaqen shiritat e lëvizjes.
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 i ka bërë dritaret më të vogla, 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-bottom:-contentheight;). Përmbajtja do të pastrohet dhe do të jetë në qendër.
pro
- Punon në të gjithë shfletuesit.
- Kur nuk ka hapësirë të mjaftueshme (për shembull, kur dritarja zvogëlohet), përmbajtja nuk pritet, do të shfaqen shiritat e lëvizjes.
Minuset
- Mund të mendoj vetëm për një gjë: që po përdoret një element shtesë bosh.
Metoda e 4-të.
Kjo metodë përdor pozicionin:absolute; pronë. për një div me dimensione fikse (gjerësia dhe lartësia). Më pas vendosim koordinatat e tij në krye:0; fund: 0; , por meqenëse ka një lartësi fikse, nuk mund të shtrihet dhe është në linjë 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;).
pro
- Shume e thjeshte.
Minuset
- Nuk funksionon në Internet Explorer
- Përmbajtja do të ndërpritet pa shirita lëvizjeje nëse nuk ka hapësirë të mjaftueshme në kontejner.
Metoda e 5-të
Duke përdorur këtë metodë, mund të rreshtoni në qendër një rresht teksti. Thjesht vendosim lartësinë e tekstit (lartësia e rreshtit) të barabartë me lartësinë e elementit (lartësia). Pas kësaj, linja do të shfaqet në qendër.
pro
- Punon në të gjithë shfletuesit.
- Nuk e ndërpret tekstin nëse nuk përshtatet.
Minuset
- Punon vetëm me tekst (nuk funksionon me elemente blloku).
- Nëse ka më shumë se një rresht teksti, duket shumë keq.
Kjo metodë është shumë e dobishme për elementë të vegjël, si përqendrimi i tekstit në një buton ose fushë teksti.
Tani ju e dini se si të arrini shtrirjen vertikale të qendrës, le të bëjmë një faqe interneti të thjeshtë që do të përfundojë kështu:
Hapi 1
Është gjithmonë mirë të filloni me shënimin semantik. Faqja jonë do të strukturohet si më poshtë:
- #floater (në qendër përmbajtjen)
- #centred (element qendror)
- #ana
- #logo
- #nav (lista
- #përmbajtje
- #poshtë (për të drejtat e autorit dhe gjithçka tjetër)
Le të shkruajmë shënimin e mëposhtëm html:
Një kompani e përqendruar Një kompaniTitulli i faqes
Ri-inxhinieroni në mënyrë holistike kontraktimin me vlerë të shtuar pas bashkëpunimit të përqendruar në procesin 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ë prodhuara më të avancuara. 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ë vendosur elementë në faqe. Ju duhet ta ruani këtë kod në një skedar style.css. Është për këtë që lidhja është shkruar 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; notimi: majtas; lartësia: 50%; margjina e poshtme: -200 px; gjerësia: 1 px; ) #qendër ( pozicioni: relative; qartë: majtas; lartësia: 400 px; gjerësia: 80%; maksimumi -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 ta bëjmë qendrën tonë të përmbajtjes në linjë, duhet të vendosim lartësinë e trupit dhe html në 100%. Meqenëse lartësia llogaritet pa mbushje të brendshme dhe të jashtme (mbushje dhe diferencë), i vendosim ato (mbushje) në 0 në mënyrë që të mos ketë shirita lëvizës.
Marzhi i poshtëm për një element "floater" është i barabartë me minus gjysmën e lartësisë së përmbajtjes (400px), domethënë -200px;
Faqja juaj tani duhet të duket diçka si kjo:
#gjerësia e elementit në qendër 80%. Kjo e bën faqen tonë më të ngushtë në ekranet e vegjël dhe më të gjerë në ato më të mëdha. shumica e faqeve duken të pahijshme në monitorët e rinj të gjerë në këndin e sipërm majtas. 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 veti. Ju duhet ta vendosni atë në një gjerësi fikse.
Meqenëse elementi #qendër ka pozicion: grup relativ, 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ëse përmbajtja nuk përshtatet.
Hapi 3
Gjëja e fundit që do të bëjmë është të shtojmë një stil 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; indenti i tekstit: 0; ) #nav li ( mbushja: 0; margjina: 3 px; ) #nav li a ( shfaqja: 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::after ( përmbajtja: """; ngjyra: #aaa; pesha e shkronjave: bold; shfaqja: inline; noton: djathtas; margjina: 0 2px 0 5px; ) #nav li a:hover, #nav li a:focus ( sfond: # f8f8f8; kufiri-fund-ngjyra: #777; ) #nav li a:hover::after ( margjina: 0 0 0 7px; ngjyra: #f93; ) #nav li a:active ( 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 list-style:asnjë, dhe gjithashtu vendosëm mbushjen dhe mbushjen, pasi ato ndryshojnë shumë si parazgjedhje në shfletues të ndryshëm.
Vini re se më pas specifikuam se lidhjet duhet të paraqiten si elemente 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ë pseudo-klasat:para dhe:pas. Ato ju lejojnë të shtoni diçka 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
Dhe së fundi, por jo më pak e rëndësishme, ne do të shtojmë disa vida në dizajnin tonë për edhe më shumë bukuri.
#qendër ( -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-fundi: 1px 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: 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 vendosim kënde të rrumbullakosura për elementin #cented. Në CSS3, kjo do të bëhet nga vetia e rrezes kufitare. Kjo nuk është zbatuar ende në disa shfletues, përveç përdorimit të prefikseve -moz dhe -webkit për Mozilla Firefox dhe Safari/Webkit.
Përputhshmëria
Siç e keni menduar tashmë, burimi kryesor i problemeve të përputhshmërisë është Internet Explorer:
- Elementi #floater duhet të ketë një grup të gjerësi
- IE 6 ka mbushje shtesë rreth menyve
237154 shikime
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ë kishte një etiketë
Nuk ju këshilloj ta përdorni tani, për shkak të disponueshmërisë së metodave më moderne, por nuk mund të mos e përmend. Ë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ë
, e cila tashmë është e vjetëruar, përveç kësaj, në kundërshtim me pritjet tuaja për etiketat , por ajo e duhura? Për të zgjidhur këtë problem, zhvilluesit dolën me një mënyrë universale për të lidhur elementët HTML. Metoda është përdorimi i të ashtuquajturave kontejnerë, të cilët krijohen duke përdorur etiketën
. Kjo do të thotë, gjithçka që duhet të vendoset në një enë specifike vendoset brenda etiketës. Dhe kjo etiketë tashmë ka atributin " rreshtoj", vlera e së cilës përcakton pozicionin e këtij kontejneri. Janë tre vlera: " majtas", "qendër", "drejtë". Si parazgjedhje, është " majtas“Megjithatë, mendoj se kjo nuk ju habit.Le të shkruajmë të njëjtën gjë tani Kodi 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 të ndryshoni edhe vlerat e atributit " rreshtoj" për të parë llojet e tjera të shtrirjes së përmbajtjes së kontejnerëve.
Një mënyrë tjetër për të rreshtuar elementët HTML- këto janë tabela, por kjo temë meriton një diskutim të veçantë, kështu që ne do të flasim për të në një nga artikujt e mëposhtëm.
Tani për tani, faqja juaj duhet të duket si kjo:
Titulli i nivelit të parë, i përafruar në qendër
Titulli i nivelit të parë, i rreshtuar djathtas
Sinqerisht, Mikhail Rusakov.
P.S. Nëse dëshironi të dini më shumë rreth HTML, pastaj hidhini një sy kursit tim falas me një shembull të krijimit të një faqe interneti në HTML:
Shumë shpesh detyra është të rreshtoni një bllok në qendër të faqes / ekranit, madje edhe në mënyrë që pa një skript Java, pa vendosur dimensione të ngurta ose dhëmbëza negative, dhe në mënyrë që shiritat lëvizës të funksionojnë për prindin nëse blloku tejkalon madhësinë e tij . Ka shumë shembuj monotonë në internet se si të rreshtoni një bllok në qendër të ekranit. Si rregull, shumica e tyre bazohen në të njëjtat parime.
Më poshtë janë mënyrat kryesore për të zgjidhur problemin, të mirat dhe të këqijat e tyre. Për të kuptuar thelbin e shembujve, unë rekomandoj zvogëlimin e lartësisë/gjerësisë së dritares Rezultati në shembujt në lidhjet e dhëna.Opsioni 1: Dhënie negative.
Pozicionimi bllokoj duke përdorur atributet e sipërme dhe të majta me 50%, dhe duke ditur lartësinë dhe gjerësinë e bllokut paraprakisht, vendosni një diferencë negative, e cila është e barabartë me gjysmën e madhësisë bllokoj. Një disavantazh i madh i këtij opsioni është se ju duhet të numëroni pika negative. Gjithashtu bllokoj nuk sillet mjaft saktë kur rrethohet nga shirita lëvizës - thjesht është i prerë sepse ka margjina negative.Prindi ( gjerësia: 100%; lartësia: 100%; pozicioni: absolute; lart: 0; majtas: 0; tejmbushja: automatik; ) .blloku ( gjerësia: 250 px; lartësia: 250 px; pozicioni: absolute; lart: 50%; majtas : 50%; diferenca: -125 px 0 0 -125 px; img (gjerësia maksimale: 100%; lartësia: automatik; ekrani: bllok; diferenca: 0 automatik; kufiri: asnjë; ) )
Opsioni 2. Dhënie automatike.
Më pak e zakonshme, por e ngjashme me të parën. Për bllokoj vendosim gjerësinë dhe lartësinë, pozicionojmë atributet lart djathtas poshtë majtas në 0 dhe vendosim margjinën automatike. Avantazhi i këtij opsioni është funksionimi i shiritave të lëvizjes prind, nëse kjo e fundit ka 100% gjerësi dhe lartësi. Disavantazhi i kësaj metode është vendosja e ngurtë e dimensioneve.Prindi ( gjerësia: 100%; lartësia: 100%; pozicioni: absolute; lart: 0; majtas: 0; tejmbushja: automatik; ) .blloku ( gjerësia: 250 px; lartësia: 250 px; pozicioni: absolute; lart: 0; djathtas: 0; poshtë: 0; majtas: 0; kufiri: automatik; img (gjerësia maksimale: 100%; lartësia: automatike; ekrani: bllok; margjina: 0 automatik; kufiri: asnjë; ) )
Opsioni 3. Tabela.
Le te pyesim prind stilet e tabelave, qeliza prind Vendosni shtrirjen e tekstit në qendër. A bllokoj vendosim modelin e bllokut të linjës. Disavantazhet që marrim janë shiritat lëvizës që nuk funksionojnë, dhe në përgjithësi, estetika e "emulimit" të tabelës nuk është.Prindi ( gjerësia: 100%; lartësia: 100%; ekrani: tabela; pozicioni: absolut; lart: 0; majtas: 0; > .inner ( shfaqja: qeliza e tabelës; rreshtimi i tekstit: në qendër; rreshtimi vertikal: në mes; ) ) .block (ekrani: inline-block; img (ekrani: bllok; kufiri: asnjë; ) )
Për të shtuar një rrotull në këtë shembull, do t'ju duhet të shtoni një element më shumë në dizajn.
Shembull: jsfiddle.net/serdidg/fk5nqh52/3.Opsioni 4. Pseudo-element.
Ky opsion është i lirë nga të gjitha problemet e listuara në metodat e mëparshme, dhe gjithashtu zgjidh problemet origjinale. Çështja është se prind vendos stile pseudo element më parë, përkatësisht lartësia 100%, modeli i shtrirjes qendrore dhe i blloqeve inline. Është e njëjta gjë me bllokoj vendoset një model i bllokut të linjës, i përqendruar. te bllokoj nuk "ra" nën pseudo element, kur dimensionet e të parit janë më të mëdha se prind, tregoni prind hapësira e bardhë: nowrap dhe madhësia e shkronjave: 0, pas së cilës bllokoj anuloni këto stile me sa vijon - hapësirë e bardhë: normale. Në këtë shembull, madhësia e shkronjave: 0 nevojitet për të hequr hapësirën që rezulton ndërmjet prind Dhe bllokoj për shkak të formatimit të kodit. Hapësira mund të hiqet në mënyra të tjera, por konsiderohet më mirë që thjesht ta shmangni atë.Prindi ( gjerësia: 100%; lartësia: 100%; pozicioni: absolute; lart: 0; majtas: 0; tejmbushja: automatik; hapësira e bardhë: nowrap; rreshtimi i tekstit: në qendër; madhësia e shkronjave: 0; &: para ( lartësia: 100%; ekrani: blloku i brendshëm; rreshtimi vertikal: mes; përmbajtja: ""; ) .blloku ( shfaqja: blloku i linjës; hapësira e bardhë: normale; rreshtimi vertikal: në mes; rreshtimi i tekstit: majtas ; img (ekrani: bllok; kufiri: asnjë; ) )
Ose, nëse keni nevojë që prindi të marrë vetëm lartësinë dhe gjerësinë e dritares, dhe jo të gjithë faqen:
Prindi ( pozicioni: fiks; lart: 0; djathtas: 0; poshtë: 0; majtas: 0; tejmbushje: automatik; hapësira e bardhë: nowrap; rreshtimi i tekstit: në qendër; madhësia e shkronjave: 0; &:përpara (lartësia: . shfaqja: bllok; kufiri: asnjë;))
Opsioni 5. Flexbox.
Një nga mënyrat më të thjeshta dhe më elegante është përdorimi i flexbox. Nuk kërkon lëvizje të panevojshme të trupit, përshkruan mjaft qartë thelbin e asaj që po ndodh dhe është shumë fleksibël. E vetmja gjë që ia vlen të mbani mend kur zgjidhni këtë metodë është mbështetja për IE nga versioni 10 përfshirës. caniuse.com/#feat=flexboxPrindi ( gjerësia: 100%; lartësia: 100%; pozicioni: fiks; lart: 0; majtas: 0; ekrani: përkul; rreshtoj-artikujt: qendër; rreshtim-përmbajtje: qendër; justifiko-përmbajtje: qendër; tejmbushje: automatik; ) .block ( sfond: #60a839; img (ekrani: bllok; kufiri: asnjë; ) )
Opsioni 6. Transformimi.
I përshtatshëm nëse jemi të kufizuar nga struktura dhe nuk ka asnjë mënyrë për të manipuluar elementin prind, por blloku duhet të përafrohet disi. Funksioni css translate() do të vijë në shpëtim. Një vlerë prej 50% pozicionimi absolut do të pozicionojë këndin e sipërm majtas të bllokut pikërisht në qendër, më pas një vlerë negative e përkthimit do ta lëvizë bllokun në lidhje me dimensionet e tij. Ju lutemi vini re se efektet negative mund të shfaqen në formën e skajeve të paqarta ose të stilit të shkronjave. Gjithashtu, kjo metodë mund të çojë në probleme me llogaritjen e pozicionit të bllokut duke përdorur java-script. Ndonjëherë, për të kompensuar humbjen e 50% të gjerësisë për shkak të përdorimit të pronës së majtë CSS, rregulli i specifikuar për bllokun mund të ndihmë: marzh-djathtas: -50%; .Prindi ( gjerësia: 100%; lartësia: 100%; pozicioni: fiks; lart: 0; majtas: 0; tejmbushja: automatik; ) .blloku ( pozicioni: absolut; lart: 50%; majtas: 50%; transformimi: përkthe( -50%, -50%); img (ekrani: bllok; ) )
Opsioni 7. Butoni.
Opsioni i përdoruesit ku bllokoj përshtatur në një etiketë butoni. Butoni ka vetinë të përqendrojë gjithçka që ndodhet brenda tij, përkatësisht elementet e modelit inline dhe block-line (inline-block). Në praktikë nuk e rekomandoj përdorimin e tij.Prindi ( gjerësia: 100%; lartësia: 100%; pozicioni: absolut; lart: 0; majtas: 0; tejmbushja: automatik; sfondi: asnjë; kufiri: asnjë; skica: asnjë; ) .blloku ( shfaqja: blloku i brendshëm; img (ekrani: bllok;; kufiri: asnjë; ) )
Bonus
Duke përdorur idenë e opsionit të 4-të, mund të vendosni kufij të jashtëm për bllokoj, dhe kjo e fundit do të shfaqet në mënyrë adekuate e rrethuar nga shirita lëvizës.
Shembull: jsfiddle.net/serdidg/nfqg9rza/2.Ju gjithashtu mund ta rreshtoni imazhin në qendër, dhe nëse imazhi është më i madh prind, shkallëzoni atë në madhësi prind.
Shembull: jsfiddle.net/serdidg/nfqg9rza/3.
Shembull me një foto të madhe: - #ana
