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.

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.

pro

• 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 auto;).

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.

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

  • Shtëpi
  • Produktet
  • Blog
  • Kontaktoni
  • Rreth

  Titulli i faqes

  Ri-inxhinieroni në mënyrë holistike kontraktimin e jashtëm 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ë 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; margjina: 0 automatik; 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 (mbushja: 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 shënuesve 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 kënde 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ç nëse përdorni prefikset -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

  Përqendrimi i elementeve vertikalisht me CSS është një sfidë për zhvilluesit. Megjithatë, ka disa mënyra për ta zgjidhur atë, të cilat janë mjaft të thjeshta. Ky mësim paraqet 6 opsione për përqendrimin vertikal të përmbajtjes.

  Le të fillojmë me një përshkrim të përgjithshëm të problemit.

  Problemi i qendrës vertikale

  Përqendrimi horizontalisht është shumë i thjeshtë dhe i lehtë. Kur elementi i përqendruar është në linjë, përdorni veçorinë prind-align. Kur elementi është i bazuar në bllok, ne vendosim gjerësinë e tij dhe vendosim automatikisht kufijtë e majtë dhe të djathtë.

  Shumica e njerëzve, kur përdorin veçorinë text-align:, i referohen veçorisë vertikale-align për ta përqendruar vertikalisht. Gjithçka duket mjaft logjike. Nëse keni përdorur shabllone tabelare, me siguri keni përdorur shumë atributin valign, gjë që përforcon besimin se rreshtimi vertikal është mënyra e duhur.

  Por atributi valign funksionon vetëm në qelizat e tabelës. Dhe vetia vertikale e rreshtimit është shumë e ngjashme me të. Ai gjithashtu prek qelizat e tabelës dhe disa elementë të linjës.

  Vlera e vetive vertikale të rreshtimit vepron në lidhje me elementin inline mëmë.

  • Në një rresht teksti, shtrirja kryhet në lidhje me lartësinë e rreshtit.
  • Rreshtimi përdoret në qelizën e tabelës në lidhje me vlerën e llogaritur nga një algoritëm i veçantë (zakonisht merret lartësia e rreshtit).

  Fatkeqësisht, vetia vertikale e rreshtimit nuk ka efekt në elementët e nivelit të bllokut (për shembull, paragrafët brenda një elementi div). Kjo situatë mund të çojë në idenë se nuk ka zgjidhje për problemin e shtrirjes vertikale.

  Por ka metoda të tjera për përqendrimin e elementeve të bllokut, zgjedhja e të cilave varet nga ajo që përqendrohet në lidhje me kontejnerin e jashtëm.

  Metoda e lartësisë së vijës

  Kjo metodë funksionon kur dëshironi të përqendroni vertikalisht një rresht teksti. Gjithçka që duhet të bëni është të vendosni lartësinë e rreshtit të jetë më e madhe se madhësia e shkronjave.

  Si parazgjedhje, hapësira e lirë do të shpërndahet në mënyrë të barabartë në krye dhe në fund të tekstit. Dhe vija do të përqendrohet vertikalisht. Shpesh lartësia e linjës bëhet e barabartë me lartësinë e elementit.

  HTML:

  Teksti i dëshiruar

  CSS:

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

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

  Përqendrimi i një imazhi duke përdorur lartësinë e vijës

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

  HTML:

  

  CSS:

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

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

  Metoda e tabelave CSS

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

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

  HTML:

  përmbajtja

  CSS:

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

  Ne vendosim daljen tabelare për div prind, dhe div e ndërthurur del si një qelizë tabele. Tani mund të përdorni veçorinë vertikale të rreshtimit në kontejnerin e brendshëm. Çdo gjë në të do të jetë e përqendruar vertikalisht.

  Ndryshe nga metoda e mësipërme, në këtë rast përmbajtja mund të jetë dinamike, pasi elementi div do të ndryshojë përmasat për t'iu përshtatur përmbajtjes së tij.

  Disavantazhi i kësaj metode është se nuk funksionon në versionet e vjetra të IE. Duhet të përdorim veçorinë display: inline-block për kontejnerin e vendosur.

  Pozicionimi absolut dhe marzhet negative

  Kjo metodë funksionon gjithashtu në të gjithë shfletuesit. Por kërkon që elementit të përqendruar t'i jepet një lartësi.

  Kodi i shembullit kryen qendërzim horizontal dhe vertikal në të njëjtën kohë:

  HTML:

  përmbajtja

  CSS:

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

  Së pari, ne vendosim llojin e pozicionimit të elementeve. Më pas, për ndarjen e mbivendosur, caktoni vetitë e sipërme dhe të majta në 50%, që është qendra e prindit. Por këndi i sipërm majtas i elementit të mbivendosur është në qendër. Prandaj, duhet ta ngrini lart (gjysma e lartësisë) dhe ta zhvendosni në të majtë (gjysma e gjerësisë), dhe më pas qendra do të përkojë me qendrën e elementit prind. Pra njohja e lartësisë së elementit është e nevojshme në këtë rast. Pastaj vendosni elementin në kufijtë negativë të sipërm dhe të majtë të barabartë me gjysmën e lartësisë dhe gjerësisë, respektivisht.

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

  Pozicionimi dhe shtrirja absolute

  Kodi i shembullit kryen qendërzim vertikal dhe horizontal.

  HTML:

  përmbajtja

  CSS:

  #prind (pozicioni: relativ;) #fëmijë (pozicioni: absolut; lart: 0; poshtë: 0; majtas: 0; djathtas: 0; gjerësia: 50%; lartësia: 30%; diferenca: automatik;)

  Ideja pas kësaj metode është shtrirja e elementit të mbivendosur në të 4 kufijtë e elementit prind duke vendosur vetitë e sipërme, të poshtme, djathtas dhe majtas në 0.

  Vendosja e tij në kufijtë e formimit automatik në të gjitha anët do të vendosë vlera të barabarta në të katër anët dhe do ta bëjë elementin tonë të mbivendosur div të përqendruar në elementin prind.

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

  Margjina të barabarta të sipërme dhe të poshtme

  Kjo metodë përcakton në mënyrë eksplicite margjina të barabarta mbi dhe poshtë elementit prind.

  HTML:

  përmbajtja

  CSS:

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

  Shembulli i kodit CSS vendos kufijtë e sipërm dhe të poshtëm për të dy elementët. Për një element të ndërthurur, vendosja e mbushjes do të shërbejë për qendërzim vertikal. Dhe mbushja e elementit prind do të përqendrojë elementin e mbivendosur në të.

  Njësitë relative përdoren për të ndryshuar në mënyrë dinamike madhësinë e artikujve. Dhe për njësitë absolute, llogaritjet do të duhet të bëhen.

  Për shembull, nëse elementi prind është 400 pikselë i lartë dhe elementi i mbivendosur është 100 pikselë, atëherë kërkohen 150 px kufijtë e sipërm dhe të poshtëm.

  150 + 150 + 100 = 400

  Përdorimi i% lejon që llogaritjet t'i lihen shfletuesit.

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

  Shënim: Kjo metodë funksionon duke vendosur mbushjen e jashtme të një elementi. Ju gjithashtu mund të përdorni kufijtë brenda një elementi. Vendimi për përdorimin e marzheve ose mbushjes duhet të merret në varësi të specifikave të projektit.

  Div lundrues

  Kjo metodë përdor një element div bosh që noton dhe ndihmon në kontrollin e pozicionit të elementit tonë të mbivendosur në dokument. Vini re se div lundrues është i pozicionuar përpara elementit tonë të mbivendosur në kodin HTML.

  HTML:

  përmbajtja

  CSS:

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

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

  Meqenëse ky div është lundrues, ai hiqet nga rrjedha normale e dokumentit dhe duhet të anulojmë mbështjelljen e tekstit për elementin e mbivendosur. Shembulli përdor qartë: të dyja, por mjafton të përdoret i njëjti drejtim si kompensimi i elementit div bosh lundrues.

  Kufiri i sipërm i elementit div të ndërthurur është drejtpërdrejt nën kufirin e poshtëm të elementit div bosh. Ne duhet ta zhvendosim elementin e mbivendosur me gjysmën e lartësisë së elementit bosh lundrues. Për të zgjidhur problemin, përdorni një vlerë negative për vetinë margin-bottom për një element div bosh lundrues.

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

  konkluzioni

  Të gjitha metodat e përshkruara janë të lehta për t'u përdorur. Vështirësia është se asnjëra prej tyre nuk është e përshtatshme për të gjitha rastet. Ju duhet të analizoni projektin dhe të zgjidhni atë që i përshtatet më mirë kërkesave.

  Unë mendoj se shumë prej jush që kanë bërë paraqitjen e kanë hasur nevojën për të rreshtuar elementët vertikalisht dhe e dinë se çfarë vështirësish lindin kur rreshtoni një element në qendër.

  Po, për shtrirjen vertikale, CSS ka një veti të veçantë vertikale të rreshtimit me vlera të shumta. Në praktikë, megjithatë, nuk funksionon aspak siç pritej. Le të përpiqemi ta kuptojmë.

  
  Le të krahasojmë qasjet e mëposhtme. Lidhur me:

  • tavolina,
  • dhëmbëzimet,
  • vija e gjatesise,
  • shtrirje,
  • marzhi negativ,
  • transformoj,
  • pseudoelement,
  • flexbox.
  Si ilustrim, merrni parasysh shembullin e mëposhtëm.

  

  Ka dy div, me njërën e vendosur brenda tjetrës. Le t'u japim atyre klasat përkatëse - të jashtme dhe të brendshme.

  
  Sfida është të rreshtoni elementin e brendshëm me qendrën e elementit të jashtëm.

  Së pari, merrni parasysh rastin kur dimensionet e njësive të jashtme dhe të brendshme i njohur... Le të shtojmë ekranin: inline-block në elementin e brendshëm, dhe text-align: në qendër dhe vertikal-align: mes në atë të jashtëm.

  Mbaj mend që shtrirja zbatohet vetëm për elementët që kanë modalitetin e ekranit në linjë ose në blloqe të brendshme.

  Le t'u japim blloqeve madhësitë dhe ngjyrat e sfondit për të parë kufijtë e tyre.

  E jashtme (gjerësia: 200 px; lartësia: 200 px; rreshtimi i tekstit: në qendër; rreshtimi vertikal: mes; ngjyra e sfondit: #ffc;) . i brendshëm (ekrani: blloku i brendshëm; gjerësia: 100 px; lartësia: 100 px; ngjyra e sfondit : #fcc;)
  Pas aplikimit të stileve, do të shohim që blloku i brendshëm është i rreshtuar horizontalisht, por jo vertikalisht:
  http://jsfiddle.net/c1bgfffq/

  Pse ndodhi?Çështja është se vetia vertikale-linjë ndikon në shtrirjen. vetë elementi, jo përmbajtja e tij(përveç kur zbatohet për qelizat e tabelës). Prandaj, aplikimi i kësaj vetie në një element të jashtëm nuk bëri asgjë. Për më tepër, aplikimi i kësaj vetie në një element të brendshëm gjithashtu nuk do të bëjë asgjë, pasi blloqet inline janë të rreshtuara vertikalisht në lidhje me blloqet ngjitur, dhe në rastin tonë kemi një bllok inline.

  Ekzistojnë disa teknika për zgjidhjen e këtij problemi. Më poshtë do të hedhim një vështrim më të afërt në secilën prej tyre.

  Rreshtoni me një tabelë

  Zgjidhja e parë që ju vjen në mendje është zëvendësimi i bllokut të jashtëm me një tabelë me një qelizë. Në këtë rast, shtrirja do të zbatohet në përmbajtjen e qelizës, domethënë në bllokun e brendshëm.
  
  http://jsfiddle.net/c1bgfffq/1/

  Disavantazhi i dukshëm i kësaj zgjidhjeje është se nga pikëpamja e semantikës, është e gabuar të përdoren tabela për rreshtim. E meta e dytë është se për të krijuar tabelën, duhet të shtoni një element tjetër rreth bllokut të jashtëm.

  Minusi i parë mund të hiqet pjesërisht duke zëvendësuar etiketat e tabelës dhe td me div dhe duke vendosur modalitetin e shfaqjes së tabelës në CSS.

  
  .mbështjellësi i jashtëm (ekrani: tabela;) .i jashtëm (ekrani: qeliza e tabelës;)
  Megjithatë, blloku i jashtëm do të mbetet ende një tabelë me të gjitha pasojat që pasojnë.

  Rreshtoni me dhëmbëza

  Nëse dihen lartësitë e kutive të brendshme dhe të jashtme, atëherë shtrirja mund të vendoset duke përdorur mbushjen vertikale të kutisë së brendshme duke përdorur formulën: (H e jashtme - H e brendshme) / 2.

  E jashtme (lartësia: 200 px;) . e brendshme (lartësia: 100 px; kufiri: 50 px 0;)
  http://jsfiddle.net/c1bgfffq/6/

  Ana negative e zgjidhjes është se ajo është e zbatueshme vetëm në një numër të kufizuar rastesh kur dihen lartësitë e të dy blloqeve.

  Përafrimi me lartësinë e vijës

  Nëse e dini që blloku i brendshëm nuk duhet të zërë më shumë se një rresht teksti, atëherë mund të përdorni veçorinë line-height dhe ta vendosni atë të barabartë me lartësinë e bllokut të jashtëm. Meqenëse përmbajtja e bllokut të brendshëm nuk duhet të mbyllet në rreshtin e dytë, rekomandohet të shtoni edhe hapësirën e bardhë: nowrap dhe tejmbushje: rregulla të fshehura.

  E jashtme (lartësia: 200 px; lartësia e vijës: 200 px;) . e brendshme (hapësirë ​​e bardhë: tani; tejmbushja: e fshehur;)
  http://jsfiddle.net/c1bgfffq/12/

  Ju gjithashtu mund ta përdorni këtë teknikë për të rreshtuar tekstin me shumë rreshta duke ripërcaktuar vlerën e lartësisë së rreshtit për bllokun e brendshëm dhe duke shtuar ekranin: blloku inline dhe rreshtimi vertikal: rregullat e mesme.

  E jashtme (lartësia: 200 px; lartësia e vijës: 200 px;) . e brendshme (lartësia e vijës: normale; ekrani: blloku i brendshëm; rreshtimi vertikal: mes;)
  http://jsfiddle.net/c1bgfffq/15/

  Disavantazhi i kësaj metode është se lartësia e bllokut të jashtëm duhet të dihet.

  Shtrirja e shtrirjes

  Kjo metodë mund të përdoret kur lartësia e njësisë së jashtme është e panjohur, por lartësia e njësisë së brendshme dihet.

  Për këtë ju duhet:

  1. vendosni pozicionin relativ të bllokut të jashtëm, dhe atë të brendshëm - absolut;
  2. shtoni rregullat lart: 0 dhe poshtë: 0 në bllokun e brendshëm, si rezultat i të cilit shtrihet në lartësinë e plotë të bllokut të jashtëm;
  3. vendosur në automatik për mbushjen vertikale të bllokut të brendshëm.
  .i jashtëm (pozicioni: relative;) . i brendshëm (lartësia: 100 px; pozicioni: absolut; sipër: 0; poshtë: 0; diferencë: automatike 0;)
  http://jsfiddle.net/c1bgfffq/4/

  Thelbi i kësaj teknike është se përcaktimi i lartësisë për një kuti të shtrirë dhe të pozicionuar absolutisht e detyron shfletuesin të llogarisë kufijtë vertikalë në përmasa të barabarta kur vendoset në automatik.

  Përafrimi me marzh negativ-top

  Kjo metodë është bërë e njohur gjerësisht dhe përdoret shumë shpesh. Ashtu si ai i mëparshmi, aplikohet kur lartësia e bllokut të jashtëm është e panjohur, por lartësia e bllokut të brendshëm dihet.

  Ju duhet të vendosni pozicionin relativ të bllokut të jashtëm, dhe atë të brendshëm - absolut. Më pas duhet ta shtyni kutinë e brendshme poshtë gjysmës së lartësisë së pjesës së sipërme të kutisë së jashtme: 50% dhe ta ngrini atë deri në gjysmën e lartësisë së saj margjinale: -H e brendshme / 2.

  E jashtme (pozicioni: relativ;) . i brendshëm (lartësia: 100 px; pozicioni: absolut; sipër: 50%; margjina e sipërme: -50 px;)
  http://jsfiddle.net/c1bgfffq/13/

  Disavantazhi i kësaj metode është se lartësia e njësisë së brendshme duhet të dihet.

  Përafrimi me transformimin

  Kjo metodë është e ngjashme me atë të mëparshme, por mund të zbatohet kur lartësia e njësisë së brendshme nuk dihet. Në këtë rast, në vend që të vendosni një mbushje negative të pikselit, mund të përdorni vetinë e transformimit dhe ta zhvendosni bllokun e brendshëm lart duke përdorur funksionin translateY dhe një vlerë prej -50%.

  E jashtme (pozicioni: relative;) .i brendshëm (pozicioni: absolut; sipër: 50%; transformimi: përktheY (-50%);)
  http://jsfiddle.net/c1bgfffq/9/

  Pse nuk mund të vendosej një përqindje në metodën e mëparshme? Meqenëse vlerat e përqindjes së vetive të marzhit llogariten në lidhje me elementin mëmë, një vlerë prej 50% do të ishte gjysma e lartësisë së kutisë së jashtme dhe ne duhej ta ngrinim kutinë e brendshme me gjysmën e lartësisë së saj. Vetia e transformimit është e duhura për këtë.

  Disavantazhi i kësaj metode është se nuk mund të aplikohet nëse blloku i brendshëm ka pozicionim absolut.

  Rreshtoni me Flexbox

  Mënyra më moderne për t'u lidhur vertikalisht është përdorimi i Flexible Box Layout (i njohur gjerësisht si Flexbox). Ky modul ju lejon të kontrolloni në mënyrë fleksibël pozicionimin e elementeve në faqe, duke i vendosur ato pothuajse ashtu siç dëshironi. Shtrirja në qendër për Flexbox është një detyrë shumë e thjeshtë.

  Kutia e jashtme duhet të vendoset për të shfaqur: flex, dhe kutia e brendshme duhet të vendoset në margjina: auto. Dhe kjo është e gjitha! E bukur, apo jo?

  E jashtme (ekrani: përkul; gjerësia: 200 px; lartësia: 200 px;) . e brendshme (gjerësia: 100 px; diferenca: automatike;)
  http://jsfiddle.net/c1bgfffq/14/

  Disavantazhi i kësaj metode është se Flexbox mbështetet vetëm nga shfletuesit modernë.

  Cila mënyrë për të zgjedhur?

  Është e nevojshme të vazhdohet nga deklarata e problemit:
  • Për shtrirjen vertikale të tekstit, është më mirë të përdorni mbushjen vertikale ose veçorinë line-height.
  • Për elementët e pozicionuar absolutisht me një lartësi të njohur (si ikona), vetia negative e majës së sipërme është ideale.
  • Për raste më komplekse, kur lartësia e bllokut është e panjohur, ju duhet të përdorni një pseudo-element ose vetinë e transformimit.
  • Epo, nëse jeni aq me fat sa nuk keni nevojë të mbështesni versionet më të vjetra të IE, atëherë sigurisht që është më mirë të përdorni Flexbox.

  Etiketa: Shto etiketa

  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 një pozicionimi të caktuar. 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-grup

  Siç 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.

  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:

  .mbështjellës (pozicioni: relative; / * vendosni pozicionimin relativ për kutinë mëmë, në mënyrë që më vonë kutia të mund të pozicionohet absolutisht 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:

  .wrapper (tekst-linjë: në qendër; / * poziciononi përmbajtjen e bllokut në qendër * /) .box (ekran: inline-block; / * renditni blloqet në një rresht horizontalisht * / margin-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

  Disa tekst këtu

  h1 (marzhi: 0; transformimi: përkthe (-50%, -50%); pozicioni: absolut; lart: 50%; majtas: 50%;)