Divų lygiavimas. CSS – Centrinis lygiavimas. Sulygiuokite elementą su žinomu aukščiu

Interneto dizaineriai savo darbe naudoja DIV kiekvieną dieną. Be jokio nuvertinimo, tai yra pati populiariausia žyma. Atidarykite bet kurios svetainės šaltinį ir pamatysite, kad dauguma, jei ne du trečdaliai objektų yra uždengti

. Netgi atsiradus HTML5 ir atsiradus rimtiems konkurentams straipsnio ar antraštės pavidalu, jis ir toliau visur įterpiamas į žymėjimą. Todėl siūlau suprasti div blokų formatavimo ir centravimo problemą.

Kas yra DIV

Elemento pavadinimas kilęs iš Angliškas žodis padalijimas, o tai reiškia padalijimą. Rašant žymėjimą, jis naudojamas elementams suskaidyti į blokus. DIV tinklalapyje įtraukia turinio grupes. Pavyzdžiui, vaizdai, pastraipos su tekstu. Žyma neturi jokios įtakos turinio rodymui ir neturi jokios semantinės apkrovos.

DIV palaiko visus pasaulinius atributus. Tačiau interneto dizainui reikia tik dviejų – klasės ir ID. Apie visus kitus prisiminsite tik egzotiškais atvejais, ir tai nėra faktas. Lygiavimo atributas, kuris anksčiau buvo naudojamas centruoti arba kairėje lygiuoti, buvo nebenaudojamas.

Kada naudoti DIV

Įsivaizduokite, kad svetainė yra šaldytuvas, o DIV yra plastikiniai konteineriai, į kuriuos reikia rūšiuoti turinį. Vaisių nedėsite į tą patį indą su kepenėlių košele. Kiekvienos rūšies gaminius patalpinsite atskirai. Interneto turinys generuojamas panašiai.

Atidarykite bet kurią svetainę ir suskirstykite ją į reikšmingus blokus. Antraštė viršuje, poraštė apačioje, pagrindinis tekstas centre. Šone dažniausiai būna mažesnis stulpelis su reklaminiu turiniu arba žymų debesis.

dokumentas

Dabar pažvelkite į kiekvieną skyrių išsamiau. Pradėkite nuo antraštės. Svetainės antraštė turi atskirą logotipą, naršymą, pirmojo lygio antraštę ir kartais šūkį. Kiekvienam semantiniam blokui priskirkite savo konteinerį. Tai ne tik atskirs srauto elementus, bet ir palengvins jų formatavimą. Bus daug lengviau centruoti objektą DIV žymoje, suteikus jam klasę arba ID.

DIV centravimas naudojant paraštes

Apdorodama žiniatinklio elementus, naršyklė atsižvelgia į tris ypatybes: užpildymą, paraštę ir kraštinę. Padding – tai tarpas tarp turinio ir jo kraštinės. Margina – laukai, skiriantys vieną objektą nuo kito. Siena yra linijos išilgai blokų. Juos galima priskirti visoms iš karto arba tik vienai pusei:

