tinka puslapyje yra dažnai būtina atlikti centras lygiavimo CSS-būdu: pavyzdžiui, iki centro pagrindinį bloką.Yra keletas šios problemos sprendimų, kurių kiekvienas anksčiau ar vėliau turi naudoti bet programuotojas.
Lygiuoti tekstą centre
dažnai dekoratyviniais tikslais norite nustatyti teksto lygiavimą centre, CSS, šiuo atveju, sumažina nustatymo metu.Anksčiau tai buvo daroma naudojant HTML atributus, dabar standartas reikalauja suderindama tekstą naudodami stiliaus lapus.Skirtingai nuo bloko, kuriam norite pakeisti išorines ribas, su CSS teksto išlyginimo viduryje yra pagamintas su vienoje eilutėje:
- text-align: center;
Šis viešbutis yra paveldima ir perduodama iš tėvų, visiems vaikams.Ji turi įtakos ne tik tekstą, bet ir kitų elementų.Norėdami tai padaryti, jie turi būti mažosiomis raidėmis (pavyzdžiui, patikros) arba linijos blokas (bet blokus, kurie nustato objekto display: block).Pastarasis variantas taip pat leidžia jums keisti plotį ir aukštį lanksčiau konfigūracijos įdubimas.
Dažnai puslapiai suderinti atributą į pačią žymę.Tai iš karto daro kodas negalioja, nes W3C pripažino align atributą paseno.Jo nerekomenduojama puslapyje.
blokelio centre
Jei norite nurodyti į div centro derinimą, CSS gali pasiūlyti gana paprastą būdą: naudotis išorės įspaudimo skirtumu.Apmušalas gali būti nustatyta kaip blokinių elementų ir line-bloką.Svoysva vertė turėtų būti nustatyta į 0 (atitraukiama vertikaliai) ir auto (automatinės horizontaliosios įtraukos):
- margin: 0 auto;
Dabar ši galimybė yra pripažinta kaip visiškai galiojantį.Naudojant išorinį padding taip pat leidžia jums nurodyti centre derinimą: CSS marža nuosavybė leidžia mums išspręsti daugelį problemų, susijusių su pozicionavimo elementas puslapyje.
Lygiuoti blokas kairėje arba dešinėje krašto
Kartais centras suderinimas CSS būdas nereikia, tačiau būtina įdėti du vienetai vienas šalia iš kairės pusės, o kita - iš dešinės.Dėl šio objekto yra plūdė, kuri gali įgauti vieną iš trijų verčių: į kairę, dešinę, arba nė vieno.Tarkime, jūs turite dvi vienetų, kad reikia kartu sudėjus.Tada kodas bus:
- .left {float: kairėje;}
- .right {float: right}
Jei yra trečioji vienetas, kuris turi būti įforminta pirmųjų dviejų blokų (pvz poraštės), jisturite užsiregistruoti turtą aiški:
- .left {float: kairėje;}
- .right {float: right}
- apačia {aišku: tiek}
tai, kad su klasių kairysis ir dešinysis iškristi iš viso blokaitekėti, tai yra, visi kiti elementai ignoravo egzistavimui elementų išdėstomi stulpeliu.Turtas clear: both leidžia apačia ar bet kokį kitą įrenginį žr sumažėjo nuo srauto elementų ir draudžia įvyniojimas (float) abejose kairę ir į dešinę.Todėl, mūsų pavyzdyje, poraštės pasislinks žemyn.
Vertikali suderinimas
Yra atvejų, kai nepakanka rinkinys centras derinimo CSS-keliai, turite dar keičia vertikalią padėtį vaikų blokas.Bet koks linijoje arba linijos-blokas elementas gali būti prispaudžiama viršų arba apatinio krašto, esantis viduryje motininio elemento, arba gali būti bet kurioje vietoje.Dažniau reikia derinimą centre dėžutės, šis atributas naudojamas vertikalus-align.Tarkim yra du vienetai, vienas viduje kitą.Vidaus vienetas - Line-blokas elementas (display: inline-block).Būtina suderinti įrenginį vertikaliai vaikas:
- suderinami viršutinės ribos - .child {vertikali-align: top};
- centras suderinimas - .child {vertikali-align: middle};
- suderinimas apatiniame gale - .child {vertikali-align: apatinė};
ant blokinių elementų arba text-align arba vertikalios-align netaikoma.
Galimos problemos su suderinta vienetų
Kartais div align VSK-way centras gali sukelti nedidelių problemų.Pavyzdžiui, naudojant plūdę: pavyzdžiui, yra trys blokai: .first, .second ir .third.Antrasis ir trečiasis blokai yra pirmasis.Elementas su antrojo kairę suderinta, o paskutinis bloko klasė - dešinėje.Po suderinti du iš upelio sumažėjo.Jei patronuojanti nėra apibrėžta aukštį (pvz 30em), tai nebebus ruožas dukterinių vienetų aukštį.Norėdami išvengti šios klaidos, naudokite "skyriklį" - specialus vienetas, kuris mato .second ir .third.CSS-kodas:
- .second {float: left}
- .third {float: right}
- .clearfix {aukštis: 0;clear: both;}
dažnai naudojamas pseudo: po, kuri taip pat leidžia jums grįžti į blokus į vietą, sukuriant psevdorasporki (šiame pavyzdyje yra div su konteinerio klasę priklausančiais .first ir yra .left ir .right):
- .liko {float: left}
- .right {float: right}
- .container: po {turinį: '';ekranas: Stalas;clear: both;}
aukščiau Options - labiausiai paplitusi, nors yra keletas variantų.Jūs visada galite rasti lengviausias ir patogiausias būdas sukurti psevdorasporki eksperimentais.
Kita problema dažnai susiduriama išdėstymas - suderinimas linija bloko elementų.Po kiekvieno iš jų automatiškai pridėtinės erdvėje.Norėdami susidoroti su šio objekto pagalbos marža, kuri yra apibrėžta neigiamą įdubimas.Yra ir kitų būdų, kurie naudojami rečiau, pavyzdžiui, atstatyti, šrifto dydį.Tokiu atveju patronuojančios nustatyta font-size NT objektai: 0.Jei yra per teksto blokus, geležinkelių linijos bloko elementų savybės grįžo į norimo dydžio.Pavyzdžiui, font-size: 1em.Šis metodas ne visada patogu, todėl daug dažniau naudojamas variantas su išorės skirtumai.
suderinimas blokas leidžia jums sukurti gražią ir funkcionalią puslapio maketą ir tai yra bendras išdėstymas ir vieta prekių parduotuvėse ir nuotraukas ant mažos svetainėje.
