Manau, kad daugelis iš jūsų, kuriems teko susidurti su maketavimu, susidūrėte su poreikiu lygiuoti elementus vertikaliai ir žinote sunkumus, kurie iškyla lygiuojant elementą į centrą.
Taip, CSS yra speciali kelių reikšmių vertikalaus lygiavimo ypatybė, skirta vertikaliam lygiavimui. Tačiau praktiškai tai neveikia taip, kaip tikėtasi. Pabandykime tai išsiaiškinti.
Palyginkime šiuos metodus. Lygiuoti naudojant:
- stalai,
- įdubimas,
- linijos aukštis
- tempimas,
- neigiama marža,
- transformuoti
- pseudo elementas
- flexbox.
Yra du div elementai, vienas iš jų įdėtas į kitą. Suteikime jiems atitinkamas klases – išorines ir vidines.
Iššūkis yra suderinti vidinį elementą su išorinio elemento centru.
Pirma, panagrinėkime atvejį, kai išorinių ir vidinių blokų matmenys žinomas. Pridėkime taisyklės rodymą: inline-block prie vidinio elemento, o teksto sulygiavimas: centre ir vertikalus lygiavimas: vidurys prie išorinio elemento.
Atminkite, kad lygiavimas taikomas tik tiems elementams, kurie turi eilutinį arba eilutinį bloko rodymo režimą.
Nustatykime blokų dydžius, taip pat fono spalvas, kad matytume jų ribas.
Išorinis (plotis: 200 tšk.; aukštis: 200 pikselių; teksto lygiavimas: centre; vertikaliai lygiuoti: viduryje; fono spalva: #ffc; ) .vidinis ( ekranas: įterptinis blokas; plotis: 100 pikselių; aukštis: 100 pikselių; fono spalva : #fcc;)
Pritaikę stilius pamatysime, kad vidinis blokas išlygiuotas horizontaliai, bet ne vertikaliai:
http://jsfiddle.net/c1bgfffq/
Kodėl taip atsitiko? Reikalas tas, kad vertikaliojo išlygiavimo savybė turi įtakos lygiavimui pats elementas, o ne jo turinys(išskyrus atvejus, kai jis taikomas lentelės langeliams). Todėl šios savybės pritaikymas išoriniam elementui nieko nedavė. Be to, pritaikius šią savybę vidiniam elementui taip pat nieko nebus, nes eilutiniai blokai yra išlygiuoti vertikaliai gretimų blokų atžvilgiu, o mūsų atveju turime vieną eilutinį bloką.
Yra keletas būdų, kaip išspręsti šią problemą. Žemiau mes atidžiau pažvelgsime į kiekvieną iš jų.
Lygiavimas naudojant lentelę
Pirmas sprendimas, kuris ateina į galvą, yra pakeisti išorinį bloką vieno langelio lentele. Tokiu atveju lygiavimas bus pritaikytas langelio turiniui, tai yra, vidiniam blokui.
http://jsfiddle.net/c1bgfffq/1/
Akivaizdus minusas šį sprendimą– semantiniu požiūriu yra neteisinga lygiavimui naudoti lenteles. Antrasis trūkumas yra tas, kad norint sukurti lentelę, aplink išorinį bloką reikia pridėti dar vieną elementą.
Pirmąjį minusą galima iš dalies pašalinti pakeitus lentelę ir td žymas div ir nustatant lentelės rodymo režimą CSS.
.outer-wrapper ( ekranas: lentelė; ) .outer ( ekranas: lentelės langelis; )
Tačiau išorinis blokas vis tiek išliks lentelė su visomis iš to išplaukiančiomis pasekmėmis.
Lygiavimas naudojant įtraukas
Jei žinomi vidinio ir išorinio blokų aukščiai, tada išlygiavimą galima nustatyti naudojant vidinio bloko vertikalias įtraukas, naudojant formulę: (H išorinis – H vidinis) / 2.Išorinis (aukštis: 200 piks.; ) .vidinis (aukštis: 100 piks.; paraštė: 50 piks. 0; )
http://jsfiddle.net/c1bgfffq/6/
Sprendimo trūkumas yra tai, kad jis taikomas tik ribotais atvejais, kai žinomi abiejų blokų aukščiai.
Lygiavimas naudojant linijos aukštį
Jei žinote, kad vidinis blokas turi užimti ne daugiau kaip vieną teksto eilutę, galite naudoti ypatybę eilutės aukštis ir nustatyti, kad ji būtų lygi išorinio bloko aukščiui. Kadangi vidinio bloko turinys neturėtų persikelti į antrą eilutę, rekomenduojama pridėti tarpą: nowrap ir overflow: paslėptos taisyklės.Išorinis ( aukštis: 200 tšk.; linijos aukštis: 200 tšk.; ) . vidinis ( tarpas: be apvyniojimo; perpildymas: paslėptas; )
http://jsfiddle.net/c1bgfffq/12/
Šis metodas taip pat gali būti naudojamas kelių eilučių tekstui lygiuoti, jei iš naujo apibrėžiate vidinio bloko eilutės aukščio reikšmę ir taip pat pridedate rodinį: eilutinis blokas ir vertikalus lygiavimas: vidurinės taisyklės.
Išorinis (aukštis: 200 tšk.; linijos aukštis: 200 pikselių; ) .vidinis ( linijos aukštis: įprastas; ekranas: eilutinis blokas; vertikaliai sulygiuotas: vidurinis; )
http://jsfiddle.net/c1bgfffq/15/
Minusas šis metodas yra tai, kad turi būti žinomas išorinio bloko aukštis.
Lygiavimas naudojant "tempimą"
Šis metodas gali būti naudojamas, kai nežinomas išorinio bloko aukštis, bet žinomas vidinio bloko aukštis.Norėdami tai padaryti, jums reikia:
- nustatyti santykinę padėtį išoriniam blokui ir absoliučią padėties nustatymą vidiniam blokui;
- prie vidinio bloko pridėkite taisykles viršuje: 0 ir apačioje: 0, dėl to jis ištemps iki viso išorinio bloko aukščio;
- nustatykite vertikalų vidinio bloko paminkštinimą į automatinį.
http://jsfiddle.net/c1bgfffq/4/
Šios technikos idėja yra ta, kad nustačius ištempto ir absoliučiai išdėstyto bloko aukštį, naršyklė apskaičiuoja vertikalų užpildą vienodu santykiu, jei jis nustatytas kaip automatinis.
Lygiavimas su neigiamu paraštės viršumi
Šis metodas tapo plačiai žinomas ir naudojamas labai dažnai. Kaip ir ankstesnis, jis naudojamas, kai nežinomas išorinio bloko aukštis, bet žinomas vidinio.Turite nustatyti išorinį bloką į santykinę padėtį, o vidinį bloką - į absoliučią padėtį. Tada reikia perkelti vidinį bloką žemyn per pusę išorinio bloko viršaus aukščio: 50% ir pakelti jį per pusę jo paties aukščio paraštės viršaus: -H vidinis / 2.
Išorinė (pozicija: santykinė; ) .vidinė (aukštis: 100 tšk.; padėtis: absoliuti; viršuje: 50 %; paraštės viršuje: -50 tšk.; )
http://jsfiddle.net/c1bgfffq/13/
Šio metodo trūkumas yra tas, kad turi būti žinomas vidinio bloko aukštis.
Lygiavimas su transformacija
Šis metodas yra panašus į ankstesnį, tačiau jį galima naudoti, kai nežinomas vidinio bloko aukštis. Šiuo atveju, užuot nustatę neigiamą pikselių užpildymą, galite naudoti transformavimo ypatybę ir perkelti vidinį bloką aukštyn naudodami translateY funkciją ir reikšmę -50% .Išorinis ( pozicija: santykinis; ) .vidinis ( padėtis: absoliuti; viršuje: 50 %; transformuoti: išversti Y (-50 %); )
http://jsfiddle.net/c1bgfffq/9/
Kodėl ankstesniu metodu buvo neįmanoma nustatyti vertės procentais? Kadangi procentinės maržos reikšmės apskaičiuojamos atsižvelgiant į pagrindinį elementą, 50% vertė būtų pusė išorinės dėžutės aukščio, o vidinę dėžę turėtume pakelti iki pusės jo paties aukščio. Tam puikiai tinka transformacijos turtas.
Šio metodo trūkumas yra tas, kad jo negalima naudoti, jei yra vidinis blokas absoliutus pozicionavimas.
Sulygiavimas su Flexbox
Šiuolaikiškiausias vertikalaus išlygiavimo būdas yra naudoti lankstų dėžės išdėstymą (populiariai žinomą kaip Flexbox). Šis modulis leidžia lanksčiai valdyti elementų išdėstymą puslapyje, išdėstant juos beveik bet kur. „Flexbox“ išlygiavimas centre yra labai paprasta užduotis.Išorinis blokas turi būti nustatytas taip, kad būtų rodomas: flex, o vidinis blokas – paraštė: auto . Ir viskas! Gražu, ar ne?
Išorinis (ekranas: lankstus; plotis: 200 piks.; aukštis: 200 piks.; ) .vidinis (plotis: 100 piks.; paraštė: automatinis; )
http://jsfiddle.net/c1bgfffq/14/
Šio metodo trūkumas yra tas, kad „Flexbox“ palaiko tik šiuolaikinės naršyklės.
Kurį metodą turėčiau pasirinkti?
Turite pradėti nuo problemos teiginio:- Norėdami vertikaliai lygiuoti tekstą, geriau naudoti vertikalias įtraukas arba eilutės aukščio savybę.
- Absoliučiai išdėstytiems elementams, kurių aukštis žinomas (pavyzdžiui, piktogramoms), metodas su neigiama viršutinės paraštės savybe yra idealus.
- Daugiau sudėtingų atvejų Kai bloko aukštis nežinomas, reikia naudoti pseudo elementą arba transformavimo savybę.
- Na, o jei jums taip pasisekė, kad jums nereikia palaikyti senesnių IE naršyklės versijų, tada, žinoma, geriau naudoti „Flexbox“.
Žymos: pridėti žymų
Svetainių 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 :kairėje; plotis: 30%; aukštis: 300 taškų; teksto lygiavimas: centre; spalva: #FFFFFF; šrifto dydis: 18 pikselių; užpildymas viršuje: 10 pikselių; ) #content( fonas: #ffffff; paraštė kairėje: 30% ; aukštis: 300 taškų; teksto lygiavimas: centre; ) # poraštė ( fonas: # 3e4982; aiškus: abu; plotis: 100%; aukštis: 50 piks.; teksto lygiavimas: centre; spalva: # FFFFFF; šrifto dydis: 14 pikselių; užpildymas viršuje: 10 piks.;)
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; margin-left: 200px; aukštis: 300px; text-align:center; ) #footer(fonas:#3e4982; aiškus:abi; plotis:800px; aukštis:50px; teksto lygiavimas:centras; spalva:#FFFFFF; šriftas- dydis: 14 pikselių; užpildymas 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 „body“ žyma, 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ų, 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: 24 pikseliai; užpildymas viršuje: 40 pikselių; ) #meniu (fonas: # 6173 cb; slankusis: kairėn; plotis: 200 pikselių; aukštis: 300 pikselių; teksto lygiavimas: centre; spalva: #FFFFFF; šrifto dydis: 18 pikselių; užpildymas viršuje: 10 tšk.; ) #content( fonas: #ffffff; paraštė kairėje: 200 tšk.; aukštis: 300 taškų; teksto lygiavimas: centre; ) #footer( fonas: # 3e4982; aiškus: abu; plotis: 800 taškų; aukštis: 50 taškų; teksto lygiavimas: centre; spalva: #FFFFFF; šrifto dydis: 14 pikselių; užpildymas viršuje: 10 pikselių; )
Ir mūsų puslapis naršyklėje yra tiksliai viduryje:
Išnagrinėjome dvi svetainės puslapių centravimo parinktis; iš tikrųjų 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!
Dėliojant puslapį dažnai reikia lygiuotis CSS centras-way: pavyzdžiui, centrinį 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ų lygiuojamas centre; CSS šiuo atveju 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 lygiavimas 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 centruoti div, CSS gali pasiūlyti gana 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 CSS metodais nustatyti centrinio išlygiavimo, taip pat reikia pakeisti antrinio bloko vertikalią 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 bloką reikia sulygiuoti su centru, tam naudojamas vertikalaus 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);
Įjungta bloko elementai nei teksto lygiavimas, nei vertikalus lygiavimas neturi jokio poveikio.
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 savybėse rašomas š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.
Sveiki! Toliau įsisavinkime pagrindus HTML kalba. Pažiūrėkime, ką reikia parašyti, kad tekstas būtų sulygiuotas su centru, plotiu ar kraštais.
Pradėdami darbą, pažiūrėkime, kaip centruoti tekstą į tris dalis Skirtingi keliai. Paskutiniai du yra tiesiogiai susieti su stiliaus lapu. Tai gali būti CSS failas, jungiantis prie svetainės puslapių ir apibrėžiantis jų išvaizdą.
1 būdas – tiesioginis darbas su HTML
Iš tikrųjų tai gana paprasta. Žiūrėkite pavyzdį žemiau.
Sulygiuokite pastraipą centre.
Jei reikia judėti teksto fragmentai kitu atveju vietoj „centro“ parametro įvedame šias reikšmes:
- Justify – lygiuoti tekstą pagal puslapio plotį;
- dešinėje – dešiniajame krašte;
- kairėn - į kairę.
Pagal analogiją galite perkelti turinį, esantį antraštėse (h1, h2) ir konteineryje (div).
2 ir 3 metodas – stilių naudojimas
Aukščiau pateiktas dizainas gali būti šiek tiek pakeistas. Poveikis bus toks pat. Norėdami tai padaryti, turite parašyti žemiau esantį kodą.
Teksto blokas.
Šioje formoje kodas įrašomas tiesiai į HTML, kad būtų sutelktas teksto turinys.
Yra dar vienas alternatyvus būdas pasiekti rezultatų. Jums reikės atlikti keletą žingsnių.
1 veiksmas. Pagrindiniame kode parašykite
Tekstinė medžiaga.
2 veiksmas. Į įtrauktą CSS failą įveskite šį kodą:
Rovno (teksto lygiavimas: centre;)
Atkreipiu dėmesį, kad žodis „rovno“ yra tik klasės, kurią galima pavadinti skirtingai, pavadinimas. Tai paliekama programuotojo nuožiūrai.
Pagal analogiją HTML galite lengvai padaryti tekstą centre, išlyginti ir sulygiuoti su dešiniuoju arba kairiuoju puslapio kraštu. Kaip matote, yra kur kas daugiau nei viena galimybė pasiekti savo tikslą.
Tik keli klausimai:
- Ar vykdote informacinį ne pelno projektą?
- Ar norite, kad jūsų svetainė veiktų gerai? paieškos sistemos?
- Ar norite užsidirbti pajamų internetu?
Jei visi atsakymai teigiami, tiesiog pažvelkite į integruotą požiūrį į svetainės kūrimą. Informacija bus ypač naudinga, jei jis dirba TVS WordPress.
Noriu atkreipti dėmesį, kad Jūsų pačių sukurtos internetinės svetainės yra tik vienas iš daugelio galimybių gauti pasyvias ar aktyvias pajamas internete. Mano tinklaraštis skirtas finansinėms galimybėms internete.
Ar kada nors dirbote eismo arbitražo, tekstų rašymo ir kitose veiklos srityse, kurios atneša pagrindines ar papildomų pajamų nuotolinio bendradarbiavimo metu? Apie tai ir dar daugiau galite sužinoti dabar mano tinklaraščio puslapiuose.
Ateityje paskelbsiu dar keletą Naudinga informacija. Palaikykite ryšį. Jei pageidaujate, galite užsiprenumeruoti Workip atnaujinimus el. Prenumeratos forma yra žemiau.
Šiandienos straipsniu siekiama parodyti, kaip centruoti „div“ tiek horizontaliai, tiek vertikaliai, naudojant keletą CSS gudrybių. Taip pat pasakysime, kaip centruoti visame puslapyje arba atskirame div elemente.
Lengvai centre DIV elementą puslapyje
Šis metodas puikiai veiks visose naršyklėse.
CSS
Centrinis padalijimas ( paraštė: 0 automatinė; plotis: 100 piks.; )
Pavyzdys
Vertė auto paraštės ypatybėje nustato kairę ir dešinę paraštę į visą puslapio vietą. Svarbu atsiminti, kad centre esantis div elementas turi turėti pločio reikšmę.
DIV centravimas DIV elemente senamadišku būdu
Šis centro lygiavimo div metodas veiks visose naršyklėse.
CSS
Outer-div (padding: 30px; ) .inner-div ( paraštė: 0 automatinis; plotis: 100 pikselių; )
HTML
Pavyzdys
Išorinis div gali būti dedamas bet kur, tačiau vidinis div turi būti nurodyto pločio ( plotis).
DIV centravimas DIV elemente naudojant eilutinį bloką
Taikant šį div centravimo div viduje metodą, nebūtina nurodyti vidinio elemento pločio. Tai veiks visuose šiuolaikinės naršyklės, įskaitant IE8.
CSS
Outer-div ( užpildymas: 30 tšk.; teksto lygiavimas: centre; ) .inner-div ( ekranas: inline-block; užpildymas: 50 piks.; )
HTML
Pavyzdys
Teksto lygiavimo ypatybė veikia tik eilutiniuose elementuose. Inline-block reikšmė leidžia vidinį div rodyti kaip eilutinį elementą, taip pat kaip bloką ( eilutinis blokas). Išorinio div elemento teksto lygiavimo ypatybė leis mums sutelkti vidinį div.
Centruokite DIV elemento DIV viduje horizontaliai ir vertikaliai
Čia paraštė: auto naudojama centruoti div puslapio centre. Pavyzdys veiks visose šiuolaikinėse naršyklėse.
CSS
Outer-div (padding: 30px; ) .inner-div (paraštė: automatinis; plotis: 100 piks.; aukštis: 100 piks.; )
HTML
Pavyzdys
Vidinis div elementas turi būti nurodyto pločio ( plotis) ir ūgis ( aukščio). Metodas neveiks, jei išorinis div elementas turi fiksuotą aukštį.
Centruokite DIV puslapio apačioje
Čia paraštė: automatinis naudojamas centruoti div vertikaliai, o absoliuti padėtis naudojama išoriniam elementui. Metodas veiks visose šiuolaikinėse naršyklėse.
CSS
Outer-div (pozicija: absoliuti; apačia: 30 tšk.; plotis: 100%; ) .inner-div ( paraštė: 0 automatiškai; plotis: 100 pikselių; aukštis: 100 pikselių; fono spalva: #ccc; )
HTML
Pavyzdys
Turi būti nustatytas vidinio daliklio plotis. Puslapio apačioje esanti vieta koreguojama naudojant apatinę išorinio div ypatybę. Be to, puslapio viršuje galite centruoti div, pakeisdami apatinę ypatybę viršutine.
Centruokite DIV puslapyje vertikaliai ir horizontaliai
Čia, norėdami centruoti div, vėl naudojame paraštę: automatinį ir absoliučią išorinio div padėties nustatymą. Metodas veiks visose šiuolaikinėse naršyklėse.
CSS
Centrinis padalijimas (pozicija: absoliuti; paraštė: automatinė; viršuje: 0; dešinėje: 0; apačioje: 0; kairėje: 0; plotis: 100 pikselių; aukštis: 100 pikselių; )
Pavyzdys
Div elemento plotis turi būti nustatytas ( plotis) ir ūgis ( aukščio).
Pritaikomas DIV elemento centravimas puslapyje
Čia už div lygiavimas Centre, naudodami CSS, mes pritaikome div elemento plotį, kad jis reaguotų į lango dydžio pokyčius. Šis metodas veikia visose naršyklėse.
CSS
Centrinis padalijimas ( paraštė: 0 automatinė; didžiausias plotis: 700 taškų; )
Pavyzdys
Centruoto div elemento savybė turi būti nustatyta didžiausio pločio.
DIV centravimas elemento viduje naudojant vidines bloko savybes
Vidinis div elementas čia reaguoja. Šis „div“ centravimo „div“ viduje metodas veiks visose naršyklėse.
CSS
Outer-div (padding: 30px; ) .inner-div ( paraštė: 0 automatinis; maksimalus plotis: 700 pikselių; )
HTML
Pavyzdys
Turi būti nustatyta vidinio div ypatybė max-width.
Dviejų reaguojančių elementų centravimas vienas šalia kito
Čia mes turime du reaguojančius div elementus greta. Šis „div“ įdėjimo į ekrano centrą metodas veiks visose šiuolaikinėse naršyklėse.
CSS
Konteineris ( teksto lygiavimas: centre; ) .left-div ( ekranas: inline-block; maksimalus plotis: 300 tšk.; vertikaliai sulygiuotas: viršuje; ) .right-div ( ekranas: inline-block; maks. plotis: 150 pikselių; ) ekranas ir (maks. plotis: 600 piks.) ( .left-div, .right-div (lef max-width: 100%; ) )
HTML
Pavyzdys
Čia yra keletas elementų, kuriems taikoma inline-block ypatybė, esantys centre esančiame konteineryje. Šiame pavyzdyje taip pat naudojamos CSS medijos užklausos; tai yra, jei ekrano dydis yra mažesnis nei 600 pikselių, tada kairiojo ir dešiniojo skirsnio maksimalaus pločio ypatybė nustatoma į 100%.
DIV elementas centruotas naudojant „Flexbox“.
Čia mes sutelkiame CSS div naudodami „Flexbox“. Ji skirta palengvinti dizaino kūrimo procesą vartotojo sąsajos. Šį modulį palaiko Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ ir Android naršyklė 40+ .
CSS
Konteineris ( ekranas: lankstus; lygiuoti elementus: centre; išlyginti turinį: centre; aukštis: 100 vh; ) .item ( fono spalva: #f3f2ef; kraštinės spindulys: 3 piks.; plotis: 200 pikselių; aukštis: 100 pikselių; )
