Zelo pogosto je naloga poravnati blok na sredino strani/zaslona in celo tako, da brez skripta Java, brez nastavitve togih dimenzij ali negativnih zamikov in tako, da drsni trakovi delujejo za nadrejenega, če blok presega svojo velikost . Na internetu je veliko monotonih primerov, kako poravnati blok na sredino zaslona. Praviloma večina temelji na istih načelih.
Spodaj so glavni načini za rešitev težave, njihove prednosti in slabosti. Za razumevanje bistva primerov priporočam zmanjšanje višine/širine okna z rezultati v primerih na navedenih povezavah.
1. možnost: Negativni zamik.
Pozicioniranje blok z uporabo zgornjih in levih atributov za 50 % in vnaprej poznavanjem višine in širine bloka nastavite negativni rob, ki je enak polovici velikosti blok. Velika pomanjkljivost te možnosti je, da morate šteti negativne alineje. tudi blok se ne obnaša povsem pravilno, ko je obdan z drsnimi trakovi - preprosto je odrezan, ker ima negativne robove.
Nadrejeni ( širina: 100 %; višina: 100 %; položaj: absolutno; zgoraj: 0; levo: 0; preliv: samodejno; ) .block ( širina: 250 slikovnih pik; višina: 250 slikovnih pik; položaj: absolutno; zgoraj: 50 %; levo : 50 %; margin: -125px 0 0 -125px; img (največja širina: 100 %; višina: samodejno; rob: 0 samodejno; obroba: brez; ) )
Možnost 2. Samodejni zamik.
Manj pogost, vendar podoben prvemu. Za blok nastavimo širino in višino, postavimo atribute zgoraj desno spodaj levo na 0 in nastavimo samodejni rob. Prednost te možnosti so delujoči drsni trakovi starš, če ima slednji 100% širino in višino. Pomanjkljivost te metode je togo nastavljanje dimenzij.
Nadrejeni (širina: 100 %; višina: 100 %; položaj: absolutno; zgoraj: 0; levo: 0; preliv: samodejno; ) .block (širina: 250 slikovnih pik; višina: 250 slikovnih pik; položaj: absolutno; zgoraj: 0; desno: 0; dno: 0; rob: samodejno; maks. širina: samodejno; zaslon: 0; rob: brez;
Možnost 3. Tabela.
Vprašajmo starš slogi tabele, celica starš Nastavite poravnavo besedila na sredino. A blok postavimo linijski bločni model. Slabosti, ki jih dobimo, so nedelujoči drsni trakovi in na splošno estetika »emulacije« tabele ni dobra.
Nadrejeni ( širina: 100 %; višina: 100 %; prikaz: tabela; položaj: absolutno; vrh: 0; levo: 0; > .notranji ( prikaz: celica tabele; poravnava besedila: sredina; navpična poravnava: sredina; ) ) .block ( prikaz: vstavljeni blok; img ( prikaz: blok; obroba: brez; ) )
Če želite temu primeru dodati drsnik, boste morali dizajnu dodati še en element.
Primer: jsfiddle.net/serdidg/fk5nqh52/3.
Možnost 4. Psevdoelement.
Ta možnost je brez vseh težav, navedenih v prejšnjih metodah, in rešuje tudi prvotne težave. Bistvo je v tem starš nastavite sloge psevdo element prej, in sicer 100-odstotna višina, sredinska poravnava in bločni model v vrstici. Enako je z blok linijski blok model je nastavljen, centriran. Za blok ni "padel" pod psevdo element, ko so dimenzije prvega večje od starš, navedite starš white-space: nowrap in font-size: 0, po katerem blok prekličite te sloge z naslednjim - white-space: normal. V tem primeru je potrebna velikost pisave: 0, da se odstrani nastali presledek med starš in blok zaradi oblikovanja kode. Prostor lahko odstranimo tudi na druge načine, vendar velja, da se mu je najbolje izogniti.
Nadrejeni ( širina: 100 %; višina: 100 %; položaj: absolutno; vrh: 0; levo: 0; preliv: samodejno; presledek: nowrap; poravnava besedila: sredina; velikost pisave: 0; &:pred ( višina: 100%; navpična poravnava: ""; slika: brez;
Ali pa, če želite, da nadrejeni zavzame samo višino in širino okna in ne celotne strani:
Nadrejeni (položaj: fiksno; zgoraj: 0; desno: 0; spodaj: 0; levo: 0; preliv: samodejno; presledek: nowrap; poravnava besedila: sredina; velikost pisave: 0; &:pred ( višina: 100 %; prikaz v vrstici; navpična poravnava: sredina; prikaz: blok; ) )
Možnost 5. Flexbox.
Eden najenostavnejših in najelegantnejših načinov je uporaba flexboxa. Ne zahteva nepotrebnih gibov telesa, precej jasno opiše bistvo dogajanja in je zelo prilagodljiv. Edina stvar, ki si jo je vredno zapomniti pri izbiri te metode, je podpora za IE od vključno različice 10. caniuse.com/#feat=flexbox
Nadrejeni ( širina: 100 %; višina: 100 %; položaj: fiksno; zgoraj: 0; levo: 0; zaslon: upogib; poravnava elementov: sredina; poravnava vsebine: sredina; poravnava vsebine: sredina; prelivanje: samodejno; ) .block (ozadje: #60a839; img (zaslon: blok; obroba: brez; ))
Možnost 6. Preoblikovanje.
Primerno, če smo omejeni s strukturo in ni možnosti za manipulacijo nadrejenega elementa, vendar je treba blok nekako poravnati. Na pomoč bo priskočila funkcija css translate(). Vrednost 50-odstotnega absolutnega pozicioniranja bo zgornji levi kot bloka postavila točno v sredino, nato pa bo negativna vrednost prevajanja blok premaknila glede na lastne dimenzije. Upoštevajte, da se lahko pojavijo negativni učinki v obliki zamegljenih robov ali sloga pisave. Ta metoda lahko povzroči tudi težave pri izračunu položaja bloka s pomočjo javascripta. Včasih lahko pravilo, določeno za blok, nadomesti izgubo 50 % širine zaradi uporabe lastnosti CSS. pomoč: margin-desno: -50%;
Nadrejeni (širina: 100 %; višina: 100 %; položaj: fiksen; vrh: 0; levo: 0; preliv: samodejno; ) .block ( položaj: absolutno; vrh: 50 %; levo: 50 %; transformacija: prevedi ( -50%, -50% img (prikaz: blok; ) )
Možnost 7. Gumb.
Uporabniška možnost kje blok uokvirjena v oznako gumba. Gumb ima lastnost, da centrira vse, kar je v njem, in sicer elemente inline in block-line (inline-block) modela. V praksi ne priporočam uporabe.
Nadrejeni ( širina: 100 %; višina: 100 %; položaj: absolutno; zgoraj: 0; levo: 0; preliv: samodejno; ozadje: brez; obroba: brez; oris: brez; ) .block ( display: inline-block; img (prikaz: blok;; obroba: brez; ) )
Bonus
Z uporabo ideje 4. možnosti lahko nastavite zunanje robove za blok, slednji pa bo ustrezno prikazan obdan z drsnimi trakovi.Primer: jsfiddle.net/serdidg/nfqg9rza/2.
Sliko lahko tudi poravnate na sredino in če je slika večja starš, prilagodite velikost starš.
Primer: jsfiddle.net/serdidg/nfqg9rza/3.
Primer z veliko sliko:
Mislim, da ste se mnogi od vas, ki ste imeli opravka s postavitvijo, srečali s potrebo po navpični poravnavi elementov in poznate težave, ki nastanejo pri poravnavi elementa na sredino.
Da, za navpično poravnavo je v CSS posebna lastnost navpične poravnave z več vrednostmi. Vendar v praksi sploh ne deluje po pričakovanjih. Poskusimo to ugotoviti.
Primerjajmo naslednje pristope. Poravnajte z:
- mize,
- vdolbina,
- višina vrstice
- raztezanje,
- negativna marža,
- transformirati
- psevdo element
- flexbox.
Obstajata dva elementa div, od katerih je eden ugnezden v drugem. Dajmo jim ustrezne razrede - zunanje in notranje.
Izziv je poravnati notranji element s središčem zunanjega elementa.
Najprej si oglejmo primer, ko so dimenzije zunanjih in notranjih blokov znan. Notranjemu elementu dodamo pravilo display: inline-block, zunanjemu elementu pa text-align: center in vertical-align: middle.
Ne pozabite, da poravnava velja samo za elemente, ki imajo način prikaza v vrstici ali bloku v vrstici.
Nastavimo velikosti blokov, pa tudi barve ozadja, da bomo lahko videli njihove meje.
Zunanji (širina: 200 slikovnih pik; višina: 200 slikovnih pik; poravnava besedila: sredina; navpična poravnava: sredina; barva ozadja: #ffc; ) .notranji (zaslon: blok v vrstici; širina: 100 slikovnih pik; višina: 100 slikovnih pik; barva ozadja : #fcc )
Po uporabi slogov bomo videli, da je notranji blok poravnan vodoravno, vendar ne navpično:
http://jsfiddle.net/c1bgfffq/
Zakaj se je to zgodilo? Stvar je v tem, da lastnost vertical-align vpliva na poravnavo sam element, ne njegova vsebina(razen če je uporabljen za celice tabele). Zato uporaba te lastnosti za zunanji element ni prinesla ničesar. Poleg tega uporaba te lastnosti za notranji element prav tako ne bo naredila nič, saj so bloki v vrstici poravnani navpično glede na sosednje bloke in v našem primeru imamo en blok v vrstici.
Obstaja več tehnik za rešitev te težave. Spodaj si bomo podrobneje ogledali vsakega od njih.
Poravnava s pomočjo tabele
Prva rešitev, ki pride na misel, je zamenjava zunanjega bloka s tabelo ene celice. V tem primeru bo poravnava uporabljena za vsebino celice, to je za notranji blok.
http://jsfiddle.net/c1bgfffq/1/
Očitna pomanjkljivost te rešitve je, da je s pomenskega vidika nepravilna uporaba tabel za poravnavo. Druga pomanjkljivost je, da ustvarjanje tabele zahteva dodajanje drugega elementa okoli zunanjega bloka.
Prvi minus lahko delno odstranimo tako, da oznaki table in td zamenjamo z div in nastavimo način prikaza tabele v CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Vendar bo zunanji blok še vedno ostal miza z vsemi posledičnimi posledicami.
Poravnava z zamikom
Če sta znani višini notranjega in zunanjega bloka, lahko poravnavo nastavite z navpičnimi vdolbinami notranjega bloka po formuli: (H zunanji – H notranji) / 2.Zunanji (višina: 200 slikovnih pik; ) .notranji (višina: 100 slikovnih pik; rob: 50 slikovnih pik 0; )
http://jsfiddle.net/c1bgfffq/6/
Slaba stran rešitve je, da je uporabna le v omejenem številu primerov, ko sta znani višini obeh blokov.
Poravnava z uporabo višine črte
Če veste, da notranji blok ne sme zavzemati več kot eno vrstico besedila, potem lahko uporabite lastnost line-height in jo nastavite enako višini zunanjega bloka. Ker se vsebina notranjega bloka ne sme previjati v drugo vrstico, je priporočljivo dodati tudi pravili white-space: nowrap in overflow: hidden.Zunanji ( višina: 200 slikovnih pik; višina črte: 200 slikovnih pik; ) .notranji ( beli prostor: zdajrap; preliv: skrito; )
http://jsfiddle.net/c1bgfffq/12/
To tehniko lahko uporabite tudi za poravnavo večvrstičnega besedila, če na novo določite vrednost višine vrstice za notranji blok in dodate tudi pravilo za prikaz: v vrstici in navpično poravnavo: sredina.
Zunanji (višina: 200 slikovnih pik; višina vrstice: 200 slikovnih pik; ) .notranji (višina vrstice: normalno; zaslon: blok v vrstici; navpična poravnava: sredina; )
http://jsfiddle.net/c1bgfffq/15/
Pomanjkljivost te metode je, da je treba poznati višino zunanjega bloka.
Poravnava z uporabo "stretch"
To metodo lahko uporabimo, ko višina zunanjega bloka ni znana, vendar je znana višina notranjega bloka.Za to potrebujete:
- nastavite relativno pozicioniranje zunanjemu bloku in absolutno pozicioniranje notranjemu bloku;
- notranjemu bloku dodajte pravila top: 0 in bottom: 0, zaradi česar se bo raztegnil na celotno višino zunanjega bloka;
- nastavite navpično oblazinjenje notranjega bloka na samodejno.
http://jsfiddle.net/c1bgfffq/4/
Ideja za to tehniko je, da nastavitev višine za raztegnjen in absolutno postavljen blok povzroči, da brskalnik izračuna navpično oblazinjenje v enakem razmerju, če je nastavljeno na samodejno.
Poravnava z vrhom negativnega roba
Ta metoda je postala splošno znana in se zelo pogosto uporablja. Tako kot prejšnji se uporablja, ko višina zunanjega bloka ni znana, vendar je znana višina notranjega.Zunanji blok morate nastaviti na relativno pozicioniranje, notranji blok pa na absolutno pozicioniranje. Nato morate notranji blok premakniti navzdol za polovico višine zunanjega vrha bloka: 50 % in ga dvigniti za polovico njegove višine margin-top: -H notranji / 2.
Zunanji (položaj: relativni; ) .notranji (višina: 100 slikovnih pik; položaj: absolutni; vrh: 50 %; zgornji rob: -50 slikovnih pik; )
http://jsfiddle.net/c1bgfffq/13/
Slabost tega načina je, da je treba poznati višino notranje enote.
Poravnava s transformacijo
Ta metoda je podobna prejšnji, vendar jo je mogoče uporabiti, ko višina notranje enote ni znana. V tem primeru lahko namesto nastavitve negativnega oblazinjenja slikovnih pik uporabite lastnost transform in premaknete notranji blok navzgor s funkcijo translateY in vrednostjo -50 %.Zunanji ( položaj: relativni; ) .notranji ( položaj: absolutni; vrh: 50 %; transformacija: translateY (-50 % ); )
http://jsfiddle.net/c1bgfffq/9/
Zakaj v prejšnji metodi ni bilo mogoče nastaviti vrednosti v odstotkih? Ker se odstotne vrednosti marže izračunajo glede na nadrejeni element, bi bila vrednost 50 % polovica višine zunanjega polja, notranje polje pa bi morali dvigniti na polovico njegove višine. Lastnost transformacije je kot nalašč za to.
Pomanjkljivost te metode je, da je ni mogoče uporabiti, če ima notranja enota absolutno pozicioniranje.
Poravnava s Flexboxom
Najmodernejši način navpične poravnave je uporaba fleksibilne postavitve škatle (popularno znane kot Flexbox). Ta modul vam omogoča fleksibilen nadzor položaja elementov na strani in jih razporedite skoraj povsod. Sredinska poravnava za Flexbox je zelo preprosta naloga.Zunanji blok mora biti nastavljen na display: flex in notranji blok na margin: auto. In to je vse! Prelepo, kajne?
Zunanji ( zaslon: flex; širina: 200 slikovnih pik; višina: 200 slikovnih pik; ) .notranji ( širina: 100 slikovnih pik; rob: samodejno; )
http://jsfiddle.net/c1bgfffq/14/
Pomanjkljivost tega načina je, da Flexbox podpirajo samo sodobni brskalniki.
Katero metodo naj izberem?
Začeti morate z izjavo o problemu:- Za navpično poravnavo besedila je bolje uporabiti navpične zamike ali lastnost line-height.
- Za absolutno pozicionirane elemente z znano višino (na primer ikone) je metoda z negativno lastnostjo vrha roba idealna.
- Za bolj zapletene primere, ko višina bloka ni znana, morate uporabiti psevdo element ali lastnost transform.
- No, če imate tako srečo, da vam ni treba podpirati starejših različic brskalnika IE, potem je seveda bolje uporabiti Flexbox.
pozdravljena Nadaljujemo z osvajanjem osnov jezika HTML. Poglejmo, kaj morate napisati, da poravnate besedilo na sredino, širino ali robove.
Če se lotimo posla, poglejmo, kako sredinsko besedilo v HTML na tri različne načine. Zadnja dva sta neposredno povezana s slogovnim listom. Lahko je datoteka CSS, ki se poveže s stranmi spletnega mesta in določa njihov videz.
1. način - neposredno delo s HTML
Pravzaprav je čisto preprosto. Glej primer spodaj.
Poravnajte odstavek na sredino.
Če morate fragmente besedila premakniti na drugačen način, potem namesto parametra »center« vnesite naslednje vrednosti:
- poravnati – poravnati besedilo na širino strani;
- desno – na desnem robu;
- levo - levo.
Po analogiji lahko premaknete vsebino, ki je v glavah (h1, h2) in vsebniku (div).
Metoda 2 in 3 - uporaba slogov
Zgoraj predstavljeno zasnovo je mogoče nekoliko spremeniti. Učinek bo enak. Če želite to narediti, morate napisati spodnjo kodo.
Besedilni blok.
V tej obliki je koda zapisana neposredno v HTML, da sredi besedilno vsebino.
Obstaja še en alternativni način za doseganje rezultatov. Narediti boste morali nekaj korakov.
Korak 1. V glavno kodo napišite
Besedilno gradivo.
2. korak. V priloženo datoteko CSS vnesite to kodo:
Rovno (text-align:center;)
Opažam, da je beseda "rovno" samo ime razreda, ki se lahko imenuje drugače. To je prepuščeno programerjevi presoji.
Po analogiji lahko v HTML besedilo preprosto postavite na sredino, poravnano in poravnano na desni ali levi rob strani. Kot lahko vidite, obstaja več kot ena možnost za dosego vašega cilja.
Samo nekaj vprašanj:
- Ali delate informacijski neprofitni projekt?
- Ali želite, da se vaša spletna stran dobro uvršča v iskalnikih?
- Ali želite zaslužiti na spletu?
Če so vsi odgovori pozitivni, si oglejte samo celosten pristop k razvoju spletnih strani. Podatki bodo še posebej koristni, če delujejo na WordPress CMS.
Rad bi poudaril, da so lastne spletne strani le ena izmed mnogih možnosti za ustvarjanje pasivnega ali aktivnega zaslužka na internetu. Moj blog je posvečen finančnim priložnostim na spletu.
Ste že kdaj delali na področju prometne arbitraže, pisanja besedil in drugih dejavnostih, ki ustvarjajo primarni ali dodatni zaslužek s sodelovanjem na daljavo? O tem in še veliko več lahko izveste zdaj na straneh mojega bloga.
V prihodnje bom objavil veliko res koristnih informacij. Ostanite povezani. Če želite, se lahko naročite na posodobitve Workip po e-pošti. Obrazec za prijavo se nahaja spodaj.
Vsak oblikovalec postavitev se nenehno sooča s potrebo po poravnavi vsebine v bloku: vodoravno ali navpično. Obstaja več dobrih člankov na to temo, vendar vsi ponujajo veliko zanimivih, a malo praktičnih možnosti, zato morate porabiti več časa, da poudarite glavne točke. Odločil sem se, da bom te podatke predstavil v obliki, ki mi ustreza, da ne bom več googlal.
Poravnava blokov z znanimi velikostmi
Najlažji način za uporabo CSS je poravnava blokov, ki imajo znano višino (za navpično poravnavo) ali širino (za vodoravno poravnavo).
Poravnava z oblazinjenjem
Včasih elementa ne morete centrirati, ampak mu dodati obrobe z uporabo " oblazinjenje".
Na primer, obstaja slika velikosti 200 krat 200 slikovnih pik, ki jo morate centrirati v blok 240 krat 300. Nastavimo lahko višino in širino zunanjega bloka = 200 slikovnih pik ter dodamo 20 slikovnih pik na vrhu in na dnu. , ter 50 na levi in desni.
.example-wrapper1 (ozadje: #535E73; širina: 200px; višina: 200px; oblazinjenje: 20px 50px;)Poravnava absolutno pozicioniranih blokov
Če je blok nastavljen na " položaj: absolutno", potem ga je mogoče postaviti glede na najbližjega nadrejenega z "position: relative". To zahteva vse lastnosti (" vrh","desno","dno","levo") notranjega bloka za dodelitev enake vrednosti, kot tudi "margin: auto".
*Obstaja odtenek: širina (višina) notranjega bloka + vrednost levo (desno, spodaj, zgoraj) ne sme presegati dimenzij nadrejenega bloka. Varneje je dodeliti 0 (ničlo) levim (desno, spodaj, zgoraj) lastnostim.
.example-wrapper2 (položaj: relativno; višina: 250px; ozadje: url(space.jpg);) .cat-king (širina: 200px; višina: 200px; položaj: absolutno; zgoraj: 0; levo: 0; spodaj: 0; desno: 0; rob: samodejno; ozadje: url(king.png);Vodoravna poravnava
Poravnava z uporabo "text-align: center"
Za poravnavo besedila v bloku obstaja posebna lastnost " poravnava besedila". Ko je nastavljen na " center"Vsaka vrstica besedila bo poravnana vodoravno. Za večvrstično besedilo se ta rešitev uporablja zelo redko; pogosteje je to možnost mogoče najti za poravnavo razponov, povezav ali slik.
Nekoč sem moral pripraviti nekaj besedila, da bi pokazal, kako deluje poravnava besedila s pomočjo CSS, vendar mi ni padlo na misel nič zanimivega. Najprej sem se odločila nekam skopirati otroško pesmico, a sem se spomnila, da bi to lahko pokvarilo unikatnost članka in je naši dragi bralci ne bi mogli najti na Googlu. In potem sem se odločil napisati ta odstavek - navsezadnje ni bistvo v njem, ampak bistvo je v poravnavi.
.example-text (text-align: center; padding: 10px; ozadje: #FF90B8;)Omeniti velja, da ta lastnost ne bo delovala samo za besedilo, ampak tudi za vse elemente v vrstici ("display: inline").
Toda to besedilo je poravnano na levo, vendar je v bloku, ki je sredinsko glede na ovoj.
.example-wrapper3 (poravnava besedila: sredina; ozadje: #FF90B8;) .inline-besedilo (zaslon: blok v vrstici; širina: 40 %; oblazinjenje: 10 slikovnih pik; poravnava besedila: levo; ozadje: #FFE5E5;)Poravnava blokov z robom
Elemente bloka z znano širino je mogoče enostavno vodoravno poravnati tako, da jih nastavite na "levi rob: samodejno; desni rob: samodejno". Običajno se uporablja okrajšava: " rob: 0 avto" (namesto ničle je mogoče uporabiti katero koli vrednost). Vendar ta metoda ni primerna za navpično poravnavo.
.lama-wrapper (višina: 200px; ozadje: #F1BF88;) .lama1 (višina: 200px; širina: 200px; ozadje: url(lama.jpg); rob: 0 auto;)Tako poravnajte vse bloke, kjer je to mogoče (kjer ni potrebno fiksno ali absolutno pozicioniranje) - to je najbolj logično in ustrezno. Čeprav se to zdi očitno, sem včasih videl grozljive primere z negativnimi alinejami, zato sem se odločil pojasniti.
Navpična poravnava
Navpična poravnava je veliko bolj problematična - očitno to ni bilo predvideno v CSS. Obstaja več načinov za doseganje želenega rezultata, vendar vsi niso zelo lepi.
Poravnava z lastnostjo line-height
V primeru, da je v bloku le ena vrstica, lahko njeno navpično poravnavo dosežete z uporabo " višina vrstice" in ga nastavite na želeno višino. Zaradi zanesljivosti je vredno nastaviti tudi "height", katerega vrednost bo enaka vrednosti "line-height", ker slednja ni podprta v vseh brskalnikih.
.example-wrapper4 (line-height: 100px; barva: #DC09C0; ozadje: #E5DAE1; višina: 100px; text-align: center;)Možno je doseči tudi poravnavo blokov z več vrsticami. Če želite to narediti, boste morali uporabiti dodaten ovojni blok in mu nastaviti višino črte. Notranji blok je lahko večvrstični, vendar mora biti "inline". Zanj morate uporabiti "vertical-align: middle".
.example-wrapper5 (line-height: 160px; height: 160px; font-size: 0; ozadje: #FF9B00;) .example-wrapper5 .text1 (display: inline-block; font-size: 14px; line-height: 1.5 ; navpična poravnava : sredina ; barva ozadja : #FF9B00 ;Ovojni blok mora imeti nastavljeno "velikost pisave: 0". Če velikosti pisave ne nastavite na nič, bo brskalnik dodal nekaj dodatnih slikovnih pik. Določiti boste morali tudi velikost pisave in višino vrstice za notranji blok, ker so te lastnosti podedovane od starša.
Navpična poravnava v tabelah
Nepremičnina " navpično poravnati" vpliva tudi na celice tabele. Če je vrednost nastavljena na "middle", je vsebina znotraj celice poravnana na sredino. Seveda se postavitev tabele danes šteje za arhaično, vendar jo lahko v izjemnih primerih simulirate tako, da podate " prikaz: tabela-celica".
To možnost običajno uporabljam za navpično poravnavo. Spodaj je primer postavitve iz dokončanega projekta. Zanimiva je slika, ki je na ta način centrirana navpično.
.one_product .img_wrapper (prikaz: celica tabele; višina: 169px; navpična poravnava: sredina; preliv: skrito; ozadje: #fff; širina: 255px;) .one_product img (največja višina: 169px; največja širina: 100 % ; min-width : 140px ; display : block : 0 auto ;Ne smemo pozabiti, da če ima element nastavljen "float", ki ni "none", potem bo v vsakem primeru blok (prikaz: blok) - potem boste morali uporabiti dodaten ovoj bloka.
Poravnava z dodatnim inline elementom
In za elemente v vrstici lahko uporabite " navpična poravnava: sredina". Poleg tega so vsi elementi z " prikaz: v vrstici", ki so na isti črti, se bodo poravnale s skupno središčnico.
Ustvariti morate pomožni blok z višino, ki je enaka višini nadrejenega bloka, nato pa bo želeni blok centriran. Če želite to narediti, je priročno uporabiti psevdoelemente:before ali:after.
.example-wrapper6 (višina: 300 slikovnih pik; poravnava besedila: sredina; ozadje: #70DAF1;) .pudge (zaslon: vstavljeni blok; navpična poravnava: sredina; ozadje: url(pudge.png); barva ozadja: # fff ; širina : 200 slikovnih pik ; višina : .riki ( prikaz : vstavljeni blok ; višina : 100 % ;Zaslon: upogib in poravnava
Če vam ni veliko do uporabnikov Explorerja 8 ali vam je mar toliko, da ste pripravljeni zanje vstaviti delček dodatnega javascripta, potem lahko uporabite »display: flex«. Škatle Flex so odlične pri reševanju težav s poravnavo in samo napišite »margin: auto«, da sredinsko vsebino v notranjosti.
Do sedaj se s to metodo praktično še nisem srečal, vendar zanjo ni posebnih omejitev.
No, to je vse, kar sem želel napisati o poravnavi CSS. Zdaj centriranje vsebine ne bo več problem!
Zelo pogosto je naloga poravnati blok na sredino strani/zaslona in celo tako, da brez skripta Java, brez nastavitve togih dimenzij ali negativnih zamikov in tako, da drsni trakovi delujejo za nadrejenega, če blok presega svojo velikost . Na internetu je veliko monotonih primerov, kako poravnati blok na sredino zaslona. Praviloma večina temelji na istih načelih.
Spodaj so glavni načini za rešitev težave, njihove prednosti in slabosti. Za razumevanje bistva primerov priporočam zmanjšanje višine/širine okna z rezultati v primerih na navedenih povezavah.
1. možnost: Negativni zamik.
Pozicioniranje blok z uporabo zgornjih in levih atributov za 50 % in vnaprej poznavanjem višine in širine bloka nastavite negativni rob, ki je enak polovici velikosti blok. Velika pomanjkljivost te možnosti je, da morate šteti negativne alineje. tudi blok se ne obnaša povsem pravilno, ko je obdan z drsnimi trakovi - preprosto je odrezan, ker ima negativne robove.
Nadrejeni ( širina: 100 %; višina: 100 %; položaj: absolutno; zgoraj: 0; levo: 0; preliv: samodejno; ) .block ( širina: 250 slikovnih pik; višina: 250 slikovnih pik; položaj: absolutno; zgoraj: 50 %; levo : 50 %; margin: -125px 0 0 -125px; img (največja širina: 100 %; višina: samodejno; rob: 0 samodejno; obroba: brez; ) )
Možnost 2. Samodejni zamik.
Manj pogost, vendar podoben prvemu. Za blok nastavimo širino in višino, postavimo atribute zgoraj desno spodaj levo na 0 in nastavimo samodejni rob. Prednost te možnosti so delujoči drsni trakovi starš, če ima slednji 100% širino in višino. Pomanjkljivost te metode je togo nastavljanje dimenzij.
Nadrejeni (širina: 100 %; višina: 100 %; položaj: absolutno; zgoraj: 0; levo: 0; preliv: samodejno; ) .block (širina: 250 slikovnih pik; višina: 250 slikovnih pik; položaj: absolutno; zgoraj: 0; desno: 0; dno: 0; rob: samodejno; maks. širina: samodejno; zaslon: 0; rob: brez;
Možnost 3. Tabela.
Vprašajmo starš slogi tabele, celica starš Nastavite poravnavo besedila na sredino. A blok postavimo linijski bločni model. Slabosti, ki jih dobimo, so nedelujoči drsni trakovi in na splošno estetika »emulacije« tabele ni dobra.
Nadrejeni ( širina: 100 %; višina: 100 %; prikaz: tabela; položaj: absolutno; vrh: 0; levo: 0; > .notranji ( prikaz: celica tabele; poravnava besedila: sredina; navpična poravnava: sredina; ) ) .block ( prikaz: vstavljeni blok; img ( prikaz: blok; obroba: brez; ) )
Če želite temu primeru dodati drsnik, boste morali dizajnu dodati še en element.
Primer: jsfiddle.net/serdidg/fk5nqh52/3.
Možnost 4. Psevdoelement.
Ta možnost je brez vseh težav, navedenih v prejšnjih metodah, in rešuje tudi prvotne težave. Bistvo je v tem starš nastavite sloge psevdo element prej, in sicer 100-odstotna višina, sredinska poravnava in bločni model v vrstici. Enako je z blok linijski blok model je nastavljen, centriran. Za blok ni "padel" pod psevdo element, ko so dimenzije prvega večje od starš, navedite starš white-space: nowrap in font-size: 0, po katerem blok prekličite te sloge z naslednjim - white-space: normal. V tem primeru je potrebna velikost pisave: 0, da se odstrani nastali presledek med starš in blok zaradi oblikovanja kode. Prostor lahko odstranimo tudi na druge načine, vendar velja, da se mu je najbolje izogniti.
Nadrejeni ( širina: 100 %; višina: 100 %; položaj: absolutno; vrh: 0; levo: 0; preliv: samodejno; presledek: nowrap; poravnava besedila: sredina; velikost pisave: 0; &:pred ( višina: 100%; navpična poravnava: ""; slika: brez;
Ali pa, če želite, da nadrejeni zavzame samo višino in širino okna in ne celotne strani:
Nadrejeni (položaj: fiksno; zgoraj: 0; desno: 0; spodaj: 0; levo: 0; preliv: samodejno; presledek: nowrap; poravnava besedila: sredina; velikost pisave: 0; &:pred ( višina: 100 %; prikaz v vrstici; navpična poravnava: sredina; prikaz: blok; ) )
Možnost 5. Flexbox.
Eden najenostavnejših in najelegantnejših načinov je uporaba flexboxa. Ne zahteva nepotrebnih gibov telesa, precej jasno opiše bistvo dogajanja in je zelo prilagodljiv. Edina stvar, ki si jo je vredno zapomniti pri izbiri te metode, je podpora za IE od vključno različice 10. caniuse.com/#feat=flexbox
Nadrejeni ( širina: 100 %; višina: 100 %; položaj: fiksno; zgoraj: 0; levo: 0; zaslon: upogib; poravnava elementov: sredina; poravnava vsebine: sredina; poravnava vsebine: sredina; prelivanje: samodejno; ) .block (ozadje: #60a839; img (zaslon: blok; obroba: brez; ))
Možnost 6. Preoblikovanje.
Primerno, če smo omejeni s strukturo in ni možnosti za manipulacijo nadrejenega elementa, vendar je treba blok nekako poravnati. Na pomoč bo priskočila funkcija css translate(). Vrednost 50-odstotnega absolutnega pozicioniranja bo zgornji levi kot bloka postavila točno v sredino, nato pa bo negativna vrednost prevajanja blok premaknila glede na lastne dimenzije. Upoštevajte, da se lahko pojavijo negativni učinki v obliki zamegljenih robov ali sloga pisave. Ta metoda lahko povzroči tudi težave pri izračunu položaja bloka s pomočjo javascripta. Včasih lahko pravilo, določeno za blok, nadomesti izgubo 50 % širine zaradi uporabe lastnosti CSS. pomoč: margin-desno: -50%;
Nadrejeni (širina: 100 %; višina: 100 %; položaj: fiksen; vrh: 0; levo: 0; preliv: samodejno; ) .block ( položaj: absolutno; vrh: 50 %; levo: 50 %; transformacija: prevedi ( -50%, -50% img (prikaz: blok; ) )
Možnost 7. Gumb.
Uporabnik azproduction možnost kjer blok uokvirjena v oznako gumba. Gumb ima lastnost, da centrira vse, kar je v njem, in sicer elemente inline in block-line (inline-block) modela. V praksi ne priporočam uporabe.
Nadrejeni ( širina: 100 %; višina: 100 %; položaj: absolutno; zgoraj: 0; levo: 0; preliv: samodejno; ozadje: brez; obroba: brez; oris: brez; ) .block ( display: inline-block; img (prikaz: blok;; obroba: brez; ) )
Bonus
Z uporabo ideje 4. možnosti lahko nastavite zunanje robove za blok, slednji pa bo ustrezno prikazan obdan z drsnimi trakovi.Primer: jsfiddle.net/serdidg/nfqg9rza/2.
Sliko lahko tudi poravnate na sredino in če je slika večja starš, prilagodite velikost starš.
Primer: jsfiddle.net/serdidg/nfqg9rza/3.
Primer z veliko sliko: