Rreshtimi i div. Rreshtimi vertikal në div

Vlad Merzheviç

Për shkak të faktit se përmbajtja e qelizave të tabelës mund të rreshtohet njëkohësisht horizontalisht dhe vertikalisht, mundësitë për të kontrolluar pozicionin e elementeve në lidhje me njëri-tjetrin zgjerohen. Tabelat ju lejojnë të vendosni rreshtimin e imazheve, tekstit, fushave të formës dhe elementeve të tjerë në lidhje me njëra-tjetrën dhe faqen e internetit në tërësi. Në përgjithësi, shtrirja është kryesisht e nevojshme për të vendosur lidhje vizuale midis elementeve të ndryshëm, si dhe për t'i grupuar ato së bashku.

Përqendrimi vertikal

Një mënyrë për t'i treguar vizitorit fokusin dhe emrin e faqes është të përdorni një faqe splash. Kjo është faqja e parë në të cilën, si rregull, ka një ekran të ndezur ose një foto që shpreh idenë kryesore të faqes. Imazhi është gjithashtu një lidhje me seksionet e tjera të faqes. Ju duhet ta vendosni këtë imazh në qendër të dritares së shfletuesit, pavarësisht nga rezolucioni i monitorit. Për këtë qëllim, mund të përdorni një tabelë me gjerësi dhe lartësi 100% (shembulli 1).

Shembulli 1: Përqendrimi i vizatimit

TABELA e shtrirjes ( gjerësia: 100%; /* Gjerësia e tabelës */ lartësia: 100%; /* Lartësia e tabelës */ )

Në këtë shembull, shtrirja horizontale vendoset duke përdorur parametrin e etiketës align="center". , dhe përmbajtja e qelizës mund të mos përqendrohet vertikalisht, pasi ky është pozicioni i paracaktuar.

Për të vendosur lartësinë e tabelës në 100%, duhet të hiqni , kodi nuk do të jetë më i vlefshëm.

Përdorimi i gjerësisë dhe lartësisë për të mbuluar të gjithë zonën e disponueshme të faqes së internetit siguron që përmbajtja e tabelës do të rreshtohet saktësisht në qendër të dritares së shfletuesit, pavarësisht nga madhësia e saj.

Rreshtimi horizontal

Duke kombinuar atributet align (rreshtimi horizontal) dhe valign (drejtimi vertikal) të etiketës , lejohet të vendosen disa lloje pozicionesh të elementeve në raport me njëri-tjetrin. Në Fig. Figura 1 tregon mënyrat për të rreshtuar elementët horizontalisht.

Le të shohim disa shembuj të shtrirjes së tekstit sipas figurës më poshtë.

Rreshtimi në krye

Për të specifikuar shtrirjen e sipërme të përmbajtjes së qelizës, për një etiketë ju duhet të vendosni atributin valign me vlerën lart (shembulli 2).

Shembulli 2: Përdorimi i valign

Rreshtimi

Kolona 1

Kolona 2

Në këtë shembull, karakteristikat e qelizave kontrollohen duke përdorur parametrat e etiketës , por është gjithashtu më i përshtatshëm për të ndryshuar përmes stileve.

Në veçanti, rreshtimi në qeliza specifikohet nga vetitë vertikale dhe rreshtimi i tekstit (shembulli 3).

Shembulli 3: Aplikimi i stileve për shtrirje

Kolona 1

Kolona 2

TABELA e shtrirjes ( gjerësia: 100%; /* Gjerësia e tabelës */ ) #col1 ( gjerësia: 75%; /* Gjerësia e kolonës së parë */ sfondi: #f0f0f0; /* Ngjyra e sfondit të kolonës së parë */ ) #col2 ( gjerësia: 25 %; ;

Për të shkurtuar kodin, ky shembull përdor grupimin e përzgjedhësve sepse vetitë vertikale të rreshtimit dhe mbushjes aplikohen në dy qeliza në të njëjtën kohë.

Rreshtimi nga poshtë bëhet në të njëjtën mënyrë, por në vend të vlerës së sipërme, përdoret fundi.

Shtrirja në qendër

Si parazgjedhje, përmbajtja e qelizës është rreshtuar në qendër të vijës së tyre vertikale, kështu që nëse kolonat kanë lartësi të ndryshme, duhet të vendosni shtrirjen në skajin e sipërm.

Ndonjëherë ju ende duhet të lini metodën origjinale të shtrirjes, për shembull, kur vendosni formula, siç tregohet në Fig. 2.

