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: nevyniojamas ir šrifto dydis: 0, po kurio blokas atšaukite šiuos stilius naudodami šį - tarpą: normalus. IN šiame pavyzdyješrifto dydis: 0 reikia norint pašalinti gautą tarpą 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 prisiminti renkantis šis metodas- 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 ir nėra galimybės manipuliuoti pirminiu elementu, bet bloką reikia kažkaip sulygiuoti. CSS ateis į pagalbą vertimo funkcija(). Esant 50% vertei absoliutus pozicionavimas viršutinį kairįjį bloko kampą nustatys tiksliai centre, tada neigiama vertimo vertė perkels bloką, palyginti su jo matmenimis. 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ų, kartais siekiant kompensuoti 50% pločio praradimą naudojant css Kairėje savybė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 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.
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
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:
Sulygiuokite tekstą vertikaliai CSS- labai sunkus darbas. Mačiau pakankamai daug žmonių, kurie su tuo kovoja, todėl vis randu „kritinių“ klaidų, kai kalbama apie tikrąjį reaguojantį dizainą.
Tačiau nebijokite: jei jau susiduriate su vertikaliu CSS lygiavimu, atėjote į reikiamą vietą.
Pakalbėkime apie CSS vertikalaus lygiavimo ypatybę
Kai pradėjau dirbti interneto svetainių kūrimo srityje, šiek tiek kovojau su šia nuosavybe. Maniau, kad jis turėtų veikti kaip klasikinis turtas" teksto lygiavimas“ O jei viskas būtų taip paprasta...
vertikaliojo suderinimo CSS nuosavybė puikiai veikia su lentelėmis, bet ne su divais ar kitais elementais. Kai naudojate jį div, jis sulygiuoja elementą su kitais divais, bet ne jo turinį. Šiuo atveju nuosavybė veikia tik su ekranu: inline-block; .
Žiūrėti pavyzdį
Mes norime sutelkti turinį, o ne patį div!
Turite dvi galimybes. Jei turite tik teksto div, galite naudoti ypatybę eilutės aukštis. Tai reiškia, kad jūs turite žinoti elemento aukštį, bet negalite jo nustatyti. Tokiu būdu jūsų tekstas visada bus centre.
Tiesa apie šį požiūrį CSS vertikalus lygiavimas yra trūkumas. Jei tekstas yra kelių eilučių, eilutės aukštis bus padaugintas iš eilučių skaičiaus. Greičiausiai tokiu atveju gausite siaubingai išdėstytą puslapį.
Pažvelkite į šį pavyzdį
Jei turinį, kurį norite centruoti, sudaro daugiau nei viena eilutė, geriau naudoti lentelę divs. Taip pat galite naudoti lenteles, bet tai nėra semantiškai teisinga. Jei reikia pertraukų, kad būtų galima reaguoti, geriau naudoti div elementus.
Kad tai veiktų, turi būti pirminis konteineris su ekranu: lentelė ir jos viduje - reikalingas kiekis stulpelius, kuriuos norite centruoti naudodami ekraną: lentelė-ląstelė ir vertikalus lygiavimas: vidurys .
Žiūrėti pavyzdį
Kodėl tai veikia su lentelės žymėjimu, bet ne su div elementais? Kadangi lentelės eilutės yra vienodo aukščio. Kai lentelės langelio turinys nenaudoja visos galimos aukščio vietos, naršyklė automatiškai prideda vertikalų užpildymą, kad turinys būtų centre.
padėties nuosavybė
Pradėkime nuo CSS div vertikalaus lygiavimo pagrindų:
- padėtis: statinis yra numatytasis. Elementas atvaizduojamas pagal HTML tvarką;
- pozicija: absoliuti – naudojama tiksliai elemento vietai nustatyti. Ši padėtis visada yra susijusi su artimiausiu santykinai išdėstytu pirminiu elementu (ne statinis). Jei nenustatysite tikslios elemento padėties, prarasite jo kontrolę. Jis pasirodys atsitiktinai, visiškai nepaisydamas dokumento srauto. Pagal numatytuosius nustatymus elementas rodomas viršutiniame kairiajame kampe;
- padėtis: santykinė – naudojama elemento padėties atžvilgiu jo atžvilgiu normali padėtis(statinis). Ši reikšmė išsaugo dokumentų srauto tvarką;
- pozicija: fiksuota – naudojama elemento padėties atžvilgiu naršyklės lango atžvilgiu, kad jis visada būtų matomas peržiūros srityje.
Pastaba: kai kurios savybės ( viršuje ir z indeksu) veiks tik tada, kai elementas nustatytas į padėtį (ne statinis).
Eikime prie reikalo!
Ar norite įgyvendinti CSS lygiavimas centre vertikaliai? Pirmiausia sukurkite elementą su santykine padėtimi ir matmenimis. Pavyzdžiui: 100 % pločio ir aukščio.
Antrasis veiksmas gali skirtis priklausomai nuo tikslinių naršyklių, tačiau galite naudoti vieną iš dviejų parinkčių:
- Senas turtas: reikia žinoti tikslų lango dydį, kad pašalintumėte pusę pločio ir pusę aukščio. Žiūrėti pavyzdį;
- Nauja CSS3 nuosavybė: galite pridėti transformavimo ypatybę, kurios vertimo vertė yra 50%, ir blokas visada bus centre. Žiūrėti pavyzdį.
Iš esmės, jei norite sutelkti turinį, niekada nenaudoti viršaus: 40% arba kairėje: 300 pikselių. Tai puikiai veikia bandomuosiuose ekranuose, bet nėra centre.
Prisiminti padėtį: fiksuota? Su juo galite padaryti tą patį, ką ir su absoliučia padėtimi, tačiau jums nereikia santykinės pirminio elemento padėties – jis visada bus išdėstytas naršyklės lango atžvilgiu.
Ar girdėjote apie „flexbox“ specifikaciją?
Galite naudoti „flexbox“. Tai daug geriau nei bet kuri kita galimybė lygiuoti tekstą CSS centras vertikaliai. Naudojant „flexbox“, elementų valdymas yra tarsi vaikų žaidimas. Problema ta, kad kai kurių naršyklių, pvz., IE9 ir toliau pateiktų versijų, reikia atsisakyti. Štai pavyzdys, kaip vertikaliai centruoti bloką:
Žiūrėti pavyzdį
Naudodami „flexbox“ išdėstymą galite centruoti kelis blokus.
Jei pritaikysite tai, ko išmokote iš šių pavyzdžių, galėsite įsisavinti CSS vertikalus bloko lygiavimas kuo greičiau.
Nuorodos ir tolesnis skaitymas
Mokymasis CSS žymėjimo
FlexBox Froggy
Flexbox smėlio dėžė
Straipsnio vertimas “ CSS vertikalus lygiavimas visiems (įskaitant manekenus)“ parengė draugiška projekto komanda.
Dėliojant puslapį dažnai reikia atlikti centrinį lygiavimą naudojant CSS metodą: pavyzdžiui, centruoti pagrindinį bloką. Yra keletas šios problemos sprendimo variantų, kurių kiekviena anksčiau ar vėliau turi pasinaudoti bet kuris maketuotojas.
Centrinis teksto lygiavimas
Dažnai dekoratyviniais tikslais reikia nustatyti, kad tekstas būtų išlygiuotas centre. Šiuo atveju CSS leidžia sutrumpinti išdėstymo laiką. Anksčiau tai buvo daroma naudojant HTML atributus, tačiau dabar standartas reikalauja, kad tekstas būtų lygiuojamas naudojant stiliaus lapus. Skirtingai nuo blokų, kurių paraštes reikia pakeisti, CSS, tekstas centruojamas naudojant vieną eilutę:
- text-align:center;
Ši nuosavybė yra paveldima ir perduodama iš tėvų visiems palikuonims. Įtakoja ne tik tekstą, bet ir kitus elementus. Norėdami tai padaryti, jie turi būti įterptieji (pavyzdžiui, span) arba eilutiniai blokai (bet kokie blokai, kurių ypatybė yra nustatyta: blokas). Pastarasis variantas taip pat leidžia keisti elemento plotį ir aukštį bei lanksčiau reguliuoti įtraukas.
Dažnai puslapiuose lygiavimas priskiriamas pačiai žymai. Tai iš karto panaikina kodą, nes W3C panaikino suderinimo atributą. Nerekomenduojama jo naudoti puslapyje.
Bloko išlygiavimas į centrą
Jei reikia nustatyti div lygiavimas centre, CSS gali pasiūlyti gana daug patogus būdas: naudokite išorines paraštes. Įtraukas galima nustatyti ir bloko elementams, ir eilutiniams bloko elementams. Ypatybės vertė turi būti 0 (vertikalus užpildymas) ir automatinis (automatinis horizontalus užpildymas):
- paraštė: 0 automatinis;
Dabar ši parinktis pripažinta visiškai galiojančia. Naudojant išorinį užpildymą taip pat galima nustatyti, kad vaizdas būtų centre: jis leidžia išspręsti daugybę problemų, susijusių su elemento padėtimi puslapyje.
Sulygiuokite bloką į kairę arba į dešinę
Kartais CSS centre išlygiuoti nereikia, tačiau reikia dėti du blokus vienas šalia kito: vieną kairiajame krašte, kitą dešinėje. Šiuo tikslu yra plūduriuojanti savybė, kuri gali turėti vieną iš trijų reikšmių: kairėje, dešinėje arba jokios. Tarkime, kad turite du blokus, kuriuos reikia sudėti vienas šalia kito. Tada kodas bus toks:
- .left (float:left;)
- .right(float:right)
Jei taip pat yra trečias blokas, kuris turėtų būti po pirmaisiais dviem blokais (pavyzdžiui, poraštė), tada jam turi būti suteikta aiški savybė:
- .left (float:left;)
- .right(float:right)
- poraštė (aišku: abu)
Faktas yra tas, kad blokai su klasėmis kairėje ir dešinėje iškrenta iš bendro srauto, tai yra, visi kiti elementai nepaiso paties suderintų elementų egzistavimo. „Clear:both“ ypatybė leidžia poraštėje ar bet kuriame kitame bloke matyti elementus, kurie iškrito iš srauto, ir neleidžia plūduriuoti tiek kairėje, tiek dešinėje. Todėl mūsų pavyzdyje poraštė judės žemyn.
Vertikalus lygiavimas
Kartais neužtenka nustatyti centrinio išlygiavimo naudojant CSS metodus, reikia pakeisti ir vertikalią antrinio bloko padėtį. Bet koks eilutinis arba eilutinio bloko elementas gali būti įdėtas viršutiniame arba apatiniame krašte, pirminio elemento viduryje arba bet kurioje vietoje. Dažniausiai blokas turi būti sulygiuotas su centru, tam naudojamas vertikalios lygiavimo atributas. Tarkime, kad yra du blokai, vienas įdėtas į kitą. Šiuo atveju vidinis blokas yra inline-block elementas (rodymas: inline-block). Turite išlygiuoti antrinį bloką vertikaliai:
- išlygiavimas į viršų - .child(vertikaliai sulygiuoti:viršuje);
- lygiavimas centre - .child(vertikaliai sulygiuoti:viduryje);
- išlygiavimas iš apačios - .child(vertikaliai sulygiuoti:apačioje);
Nei teksto lygiavimas, nei vertikalus lygiavimas neturi įtakos bloko elementams.
Galimos problemos su išlygintais blokais
Kartais „div“ centravimas naudojant CSS gali sukelti problemų. Pavyzdžiui, naudojant float: tarkime, kad yra trys blokai: .first, .second ir .third. Antrasis ir trečiasis blokai yra pirmame. Elementas su antra klase lygiuojamas kairėje, o paskutinis blokas – dešinėje. Išlyginus, abu iškrito iš srauto. Jei pirminiame elemente nėra nustatyto aukščio (pvz., 30 em), jis nebebus ištemptas iki antrinių blokų aukščio. Norėdami išvengti šios klaidos, naudokite „tarpiklį“ – specialų bloką, kuris mato .second ir .third. CSS kodas:
- .second(float:left)
- .third(plūduriuoti:dešinėn)
- .clearfix(aukštis: 0; išvalyti: abu;)
Dažnai naudojama pseudoklasė:after, kuri taip pat leidžia grąžinti blokus į savo vietą sukuriant pseudotarpiklį (pavyzdyje div su konteinerio klase yra inside.first ir include.left and.right) :
- .left(float:left)
- .right(float:right)
- .container:af(turinys:""; ekranas: lentelė; išvalyti: abu;)
Aukščiau pateiktos parinktys yra labiausiai paplitusios, nors yra keletas variantų. Eksperimentuodami visada galite rasti paprasčiausią ir patogiausią būdą sukurti pseudotarpiklį.
Kita problema, su kuria dažnai susiduria maketuotojai, yra įterptųjų blokų elementų išlygiavimas. Po kiekvieno iš jų automatiškai pridedamas tarpas. Maržos ypatybė, kuri nustatyta į neigiamą įtrauką, padeda su tuo susidoroti. Yra ir kitų metodų, kurie naudojami daug rečiau: pavyzdžiui, nulinis Šiuo atveju pirminio elemento ypatybėse rašoma šrifto dydis: 0. Jei blokuose yra teksto, reikiamas šrifto dydis jau grąžinamas į eilutinio bloko elementų ypatybes. Pavyzdžiui, šrifto dydis:1em. Šis metodas ne visada patogus, todėl daug dažniau naudojamas variantas su išorinėmis įtraukomis.
Blokų išlygiavimas leidžia sukurti gražius ir funkcionalius puslapius: tai apima bendro maketo išdėstymą, prekių išdėstymą internetinėse parduotuvėse ir nuotraukas vizitinių kortelių svetainėje.
Laba diena, šio leidinio prenumeratoriai ir skaitytojai. Šiandien noriu papasakoti apie tai, kaip centruoti tekstą CSS. Kai kuriuose ankstesniuose straipsniuose netiesiogiai paliečiau šią temą, todėl jūs turite tam tikrų žinių šioje srityje.
Tačiau šiame leidinyje papasakosiu apie visus skirtingus objektų lygiavimo būdus, taip pat paaiškinsiu, kaip pastraipas įtraukti ir perbraukti. Taigi pradėkime mokytis medžiagos!
HTML ir jo palikuonys ir lygiuotis
Šis metodas beveik nenaudojamas, nes jį pakeitė pakopinio stiliaus lapų įrankiai. Tačiau žinodami, kad tokia žyma egzistuoja, jums nepakenks.
Dėl patvirtinimo ( Šis terminas yra išsamiai aprašytas straipsnyje ""), tada pati html specifikacija smerkia naudojimą < centras>, nes galiojimui būtina naudoti perėjimą DOKTIPAS>.
Šis tipasleidžia prasiskverbti draudžiamiems elementams.
Dabar pereikime prie atributo lygiuotis. Jis nustato horizontalų objektų išlygiavimą ir tinka po žymos deklaracijos. Paprastai jis gali būti naudojamas turiniui lygiuoti į kairę ( paliko), išilgai dešiniojo krašto ( teisingai), centre ( centras) ir pagal teksto plotį ( pateisinti).
Žemiau pateiksiu pavyzdį, kuriame paveikslėlį ir pastraipą įdėsiu centre.
Šis turinys bus centre.
Atkreipkite dėmesį, kad vaizdo atributas, kurį analizuojame, turi šiek tiek kitokias reikšmes.
Pavyzdyje, kurį naudojau lygiuoti="vidurys". Dėl to vaizdas buvo sulygiuotas taip, kad sakinys būtų aiškiai išdėstytas paveikslo viduryje.
Centravimo įrankiai css
CSS ypatybės, skirtos blokams, tekstui ir grafiniam turiniui sulyginti, naudojamos daug dažniau. Tai visų pirma lemia stilių įgyvendinimo patogumas ir lankstumas.
Taigi pradėkime nuo pirmosios teksto centravimo savybės – tai yra tekstas-lygiuotis.
Jis veikia taip pat, kaip lygiavimas . Tarp raktinių žodžių galite pasirinkti vieną iš bendro sąrašo arba paveldėti protėvio savybes ( paveldėti).
Norėčiau pažymėti, kad css3 galite nustatyti dar 2 parametrus: pradėti– priklausomai nuo teksto rašymo taisyklių (iš dešinės į kairę arba atvirkščiai), nustato lygiavimą į kairę arba į dešinę (panašiai kaip darbe į kairę arba į dešinę) ir galas– priešinga pradžiai (rašant tekstą iš kairės į dešinę veikia kaip dešinėn, rašant iš dešinės į kairę – kairėn).
Sakinys dešinėje
Sakinys naudojant pabaigą
Papasakosiu apie mažą triuką. Renkantis vertę pateisinti paskutinė eilutė gali nepatraukliai kabėti nuo apačios. Norėdami, pavyzdžiui, pastatyti jį centre, galite naudoti nuosavybę text-align-last.
Norėdami vertikaliai sulygiuoti svetainės turinį arba lentelės langelius, naudokite ypatybę vertikaliai išlyginti. Žemiau aprašiau pagrindinius raktinius žodžius elementas.
| raktinis žodis | Tikslas |
| pradinė linija | Nurodo lygiavimą su protėvio linija, vadinama bazine linija. Jei protėvio objektas neturi tokios linijos, tada išlygiavimas vyksta išilgai apatinės ribos. |
| vidurio | Mutuoto objekto vidurys sulygiuotas su bazine linija, prie kurios pridedama pagrindinio elemento aukščio žemė. |
| apačioje | Pasirinkto turinio apačia prisitaiko prie po juo esančio objekto apačios. |
| viršuje | Panašus į apačią, bet su viršutine objekto dalimi. |
| super | Padaro simbolio viršutinį indeksą. |
| sub | Padaro elementą apatinį indeksą. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
C IN E TAPIEKAM
|
Įdubimai
Ir galiausiai pasiekiame pastraipos įtraukas. CSS kalba naudoja specialią ypatybę, vadinamą teksto įtrauka.
Su jo pagalba galite padaryti tiek raudoną liniją, tiek iškyšą (reikia nurodyti neigiamą reikšmę).
Norėdami sukurti raudoną liniją, turite žinoti tik vieną parametrą.
Tai paprasta teksto įtraukos savybė.
Giriu tuos, kurie kiekvieną pavyzdį išbandė praktiškai. Siųskite savo draugams nuorodas į mano tinklaraštį ir nepamirškite užsiprenumeruoti. Sėkmės! Iki!
Pagarbiai, Roman Chueshov
Skaityti: 675 kartus
Svetainės puslapių išdėstymas ir išlygiavimas centre yra kūrybingas darbas ir dažnai sukelia sunkumų pradedantiesiems. Taigi pažiūrėkime, kaip tai padaryti. Tarkime, kad norime sukurti tokios struktūros puslapį:
Mūsų puslapis susideda iš keturių blokų: antraštės, meniu, turinio ir poraštės. Norėdami centruoti puslapį, šiuos keturis blokus įdėsime į vieną pagrindinį bloką:
Svetainės antraštė
Turinys
Svetainės apačia
Naudodamiesi šia struktūra kaip pavyzdžiu, apsvarstysime keletą variantų.
Guminės aikštelės išdėstymas ir centravimas
Klojant guminę aikštelę, pagrindinis naudojamas matavimo vienetas yra -%, nes aikštelė turi išsitiesti per plotį ir užimti visą laisvą erdvę.
Todėl „antraštės“ ir „poraštės“ blokų plotis bus 100% ekrano pločio. Tegul bloko "meniu" plotis yra 30%, o blokas "turinys" turi būti šalia bloko "meniu", t.y. jis turi turėti kairiąją paraštę (margin-left), kurios plotis lygus „meniu“ bloko pločiui, t.y. trisdešimt%.
Kad blokeliai „meniu“ ir „turinys“ atsidurtų vienas šalia kito, „meniu“ bloką paverskime plūduriuojančiu ir nustumkime į kairįjį kraštą. Taip pat nustatysime savo blokų fono spalvas. Dabar parašykime visa tai stiliaus lape (style.css puslapyje)
#header(fonas:#3e4982; plotis:100%; aukštis:110px; teksto lygiavimas:centras; spalva:#FFFFFF; šrifto dydis:24px; padding-top: 40px; ) #menu(fonas:#6173cb; float :left: 300px; text-align:center: 18px; #3e4982: abu plotis: 50px;
Blokų aukštis buvo nustatytas sąlygiškai, kad rezultatas būtų matomas. Pažiūrėkite į mūsų puslapį savo naršyklėje:
Jei pakeisite naršyklės lango dydį, pasikeis visų blokų plotis. Tai ne visada patogu, nes... Kai meniu blokas ištemptas, atsiranda tuščia vieta. Todėl "meniu" bloko plotis dažnai yra fiksuotas, todėl padarykime tą patį. Norėdami tai padaryti, pakeiskite atitinkamų savybių reikšmes stiliaus lape:
... #meniu(fonas:#6173cb; float:left; plotis:200px; aukštis:300px; ) #content(fonas:#ffffff; margin-left:200px; aukštis:300px; ) ...
Dabar mūsų puslapis plečiasi natūraliau. Naudojant sklandų išdėstymą, puslapiai užima visą ekrano plotį, todėl puslapių lygiuoti nereikia.
Bet jei norite, galite padaryti, kad jūsų puslapis būtų vienodai užpildytas ekrano kairėje ir dešinėje. Norėdami tai padaryti, turite pridėti stilių prie „pagrindinio“ bloko, kuris yra visų kitų blokų konteineris:
Dabar mūsų puslapis atrodo taip:
Aikštelės išdėstymas ir centravimas, fiksuotas plotis
Tokiu atveju turėsime nustatyti fiksuotus savo blokų dydžius:
#main(plotis:800px; ) #header(fonas:#3e4982; plotis:800px; aukštis:150px; text-align:center; color:#FFFFFF; šrifto dydis:24px; padding-top:40px; ) #menu (fonas: #6173cb; float:left; plotis:200px; aukštis:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; paraštė kairėje: 200 pikselių aukštis: 300 tšk. dydis: 14 pikselių; užpildas viršuje: 10 pikselių)
Dabar mūsų puslapis yra prispaustas prie kairiojo ekrano krašto.
Tokiu atveju svetainės puslapių išlygiavimas centre gali būti atliekamas taip. Prisiminkime, kad mūsų puslapyje yra žyma „body“, kuriai taip pat galima suteikti plotį ir šiek tiek paminkštinti.
Padarykime taip: suteikite žymai „body“ 800 pikselių plotį (kaip „pagrindiniam“ blokui) ir 50% užpildymo kairėje pusėje. Tada visas „pagrindinio“ bloko turinys bus rodomas dešinėje ekrano pusėje (t. y. iš vidurio į dešinę):
Kad mūsų „pagrindinis“ blokas būtų ekrano viduryje, jo vidurys turi sutapti su žymos „body“ viduriu. Tie. reikia perkelti „pagrindinį“ bloką į kairę per pusę jo dydžio. „Pagrindinio“ bloko plotis yra 800 pikselių, o tai reiškia, kad jam reikia nustatyti ypatybę „margin-left:-400px“. Taip, ši savybė gali turėti neigiamas reikšmes, tada kairioji paraštė sumažinama (t. y. perkeliama į kairę). Ir tai yra būtent tai, ko mums reikia.
Dabar stiliaus lapas atrodo taip:
body( plotis: 800 tšk.; padding-left: 50%; ) #main( plotis: 800 tšk.; paraštė-kairė: -400 tšk.; ) #header( background: # 3e4982; plotis: 800 piks.; aukštis: 150 tšk.; teksto lygiavimas: centre ; spalva: #FFFFFF; šrifto dydis: 40 pikselių; šrifto dydis: 18 pikselių; padding-top: 10px; plotis:800px;teksto lygiavimas:centras;šrifto dydis:14px;
Ir mūsų puslapis naršyklėje yra tiksliai viduryje:
Išnagrinėjome dvi svetainės puslapių centravimo galimybes. Tiesą sakant, tai nėra dogma. Galite eksperimentuoti ir sugalvoti savo versiją, tiesiog patikrinkite, kaip ji veikia skirtingose naršyklėse. Deja, tai, kas gerai rodoma „FireFox“ ar „Opera“, gali būti visiškai nesuprantama IE ir atvirkščiai. Ir mes turime tai atsiminti.
Sėkmės jums kūrybiniuose ieškojimuose!