div (kraštinė: 1 piks. vientisas #333; kraštinė kairėje: nėra; )

Šios savybės padidina tarpą tarp objektų ir padeda juos tinkamai sulygiuoti bei išdėstyti. Pavyzdžiui, jei bloką su vaizdu reikia perkelti iš kairiojo krašto į centrą 20%, elementui priskiriate paraštę į kairę, kurios reikšmė yra 20%:

Blokuoti su vaizdu (kairė paraštė: 20 %; )

Elementai taip pat gali būti formatuojami naudojant jų pločio reikšmes ir neigiamą užpildymą. Pavyzdžiui, yra blokas, kurio matmenys yra 200 x 200 pikselių. Pirma, priskirkime jam absoliučią padėtį ir perkelkime į centrą 50%.

Div(pozicija: absoliuti; kairėje: 50%; )

Dabar, norėdami užtikrinti, kad centre esantis DIV būtų idealiai išdėstytas, suteikiame jam neigiamą paraštę į kairę, lygią 50% jo pločio, tai yra -100 pikselių:

Kairė paraštė: -100 pikselių;

CSS tai vadinama „oro pašalinimu“. Tačiau jis turi didelį trūkumą, nes reikia gaminti nuolatinės gyvenvietės, o tai gana sunku padaryti elementams su keliais įdėjimo lygiais. Jei nurodytos užpildymo ir kraštinės pločio reikšmės, naršyklė pagal numatytuosius nustatymus apskaičiuos konteinerio matmenis kaip kraštinės storio, dešiniojo ir kairiojo užpildymo ir paties turinio sumą viduje, o tai taip pat gali nustebinti. .

Taigi, kai reikia centruoti DIV, naudokite langelio dydžio ypatybę su reikšme border-box. Tai neleis naršyklei pridėti užpildymo ir kraštinių reikšmių prie bendro DIV elemento pločio. Norėdami pakelti arba nuleisti elementą, taip pat naudokite neigiamas reikšmes. Tačiau šiuo atveju juos galima priskirti viršutiniam arba apatiniam konteinerio laukams.

Kaip centruoti DIV bloką naudojant automatines paraštes

Tai paprastas būdas centruoti didelius blokus. Jūs tiesiog priskiriate konteinerio plotį ir paraštės ypatybę automatiniam. Naršyklė įdės bloką viduryje su vienodomis paraštėmis kairėje ir dešinėje, pati atlikdama visą darbą. Dėl to nerizikuojate susipainioti matematiniuose skaičiavimuose ir žymiai sutaupysite savo laiko.

Kurdami reaguojančias programas naudokite automatinio lauko metodą. Svarbiausia konteineriui priskirti pločio reikšmę em arba procentais. Aukščiau pateiktas pavyzdinis kodas sutelks DIV bet kuriame įrenginyje, įskaitant Mobilieji telefonai, jis užims 90% ekrano.

Lygiavimas naudojant rodymo ypatybę: inline-block

Pagal numatytuosius nustatymus DIV elementai laikomi blokiniais elementais, o jų rodymo reikšmė yra blokas. Taikant šį metodą turėsite nepaisyti šios savybės. Tinka tik DIV su pirminiu konteineriu:

Bet koks tekstas

Elementui su išorine div klase priskiriama teksto lygiavimo ypatybė su reikšme centre, kuri centruoja tekstą viduje. Tačiau kol kas naršyklė mato įdėtą DIV kaip blokinį objektą. Kad teksto lygiavimo ypatybė veiktų, vidinis skirsnis turi būti traktuojamas kaip mažosios raidės. Taigi vidinio skirsnio parinkiklio CSS lentelėje įrašote šį kodą:

Inner-div (vaizdas: eilutinis blokas; )

Keičiate rodymo ypatybę iš bloko į eilutinį bloką.

transformavimo / vertimo metodas

Kaskadiniai stiliaus lapai suteikia galimybę perkelti, iškreipti, pasukti ir kitaip transformuoti žiniatinklio elementus savo nuožiūra. Tam naudojama transformavimo savybė. Reikšmės nurodo norimą transformacijos tipą ir laipsnį. Šiame pavyzdyje dirbsime su vertimu:

transformuoti: išversti(50%, 50%);

Vertimo funkcija perkelia elementą iš dabartinės padėties į kairę/dešinę ir aukštyn/žemyn. Skliausteliuose pateikiamos dvi reikšmės:

horizontalaus judėjimo laipsnis;
vertikalaus judėjimo laipsnis.

Jei elementą reikia perkelti tik išilgai vienos koordinačių ašies, tada po žodžio transliuoti nurodote ašies pavadinimą ir skliausteliuose reikiamo poslinkio dydį:

Transformuoti: translateY(-20%);

Kai kuriuose vadovuose galite rasti transformaciją su pardavėjo priešdėliais:

Webkit-transform: išversti(50%, 50%); -ms-transformuoti: išversti (50%, 50%); transformuoti: išversti(50%, 50%);

2018 m. tai nebėra būtina; ypatybę palaiko visos naršyklės, įskaitant Edge ir IE.

Norint sucentruoti norimą DIV, CSS vertimo funkcija parašyta 50% vertikalios ir horizontalios ašies verte. Dėl to naršyklė pakeis elementą nuo dabartinės padėties puse jo pločio ir aukščio. Turi būti nurodytos pločio ir aukščio savybės:

dokumentas

Atminkite, kad elementas, kuriam taikoma transformavimo savybė, juda nepriklausomai nuo jį supančių objektų. Viena vertus, tai patogu, tačiau kartais perkėlus DIV gali uždengti kitą konteinerį. Todėl šis juostos komponentų centravimo būdas laikomas nestandartiniu ir naudojamas tik ypatingos būtinybės atvejais. Animacijai naudojamos transformacijos pagal visus CSS kanonus.

Darbas su Flexbox maketu

„Flexbox“ laikomas sudėtingu būdu kurti žiniatinklio maketus. Bet jei įvaldysite, suprasite, kad tai daug paprasčiau ir maloniau nei standartiniai formatavimo būdai. „Flexbox“ specifikacija yra lankstus ir neįtikėtinai galingas elementų tvarkymo būdas. SU angliškai Modulio pavadinimas išverstas kaip „lankstus konteineris“. Elementų pločio, aukščio ir išdėstymo reikšmės koreguojamos automatiškai, neskaičiuojant įtraukų ir paraščių.

Ankstesniuose pavyzdžiuose jau dirbome su rodymo ypatybe, bet nustatėme blokavimo ir eilutinio blokavimo reikšmes. Norėdami sukurti lankstų išdėstymą, naudosime ekraną: flex. Pirmiausia mums reikia lanksčios talpyklos:

Norėdami konvertuoti jį į lanksčią talpyklą kaskadinėse lentelėse, rašome:

Lankstus konteineris (ekranas: lankstus; )

Visi įdėtieji objektai, bet tik tiesioginiai palikuonys, bus lankstieji elementai:

Pirmas

Antra

Trečias

Ketvirta

Jei sąrašą įdedate į lanksčią talpyklą, li sąrašo elementai nelaikomi lanksčiais elementais. „Flexbox“ išdėstymas veiks tik ul:

Lanksčiųjų elementų išdėstymo taisyklės

Norint tvarkyti lanksčius elementus, reikia išlyginti turinį ir sulygiuoti elementus. Atsižvelgiant į jūsų nurodytas reikšmes, šios dvi savybės automatiškai įdeda objektus pagal poreikį. Jei reikia centruoti visus įdėtus DIV, rašome justify-content: centre, align-items: centre ir nieko daugiau. Likusį darbą naršyklė atliks pati:

dokumentas

Pirmas

Antra

Trečias

Ketvirta

Norėdami sutelkti tekstą į DIV, kurie yra lankstūs elementai, galite naudoti standartinę teksto lygiavimo techniką. Arba galite padaryti kiekvieną įdėtą DIV taip pat lanksčią talpyklą ir tvarkyti turinį naudodami pagrindimo turinį. Šis metodas yra daug racionalesnis, jei jame yra įvairaus turinio, įskaitant grafiką, kitus įdėtus objektus, įskaitant kelių lygių sąrašus.

Labai dažnai užduotis yra sulygiuoti bloką puslapio / ekrano centre ir netgi taip, kad nebūtų „Java“ scenarijaus, nenustatant griežtų matmenų ar neigiamų įtraukų ir kad slinkties juostos veiktų pirminiam, jei blokas viršija jo dydį. . Internete yra gana daug monotoniškų pavyzdžių, kaip išlygiuoti bloką į ekrano centrą. Paprastai dauguma jų yra pagrįsti tais pačiais principais.

Žemiau pateikiami pagrindiniai problemos sprendimo būdai, jų privalumai ir trūkumai. Norint suprasti pavyzdžių esmę, rekomenduoju sumažinti lango Rezultatas aukštį/plotį pateiktose nuorodose esančiuose pavyzdžiuose.

1 parinktis: neigiama įtrauka.

Padėties nustatymas blokas naudodami viršutinį ir kairįjį atributus 50% ir iš anksto žinodami bloko aukštį ir plotį, nustatykite neigiamą paraštę, kuri yra lygi pusei dydžio blokas. Didžiulis šios parinkties trūkumas yra tai, kad reikia skaičiuoti neigiamas įtraukas. Taip pat blokas elgiasi ne visai teisingai, kai yra apsuptas slinkties juostų – jis tiesiog nupjaunamas, nes turi neigiamas paraštes.

Parent (plotis: 100%; aukštis: 100%; padėtis: absoliutus; viršuje: 0; kairėje: 0; perpildymas: automatinis; ) .blokas (plotis: 250 piks.; aukštis: 250 piks.; padėtis: absoliutus; viršuje: 50%; kairėje : 50% paraštė: -125px 0 0 -125px img (maks. plotis: 100%; aukštis: automatinis; ekranas: blokas; paraštė: 0 automatinis; kraštinė: nėra; ) )

2 variantas. Automatinis įtraukimas.

Mažiau paplitęs, bet panašus į pirmąjį. Dėl blokas nustatome plotį ir aukštį, atributus viršuje dešinėje apačioje kairėje nustatome į 0 ir nustatome paraštę auto. Šios parinkties pranašumas yra veikiančios slinkties juostos tėvas, jei pastarasis turi 100 % pločio ir aukščio. Šio metodo trūkumas yra griežtas matmenų nustatymas.

Parent (plotis: 100 %; aukštis: 100 %; padėtis: absoliuti; viršuje: 0; kairėje: 0; perpildymas: automatinis; ) .blokas ( plotis: 250 tšk.; aukštis: 250 taškų; padėtis: absoliutus; viršuje: 0; dešinėje: 0; apačia: 0; paraštė: 100%

3 variantas. Lentelė.

Paklauskime tėvas lentelės stiliai, langelis tėvas Nustatykite teksto lygiavimą į centrą. A blokas nustatome linijos bloko modelį. Trūkumai, kuriuos gauname, yra neveikiančios slinkties juostos, o apskritai lentelės „emuliacijos“ estetika ne.

Parent ( plotis: 100 %; aukštis: 100 %; ekranas: lentelė; padėtis: absoliuti; viršuje: 0; kairėje: 0; > .inner ( ekranas: lentelės langelis; teksto lygiavimas: centre; vertikalus lygiavimas: viduryje; ) ) .block ( ekranas: inline-block; img ( ekranas: blokas; kraštinė: nėra; ) )

Norėdami pridėti slinktį prie šio pavyzdžio, turėsite pridėti dar vieną elementą prie dizaino.
Pavyzdys: jsfiddle.net/serdidg/fk5nqh52/3.

4 variantas. Pseudoelementas.

Ši parinktis neturi visų ankstesniuose metoduose išvardytų problemų, taip pat išsprendžia pradines problemas. Esmė ta tėvas nustatyti stilius pseudo elementas anksčiau, būtent 100 % aukščio, išlygiavimo centre ir įdėto bloko modelio. Tai tas pats su blokas nustatomas linijos bloko modelis, centre. Į blokas„nepapuolė“. pseudo elementas, kai pirmojo matmenys yra didesni už tėvas, nurodykite tėvas tarpas: be įvyniojimo ir šrifto dydis: 0, po kurio blokas atšaukite šiuos stilius naudodami šį - tarpą: normalus. Šiame pavyzdyje šrifto dydis: 0 reikalingas, kad būtų pašalintas tarpas tarp tėvas Ir blokas dėl kodo formatavimo. Erdvę galima pašalinti ir kitais būdais, tačiau manoma, kad geriausia jos tiesiog vengti.

Parent (plotis: 100%; aukštis: 100%; padėtis: absoliuti; viršuje: 0; kairėje: 0; perpildymas: automatinis; tarpas: nevyniojamas; teksto lygiavimas: centre; šrifto dydis: 0; &:before ( aukštis: 100 %;

Arba, jei reikia, kad tėvas užimtų tik lango aukštį ir plotį, o ne visą puslapį:

Parent (padėtis: fiksuota; viršuje: 0; dešinėje: 0; apačioje: 0; kairėje: 0; perpildymas: automatinis; tarpas: nevyniojamas; teksto lygiavimas: centre; šrifto dydis: 0; &:prieš ( aukštis: 100 %;

5 variantas. Flexbox.

Vienas iš paprasčiausių ir elegantiškiausių būdų yra naudoti „flexbox“. Jis nereikalauja nereikalingų kūno judesių, gana aiškiai nusako to, kas vyksta, esmę, yra labai lankstus. Vienintelis dalykas, kurį verta atsiminti renkantis šį metodą, yra IE palaikymas nuo 10 versijos imtinai. caniuse.com/#feat=flexbox

Pirminis (plotis: 100 %; aukštis: 100 %; padėtis: fiksuota; viršuje: 0; kairėje: 0; ekranas: lankstus; lygiuoti elementus: centre; lygiuoti turinį: centre; išlyginti turinį: centre; perpildymas: automatinis; ) .block ( fonas: #60a839; img ( ekranas: blokas; kraštinė: nėra; ) )

6 variantas. Transformuoti.

Tinka, jei mus riboja struktūra, o pagrindiniu elementu negalima manipuliuoti, bet bloką reikia kažkaip sulygiuoti. CSS funkcija translate() ateis į pagalbą. 50 % absoliučios padėties nustatymo vertė nustatys bloko viršutinį kairįjį kampą tiksliai centre, tada neigiama vertimo vertė perkels bloką pagal jo matmenis. Atkreipkite dėmesį, kad neigiami efektai gali atsirasti kaip neryškūs kraštai arba šrifto stilius. Be to, dėl šio metodo gali kilti problemų apskaičiuojant bloko padėtį naudojant „Java“ scenarijų, kad būtų galima kompensuoti 50% pločio praradimą dėl naudojimo css savybės kairėje gali padėti blokui nurodyta taisyklė: paraštė-dešinė: -50%; .

Parent (plotis: 100%; aukštis: 100%; padėtis: fiksuota; viršuje: 0; kairėje: 0; perpildymas: automatinis; ) .block ( padėtis: absoliuti; viršuje: 50%; kairėje: 50%; transformuoti: išversti( -50%, -50%) img ( ekranas: blokas; ) )

Variantas 7. Mygtukas.

Vartotojo azproduction variantas kur blokasįrėminta mygtuko žymoje. Mygtukas turi savybę centruoti viską, kas jame yra, būtent įterptosios ir blokinės linijos (inline-block) modelio elementus. Praktiškai nerekomenduoju jo naudoti.

Parent (plotis: 100%; aukštis: 100%; padėtis: absoliuti; viršuje: 0; kairėje: 0; perpildymas: automatinis; fonas: nėra; kraštinės: nėra; kontūras: nėra; ) .block ( ekranas: inline-block; img (ekranas: blokuoti;; kraštinė: nėra; ) )

Premija

Naudodami 4-osios parinkties idėją, galite nustatyti paraštės Dėl blokas, o pastarieji bus tinkamai rodomi, apsupti slinkties juostomis.
Pavyzdys: jsfiddle.net/serdidg/nfqg9rza/2.

Taip pat galite sulygiuoti vaizdą į centrą ir jei vaizdas didesnis tėvas, pakeiskite jį pagal dydį tėvas.
Pavyzdys: jsfiddle.net/serdidg/nfqg9rza/3.
Pavyzdys su dideliu paveikslu:

Dažnai praktikoje turime išspręsti turinio grupavimo ir derinimo naudojant CSS problemą. Šiandien apžvelgsime pagrindinius elementų išdėstymo horizontalioje eilėje būdus.

Šiame straipsnyje pateikta medžiaga skirta padėti pradedantiesiems interneto dizaineriams įsisavinti tinklalapio maketavimo metodus.

Iš ko rinktis ar metodai

Yra keletas būdų, kaip išdėstyti konstrukcinius elementus iš eilės horizontalioje plokštumoje. Naudingiausia, žiūrint iš taško praktinis pritaikymas, yra:

„Plūdžių“ metodas
„Inline-block“ metodas
Lentelės ląstelių metodas

Kiekvienas iš jų turi savo privalumų, taikymo būdų ir trūkumų. Pažvelkime į juos eilės tvarka.

„Už proveržį“ arba šiek tiek teorijos

Visi HTML struktūriniai elementai gali būti suskirstyti į:

Inline(įmontuotas) – tipas img, span ir panašiai. Neturime galimybės pakeisti jų fono ir suteikti jiems savavališkų linijinių matmenų.

Blokuoti– užima visą pirminio bloko plotį, visada pradedant nauja eilute – p, h, dal.

Toliau pateikiamas vaizdinis eilutinių ir blokinių struktūrų pavyzdys:

Plūdės metodas

Kaip jau žinoma (žr. aukščiau), bloko elementas dedamas į naują eilutę, neatsižvelgiant į jam nurodytą plotį ( plotis). Todėl horizontalaus dydžio sumažinimas div-O, tu negali statyti kaladėlių iš eilės.

Populiariausias (ypač tarp pradedančiųjų maketuotojų) sprendimo būdas – panaudoti nuosavybę plūdė.

CSS nuosavybė plūdė didelio populiarumo ir praktinės vertės įgijo perėjus nuo lentelių maketavimo metodo prie blokinio.

Plūdis: kairėn (dešinėn) paverčia bloko elementą slankiuoju, sulygiuoja jį su kairiuoju (dešiniuoju) pirminio bloko kraštu ir nustato, kad tekstas ir kiti elementai būtų vyniojami į dešinę (kairę).

Pavyzdžiui, sukurkime keturis blokus, kuriuos reikia dėti iš eilės:

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >Mes statome < div class = "bblock" >horizontaliai < div class = "bblock" >eilė < div class = "bblock" >iš divų

Ir išorinis stiliaus lapas su tokiu turiniu:

div ( plaukimas: kairėn; /*Nustatyti įvyniojimą*/ eilutės aukštis: 120 pikselių; šrifto dydis: 40 pikselių; fonas: dodgeblue; spalva: balta; paraštė viršuje: 60 piks.; plotis: 320 pikselių; /*Pataisyti bloko plotį*/ }

Rezultatas yra keturi blokai, išdėstyti horizontalioje eilutėje ir sulygiuoti su kairiuoju pagrindinio bloko kraštu:

Kartais praktikoje blokus reikia sulygiuoti su pagrindinio elemento dešiniuoju kraštu. Pakeiskime srautą aplink blokus ankstesniame pavyzdyje:

plūdė: dešinė;

Atkreipkite dėmesį į užrašus, esančius blokuose. Iš pirmo žvilgsnio gali atrodyti, kad pavyzdys suveikė kreivai. Tačiau iš tikrųjų naršyklė teisingai apdorojo kodą: nuskaitė blokus iš viršaus į apačią ir padarė tai, ko prašėme – sulygiavo į dešinę. Turėkite tai omenyje, kai naudojatės nuosavybe plūdė: dešinė.

Norėdami nutraukti elementų srautą iš konkrečios vietos, naudokite eilutę:

< div style= "clear: both;" >

Aukščiau pateiktame pavyzdyje mes nustatome atstumą tarp blokų naudodami įtrauką paraštė-dešinė. Bet ką daryti, jei dėliodami puslapį turite užduotį: dėti blokus iš eilės, juos centruoti, taip pat padaryti įtraukas tik tarp jų, bet ne išorėje?

Veiksmų algoritmas yra toks.

< div class = "wrap" > < div class = "bblock" >Mes statome < div class = "bblock" >horizontaliai < div class = "bblock" >eilė < div class = "bblock" >iš divų

Apvyniojimas ( plotis: 1310 pikselių; /*pataisyti įvyniojimo plotį*/ paraštė: 0 automatinis; /*centruoti*/ fonas: tamsiai pilkas; aukštis: 120 pikselių; /*Nustatyti įvyniojimo aukštį*/). bblock ( plūduriuoti: kairėje; /*Nustatyti įvyniojimą*/ eilutės aukštis: 120 pikselių; /*Linijos aukštis + taškas. centravimo tekstas*/šrifto dydis: 40 pikselių; fonas: dodgeblue; spalva: balta; plotis: 320 pikselių; /*Pataisyti bloko plotį*/ paraštė – dešinė: 10 pikselių; tekstas – lygiuoti: centre; /*Centruokite tekstą horizontaliai*/). apvyniojimas : paskutinis - vaikas ( paraštė - dešinė: 0 pikselių; /*Pašalinti paskutinio div lauką*/ }

Dėl to gauname tokį vaizdą:

Na, jūs negalite atsižvelgti į visas praktines situacijas, todėl pereikime prie bendrųjų savybių.

Svarbu!!!

Eilutinio blokavimo metodas

Tiek inline, tiek blokiniai elementai turi savo privalumų ir trūkumų kiekvienos konkrečios sprendžiamos užduoties kontekste. Ką daryti, jei sujungsite jų pranašumus?

Susipažinkite su programos akcentu – turtu ekranas: eilutinis blokas.

ekranas: eilutinis blokas generuoja bloko linijos elementą, kuris iš esmės yra linijos elementas, tačiau išlaiko bloko savybes – leidžia keisti linijinius matmenis, nustatyti paraštes, įtraukas ir pan.

Bloko eilutės elementas turi šias savybes:

Bloko aukštis ir plotis nustatomi automatiškai, atsižvelgiant į turinį ir užpildymo reikšmę ( kamšalas)
bloko aukštį ir plotį galima nustatyti fiksuotai
Nėra griūvančių sienų poveikio.

Pažvelkime į paprasto naršymo meniu su vaizdu ir nuoroda kūrimo pavyzdį.

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >1 meniu nuoroda yra ilgesnė nei įprastai < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >2 meniu nuoroda < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >3 meniu nuoroda < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >4 meniu nuoroda

Nav ( ekranas: eilutinis blokas; /*Nustatyti blokinės linijos ekraną*/ plotis: 180px; /*nustatykite bloko plotį*/ fonas: dodgeblue; ). string (teksto lygiavimas: centre; /*Lygiuoti tekstą horizontaliai*/ }

Dėl to gauname tokį meniu:

Kaip matote, pasirodė šiek tiek kreivai... Bet neketiname nusiminti, todėl savo divams taikome CSS ypatybę vertikaliai išlyginti(daugiau informacijos rasite žemiau):

vertikalus lygiavimas: viršuje;

Mūsų naršymo juosta dabar sulygiuota su viršutine eilute:

Žinoma, pateiktas pavyzdys primityvus, bet esu tikras, kad remiantis juo galima sukurti tikrą šedevrą!!!

Svarbu!!!

Jei naudojate senesnes Firefox versijas, pridėkite eilutę:
ekranas: - moz- inline- stack;

ir apvyniokite elementą į papildomą div apvalkalą.
IE 7 ir ankstesnės versijos – pridėkite eilutes:
priartinimas: 1 ; /*set hasLayout*/ * display: inline; /*žvaigždutė – įsilaužimas į IE */ _aukštis: 250 taškų; /*min-height neveikia IE6*/
Pastebiu, kad konkrečios naršyklės selektyviai reaguoja į šias eilutes (Firefox į pirmąją, IE į likusias).

Lentelės metodas

Lentelinis metodas jau seniai buvo išdėstymo standartas, visų pirma dėl žymėjimo paprastumo ir intuityvumo. Greičiausiai dėl to atsirado lentelės formatavimas CSS.

Savybės ekranas: lentelė (stalo langelis, eilutinė lentelė), leidžia atlikti elementų lentelių formatavimą nenaudojant HTML lentelių.

Kad blokai būtų išdėstyti horizontaliai, mums reikia pirminio elemento, kuris turi savybę ekranas: lentelė, ir antriniai elementai (ląstelės), turintys savybę ekranas: lentelės langelis:

< div class = "wrap" > < div class = "bblock" >Mes statome < div class = "bblock" >lentelės formos < div class = "bblock" >eilė < div class = "bblock" >iš divų

Bblock ( ekranas: lentelės langelis; šrifto dydis: 32 pikseliai; plotis: 200 pikselių; aukštis: 200 pikselių; fonas: auksinis; tekstas - lygiuoti: centre; vertikaliai - lygiuoti: viduryje; ) . wrap (ekranas: lentelė; tarpas tarp kraštinių: 20 piks. 20 piks.; fono spalva: tamsiai pilka; )

Svarbu!!!

Skirtingai nuo „Inline-block“ ir „Float“ metodų, mažinant žiniatinklio naršyklės lango plotį, langeliai nejuda žemyn.
Negalite nustatyti pseudo lentelės langelių paraštės ypatybės.
Suderinamumas tarp naršyklių. Ekrano ypatybės: lentelė* šeimos nepalaiko IE6, IE7. Be to, IE8 galite matyti pseudolentelės elementų dinaminio atvaizdavimo klaidą atsitiktinai trūkstamų langelių pavidalu. Ši klaida dažniausiai atsiranda pradinio dokumento piešimo metu.

Užduotis

Sulygiuokite nurodyto pločio bloko elementą su horizontaliu tinklalapio centru.

Sprendimas

Pagal numatytuosius nustatymus bloko elemento plotis nustatytas kaip automatinis ir paprastai užims visą galimą plotį. Todėl, naudodami aprašytą metodą, centre galite lygiuoti tik elementą, kurio plotis yra aiškiai nurodytas procentais arba pikseliais. Po to turėtumėte pridėti paraštę prie sluoksnio stiliaus kairėje (stiliaus ypatybė margin-left ) ir dešinėje (margin-right ) su reikšme auto . Tačiau taip pat galite naudoti universaliosios paraštės ypatybę su reikšme auto (1 pavyzdys).

1 pavyzdys: sluoksnio lygiavimas centre

HTML5 CSS 2.1 IE Cr Op Sa Fx

Sluoksnio suderinimas su centru

Vektoriaus ilgis apverčia teigiamą dvigubą integralą.

Pavyzdžio rezultatas parodytas fig. 1.

1 parinktis: neigiama įtrauka.

2 variantas. Automatinis įtraukimas.

3 variantas. Lentelė.

Norėdami pridėti slinktį prie šio pavyzdžio, turėsite pridėti dar vieną elementą prie dizaino.
Pavyzdys: jsfiddle.net/serdidg/fk5nqh52/3.

4 variantas. Pseudoelementas.

Arba, jei reikia, kad tėvas užimtų tik lango aukštį ir plotį, o ne visą puslapį:

5 variantas. Flexbox.

6 variantas. Transformuoti.

Tinka, jei mus riboja struktūra ir nėra galimybės manipuliuoti pirminiu elementu, bet bloką reikia kažkaip sulygiuoti. CSS funkcija translate() ateis į pagalbą. 50 % absoliučios padėties nustatymo vertė nustatys bloko viršutinį kairįjį kampą tiksliai centre, tada neigiama vertimo vertė perkels bloką pagal jo matmenis. Atkreipkite dėmesį, kad neigiami efektai gali atsirasti kaip neryškūs kraštai arba šrifto stilius. Be to, šis metodas gali sukelti problemų apskaičiuojant bloko padėtį naudojant „Java“ scenarijų. Kartais, norint kompensuoti 50% pločio praradimą dėl CSS kairiosios savybės, blokui nurodyta taisyklė gali būti taikoma. pagalba: paraštė-dešinė: -50% .

Variantas 7. Mygtukas.

Vartotojo parinktis kur blokasįrėminta mygtuko žymoje. Mygtukas turi savybę centruoti viską, kas jame yra, būtent įterptosios ir blokinės linijos (inline-block) modelio elementus. Praktiškai nerekomenduoju jo naudoti.

Premija

Naudodamiesi 4-osios parinkties idėja, galite nustatyti išorines paraštes blokas, o pastarieji bus tinkamai rodomi, apsupti slinkties juostomis.
Pavyzdys: jsfiddle.net/serdidg/nfqg9rza/2.

Taip pat galite sulygiuoti vaizdą į centrą ir jei vaizdas didesnis tėvas, pakeiskite jį pagal dydį tėvas.
Pavyzdys: jsfiddle.net/serdidg/nfqg9rza/3.
Pavyzdys su dideliu paveikslu:

Taip pat į temą

Barščių su kiauliena receptas

Kepenys grietinės padaže: receptas

Įdomios mįslės moksleiviams

Pemmicanas - vytinta mėsa, pamirkyta riebalais, receptas ir bendras paruošimo principas

Kaip informacija perduodama iš receptorių į smegenis!