Rreshtimi

(18.6)

Në këtë rast, formula është e vendosur rreptësisht në qendër të dritares së shfletuesit, dhe numri i saj ndodhet në skajin e djathtë. Për të rregulluar elementët në këtë mënyrë, do t'ju duhet një tabelë me tre qeliza. Qelizat më të jashtme duhet të kenë të njëjtat dimensione, në qelizën e mesme shtrirja bëhet në qendër, dhe në të djathtë - përgjatë skajit të djathtë (shembulli 4). Ky numër qelizash kërkohet për të siguruar që formula të jetë e pozicionuar në qendër.

Shembulli 4: Përafrimi i formulës

Në këtë shembull, qeliza e parë e tabelës është lënë bosh, ajo shërben vetëm për të krijuar një indent, i cili, meqë ra fjala, mund të vendoset edhe duke përdorur stile.

Përafrimi i elementeve të formës

Duke përdorur tabela, është e përshtatshme të përcaktohet pozicioni i fushave të formës, veçanërisht kur ato janë të ndërthurura me tekst. Një nga opsionet e projektimit për formularin, i cili ka për qëllim futjen e një komenti, është paraqitur në Fig. 3.

Për t'u siguruar që teksti pranë fushave të formularit është i rreshtuar djathtas dhe vetë elementët e formularit janë të rreshtuar majtas, do t'ju duhet një tabelë me një kufi të padukshëm dhe dy kolona. Kolona e majtë do të përmbajë vetë tekstin dhe kolona e djathtë do të përmbajë fusha teksti (shembulli 5).

Shembulli 5: Përafrimi i fushave të formularit
Rreshtimi
Emri

Në këtë shembull, për ato qeliza ku kërkohet rreshtimi djathtas, shtohet atributi align="right".

Për t'u siguruar që etiketa e komentit të jetë e pozicionuar në krye të tekstit me shumë rreshta, qeliza përkatëse vendoset në rreshtimin lart duke përdorur atributin valign.

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 që ne vendosim disa elementë për t'u shfaqur si tabelë, atëherë mund të përdorim veçorinë vertikale të rreshtimit në të (e cila funksionon ndryshe në elementë të ndryshëm).

Disa informacione të dobishme që duhet të përqendrohen.

• #wrapper( shfaqja: tabela; ) #cell (ekrani: qeliza e tabelës; rreshtimi vertikal: në mes; )
• 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ë.
• Kundër

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.

Disa informacione të dobishme që duhet të përqendrohen.

• 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.
• Përmbajtja Këtu #content ( pozicioni: absolute; lart: 50%; lartësia: 240 px; margjina e sipërme: -120 px; /* minus gjysma e lartësisë */ )

Përmbajtja mund të ndryshojë lartësinë në mënyrë dinamike (lartësia nuk përcaktohet në CSS).

• Punon në të gjithë shfletuesit.

Nuk ka fole të panevojshme.

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.

këtu është përmbajtja #floater( float: majtas; lartësia: 50%; margjina e poshtme: -120 px; ) #content (e qartë: të dyja; lartësia: 240 px; pozicioni: relative; )

Disa informacione të dobishme që duhet të përqendrohen.

• 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.
• 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.

Përmbajtja mund të ndryshojë lartësinë në mënyrë dinamike (lartësia nuk përcaktohet në CSS).

• 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 vetinë e pozicionit:absolute; 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;).

Informacion i rëndësishëm.

Disa informacione të dobishme që duhet të përqendrohen.

• #content( pozicioni: absolute; lart: 0; poshtë: 0; majtas: 0; djathtas: 0; margjina: automatik; lartësia: 240 px; gjerësia: 70%; )

Përmbajtja mund të ndryshojë lartësinë në mënyrë dinamike (lartësia nuk përcaktohet në CSS).

• Shumë e thjeshtë.
• 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.

Disa informacione të dobishme që duhet të përqendrohen.

• 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.
• Disa rreshta të tekstit #content (lartësia: 100 px; lartësia e rreshtit: 100 px; )

Përmbajtja mund të ndryshojë lartësinë në mënyrë dinamike (lartësia nuk përcaktohet në CSS).

• Nuk e ndërpret tekstin nëse nuk përshtatet.
• 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, të tillë 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 me qendër Një kompani
  • Shtëpi
  • Produktet
  • Blog
  • Kontaktoni
  Rreth

  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ë 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ë 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: 800px: 0 diferencë automatike: 4px solid #666 ) #poshtë: 0; djathtas: 0; Mbushje: 20px;

  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.

  

  #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; diferenca: 20 px 0 0 0; indenti i tekstit: 0; ) #nav li ( mbushja: 0; margjina: 3 px; ) #nav li a ( shfaqja: bllok; background-color: #e8e8e8 margin: 0 border-bottom: 1px solid: """; font-weight: bold;float: right;f8f8f8; : #777;

  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- font-pesha: normale: #666 ) h1 (ngjyra: #f93; kufiri-fund: 1px solid #ddd; gërma-pesha: bold; margin-lart: 0; mbushje-lart: 0; 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 gjerësie
  • IE 6 ka mbushje shtesë rreth menyve

  237152 shikime

  Mirëdita, abonentë dhe lexues të këtij botimi. Sot dua të hyj në detaje dhe t'ju tregoj se si ta përqendroni tekstin në CSS. Në disa artikuj të mëparshëm, në mënyrë indirekte kam prekur këtë temë, kështu që ju keni disa njohuri në këtë fushë.

  Sidoqoftë, në këtë botim do t'ju tregoj për të gjitha mënyrat e ndryshme për të rreshtuar objektet, dhe gjithashtu do t'ju shpjegoj se si të futni dhe vizatoni paragrafët. Pra, le të fillojmë të mësojmë materialin!

  Html dhe pasardhësit e tij dhe përafroni

  Kjo metodë pothuajse nuk përdoret kurrë, pasi është zëvendësuar nga mjetet e fletëve të stilit kaskadë. Sidoqoftë, të dish që një etiketë e tillë ekziston nuk do t'ju dëmtojë.

  Sa i përket vërtetimit (ky term përshkruhet në detaje në artikullin ""), vetë specifikimi html dënon përdorimin< center>, pasi për vlefshmëri është e nevojshme të përdoret DOCTYPE kalimtare> .

  Ky lloj lejon kalimin e elementeve të ndaluar.

  QENDRA

  Kjo përmbajtje do të jetë në qendër.

  Ju lutemi vini re se për imazhin atributi që po analizojmë ka kuptime paksa të ndryshme.

  Në shembull kam përdorur align=" mes" . Falë kësaj, imazhi u rreshtua në mënyrë që fjalia të vendosej qartë në mes të figurës.

  Mjetet e përqendrimit në css

  Karakteristikat CSS të krijuara për të lidhur blloqet, tekstin dhe përmbajtjen grafike përdoren shumë më shpesh. Kjo është kryesisht për shkak të komoditetit dhe fleksibilitetit të stileve të zbatimit.

  Pra, le të fillojmë me vetinë e parë të përqendrimit të tekstit - text-align.

  Funksionon në të njëjtën mënyrë si align in. Ndër fjalë kyçe, ju mund të zgjidhni një nga lista e përgjithshme ose të trashëgoni karakteristikat e një paraardhësi (trashëgoni).

  Dua të vërej se në css3 mund të vendosni edhe 2 parametra të tjerë: start - në varësi të rregullave të shkrimit të tekstit (nga e djathta në të majtë ose anasjelltas) vendos shtrirjen majtas ose djathtas (e ngjashme me punën e majtë ose të djathtë ) dhe fundi - e kundërta e fillimit (kur shkruani tekst nga e majta në të djathtë funksionon si djathtas, kur shkruhet nga e djathta në të majtë - majtas).

  text-align div (kufiri: 5px e kuqe e dyfishtë; mbushja: 0 22px 0 22px; ) #l (lidhja e tekstit: djathtas; ) #s (radhitja e tekstit: fundi; )

  Fjalia në të djathtë

  Fjalia duke përdorur fundin

  Unë do t'ju tregoj për një mashtrim të vogël. Kur zgjidhet justifikimi, rreshti i fundit mund të varet në mënyrë jo tërheqëse nga fundi. Për ta vendosur, për shembull, në qendër, mund të përdorni veçorinë text-align-last.

  Për të lidhur përmbajtjen e sajtit ose qelizat e tabelës vertikalisht, përdorni veçorinë vertikale-linjë. Më poshtë kam përshkruar fjalët kyçe të elementit.

  Fjalë kyçe	Qëllimi
  bazë	Përcakton shtrirjen në një linjë paraardhëse, e quajtur vija bazë. Nëse objekti paraardhës nuk ka një vijë të tillë, atëherë shtrirja ndodh përgjatë kufirit të poshtëm.
  e mesme	Mesi i objektit të mutuar është rreshtuar me vijën bazë, së cilës i shtohet dyshemeja e lartësisë së elementit mëmë.
  fund	Pjesa e poshtme e përmbajtjes së zgjedhur përshtatet në fund të objektit poshtë saj.
  krye	Ngjashëm me pjesën e poshtme, por me pjesën e sipërme të objektit.
  super	Bën mbishkrimin e personazhit.
  nën	E bën elementin të nënshkruhet.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

  vertikal-drejtuar LULE

  rreshtimi vertikal div( madhësia e shkronjave: 4em; rreshtimi i tekstit: në qendër; dekorimi i tekstit: nënvizoni; ) #A(rreshtoj vertikalisht: lart;) #B(rreshtim vertikal: i mesëm;) #C(rreshtoj vertikalisht : super;) #D(vertikal-rreshtoj: nën;) LULE

  Indentacionet

  Dhe së fundi vijmë te pikat e paragrafit. Gjuha CSS përdor një veçori të veçantë të quajtur text-indent.

  Me ndihmën e tij mund të bëni si një vijë të kuqe ashtu edhe një zgjatje (duhet të specifikoni një vlerë negative).

  teksti-indent #a (indent-teksti: 53 px; ) #b (indent-teksti: -43px; ) div ( sfondi: #FFDAB9; gjerësia: 35%; madhësia e shkronjave: 29 px; margjina majtas: 30%; mbushje -majtas:50px;

  Për të krijuar një vijë të kuqe duhet të dini vetëm një parametër.

  Kjo është vetia e thjeshtë e tekstit-indent.

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

  Marzhi i shtrirjes horizontale: automatik

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

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

  Specifikimi automatik për kufijtë e djathtë dhe të majtë i bën ato të barabarta, gjë që e përqendron elementin horizontalisht brenda bllokut prind.

  text-align: qendër

  Kjo metodë është e përshtatshme për përqendrimin e tekstit brenda një blloku. text-align: qendër:

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

  Unë jam në qendër

  pozicioni dhe marzhi negativ i majtë

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

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

  Unë jam në qendër

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

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

  Përafrimi me ekranin: inline-block + text-align: qendër;

  • Shtëpi
  • .navigacion ( rreshtimi i tekstit: në qendër; ) .navigimi li ( shfaqja: blloku i brendshëm; )
  Rreth autorit

  Linja-lartësia e shtrirjes vertikale

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

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

  Unë jam i vendosur vertikalisht

  pozicioni dhe marzhi negativ lart

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

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

  shfaqja: qeliza e tabelës

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

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

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

  Rreshtimi dinamik i një elementi në një faqe

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

  Le të lidhim jQuery me faqen:

  Unë sugjeroj të shkruani një funksion të thjeshtë për të përqendruar një element në faqe, le ta quajmë atë alignCenter(). Vetë elementi vepron si një argument për funksionin:

  Funksioni alignCenter(elem) ( // kodi këtu )

  Në trupin e funksionit, ne llogarisim dhe caktojmë në mënyrë dinamike koordinatat e qendrës së faqes në pronat e majta dhe të sipërme të CSS:

  Funksioni alignCenter(elem) ( elem.css(( majtas: ($(dritare).width() - elem.width()) / 2 + "px", sipër: ($(dritare).lartësia() - elem. lartësi()) / 2 + "px" // mos harroni të shtoni pozicionin: absolute në elementin për të aktivizuar koordinatat )) )

  Në rreshtin e parë të funksionit, marrim gjerësinë e dokumentit dhe zbresim prej tij gjerësinë e elementit, të ndarë në gjysmë - kjo do të jetë qendra horizontale e faqes. Linja e dytë bën të njëjtën gjë, vetëm me lartësinë për shtrirje vertikale.

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

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

  Aplikimi i Flexbox

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

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

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

  Burimet e ndërlidhura Ndihmoni projektin

  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 shtrirjen e tekstit në qendër, 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 shtrirjen e tekstit duke përdorur fletë stilesh. 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 inline. 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ë që duhet të vendoset 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 e qendrës 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 vend. Më shpesh, blloku duhet të përafrohet në qendër për këtë, përdoret atributi vertikal. 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);
  • shtrirja në qendër - .fëmijë(vertikal-linjë: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 blloqe të 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 i veçantë 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ër shembull, 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.