Vsebina div je na sredini. Sredinska poravnava v CSS. Sredinska poravnava niza ali elementa string-*
Od avtorja: Ponovno vas pozdravljam na straneh našega bloga. V današnjem članku bi rad govoril o različnih tehnikah poravnave, ki jih je mogoče uporabiti tako za bloke kot za njihovo vsebino. Zlasti, kako poravnati bloke v css, pa tudi poravnavo besedila.
Poravnava blokov na sredino
V CSS je centriranje bloka enostavno. To je mnogim najbolj znana tehnika, vendar bi o njej rad spregovoril zdaj. To pomeni vodoravno sredinsko poravnavo glede na nadrejeni element. Kako se to naredi? Recimo, da imamo posodo in je naš poskusni subjekt v njej:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Predpostavimo, da je to glava spletnega mesta. Ne razteza se čez celotno širino okna in ga moramo centrirati. Pišemo takole:
#glava( širina/največja širina: 800px; rob: 0 samodejno; |
Določiti moramo natančno oziroma maksimalno širino, nato pa zapisati ključno lastnost - margin: 0 auto. Nastavi zunanje robove naše glave, prva vrednost določa zgornji in spodnji rob, druga pa desni in levi rob. Vrednost auto sporoči brskalniku, naj samodejno izračuna oblazinjenje na obeh straneh, tako da je element natančno osrediščen na svojem nadrejenem elementu. Udobno!
Poravnava besedila
Tudi to je zelo preprosta tehnika. Za poravnavo vseh elementov v vrstici lahko uporabite lastnost poravnave besedila in njene vrednosti: levo, desno, sredina. Slednji centrira besedilo, kar potrebujemo. Na enak način lahko celo poravnate sliko, ker je privzeto tudi element v vrstici.
Besedilo poravnajte navpično
Toda to je bolj zapleteno. Privzeto ni nobene preproste, dobro znane lastnosti, ki bi besedilo z lahkoto centrirala navpično v vsebniku bloka. Vendar pa obstaja več tehnik, ki so jih načrtovalci oblikovali skozi leta.
Nastavite višino bloka z oblazinjenjem. Način je, da ne nastavite eksplicitne višine z uporabo višine, ampak da jo ustvarite umetno z uporabo oblazinjenja na vrhu in na dnu, ki bi morala biti enaka. Ustvarimo poljuben blok in vanj zapišimo naslednje lastnosti:
div(ozadje: #ccc; oblazinjenje: 30px 0; )
div( ozadje : #ccc; oblazinjenje: 30px 0; |
Ozadje je samo za vizualni prikaz robov in oblazinjenja. Sedaj je višina bloka sestavljena iz teh dveh alinej in same vrstice in vse izgleda takole:
Določite višino črte za blok. Mislim, da je to pravilnejši način, če morate poravnati eno vrstico besedila. Z njim lahko zapišete višino glede na normalno z uporabo lastnosti višine. Po tem mora nastaviti še višino črte, enako kot višina bloka kot celote.
div(višina: 60px; višina vrstice: 60px; )
div( višina: 60px; višina črte: 60px; |
Rezultat bo podoben zgornji sliki. Vse bo delovalo, tudi če dodate oblazinjenje. Vendar le za eno vrstico. Če potrebujete več besedila v elementu, ta metoda ne bo delovala.
Pretvori blok v celico tabele. Bistvo te metode je, da ima celica tabele lastnost vertical-align: middle, ki element centrira navpično. Zato je treba v tem primeru blok nastaviti na naslednje:
div( prikaz: celica tabele; navpična poravnava: sredina; )
div( prikaz: tabela - celica; navpična poravnava: sredina; |
Ta metoda je dobra, ker lahko na sredino poravnate poljubno količino besedila. Vendar je bolje napisati display: table v blok, v katerem je ugnezden naš div, sicer morda ne bo delovalo.
No, tukaj smo pri zadnji tehniki za danes - to je navpična poravnava samih blokov. Povedati je treba, da spet ni nepremičnine, ki bi bila namenjena posebej za to, je pa nekaj trikov, ki bi jih morali poznati.
Nastavite zamike kot odstotek. Če poznate višino nadrejenega elementa in vanj postavite drug element bloka, ga lahko centrirate z uporabo odstotnega oblazinjenja. Nadrejeni ima na primer višino 600 slikovnih pik. Vanj postavite blok, ki je visok 300 slikovnih pik. Koliko se morate odmakniti zgoraj in spodaj, da ga središ? 150 slikovnih pik vsak, kar je 25 % višine starša.
Ta metoda omogoča poravnavo le, če dimenzije omogočajo izračune. In če je vaš starš visok 887 slikovnih pik, potem ne boste mogli ničesar natančno posneti, to je že jasno.
Vstavite element v celico tabele. Še enkrat, če nadrejeni element pretvorimo v celico tabele, bo blok, vstavljen vanjo, samodejno centriran navpično. Če želite to narediti, mora nadrejeni le nastaviti vertical-align: middle.
In če poleg tega napišemo še margin: 0 auto, bo element postal horizontalno centriran!
Centriranje elementov v CSS je eden najbolj priljubljenih razlogov za pritožbe nad CSS. " Zakaj je vse tako težko?" - so ogorčeni. Zdi se mi, da ni težava v tem, da je to težko narediti, ampak v tem, da obstaja veliko načinov za poravnavo elementov v sredini in je lahko kar težko izbrati pravega.
Uredimo vse možne rešitve v drevesni diagram in upajmo, da nam bo to olajšalo nalogo.
Zato moram sredinsko postaviti element ...
Vodoravna poravnava
Centriranje elementov v vrstici znotraj nadrejenega elementa na ravni bloka je precej preprosto:
Center-children ( text-align: center; )
To bo delovalo za inline, inline-block, inline-table, inline-flex itd.
Element bloka lahko centrirate tako, da lastnosti margin-left in margin-right nastavite na samodejno (imeti mora tudi nastavljeno širino, sicer bo element preprosto zavzel celotno širino vsebine in ne bo potrebe po poravnavi) . Najpogosteje se to naredi s skrajšano lastnostjo, kot je ta:
Postavi me na sredino ( rob: 0 samodejno; )
To bo delovalo ne glede na to, kakšna širina je nastavljena na elementu bloka ali njegovem nadrejenem elementu.
Upoštevajte, da na ta način ne boste mogli oviti sredinsko poravnanega elementa. Vendar pa tudi za to obstaja trik.
Sredinska poravnava več blokovnih elementov
Če obstajata dva ali več blokovnih elementov, ki jih morate vodoravno poravnati in centrirati znotraj iste vrstice, je morda bolje, da spremenite njihov tip prikaza. Spodaj je primer spreminjanja njihove vrste prikaza v vgrajeni blok in primer s Flexboxom:
Če je teh več blokov v različnih vrsticah, potem je tehnika samodejnega zamika še vedno odlična:
Navpična poravnava
Navpična sredinska poravnava v CSS je nekoliko bolj zapletena.
Sredinska poravnava niza ali elementa string-*
Poravnava elementa z eno črto
Včasih je elemente niza/besedila mogoče centrirati preprosto zato, ker imajo enako vrednost za lastnosti oblazinjenja na vrhu in oblazinjenja na dnu.
Povezava (padding-top: 30px; padding-bottom: 30px; )
Če iz nekega razloga oblazinjenje ne pride v poštev, vendar poskušate neko besedilo postaviti na sredino in zagotovo veste, da ga ne bo ovilo nekaj drugega, potem obstaja majhen trik, katerega bistvo je, da nastavite vrstico lastnosti -height enaka vrednosti višine elementa.
Trik s sredinskim besedilom ( višina: 100 slikovnih pik; višina vrstice: 100 slikovnih pik; presledek: nowrap; )
Poravnava večvrstičnega elementa
Enako oblazinjenje na vrhu in na dnu lahko ustvari sredinski učinek tudi za večvrstične elemente, vendar če to ne deluje, je možno, da je element, ki vsebuje besedilo, celica tabele ali da je izrecno nastavljen tako, da se obnaša tako način z uporabo CSS. V tem primeru to obravnava lastnost vertical-align, v nasprotju s tem, kako običajno obravnava poravnavo elementov znotraj črte.
Če je nekaj podobnega mizi, morda lahko uporabite Flexbox? Posamezen element Flex je mogoče preprosto centrirati v vsebniku Flex.
Flex-center-vertically ( display: flex; justify-content: center; flex-direction: column; height: 400px; )
Ne pozabite, da je to dejansko pomembno, ko ima vsebnik fiksno višino (px, % itd.), zato ima vsebnik tukaj dano višino.
Če obeh zgornjih tehnik ni mogoče uporabiti, lahko uporabite tehniko »element duhov«, pri kateri je psevdoelement s 100-odstotno višino nameščen znotraj vsebnika in poravnan navpično na njegovo sredino.
Ghost-center (položaj: relativno;) .ghost-center::before (vsebina: " "; zaslon: vstavljeni blok; višina: 100 %; širina: 1 %; navpična poravnava: sredina; ) .ghost-center p (zaslon: vstavljeni blok; navpična poravnava: sredina; )
Poravnajte na sredino elementa bloka
Poravnajte element z znano višino
Pogosto ne moremo vedeti višine iz več razlogov: če se širina spremeni, je lahko besedilo oblikovano in spremeni višino. Različni slogi besedila lahko spremenijo višino. Različna velikost pisave lahko spremeni višino. Elementi s fiksnim razmerjem stranic, kot so slike, lahko spremenijo višino, ko se jim spremeni velikost itd.
Če pa poznate višino elementa, lahko sredinsko poravnate takole:
Parent (position: relative; ) .child (position: absolute; top: 50%; height: 100px; margin-top: -50px; /* upoštevajte oblazinjenje in obrobo, če ne uporabljate box-sizing: border-box; */ )
Poravnava elementa z neznano višino
Tudi če ne poznate višine elementa, ga lahko še vedno potisnete na 50 % višine njegovega starša in nato dvignete na 50 % njegove višine:
Nadrejeni (položaj: relativno; ) .child (položaj: absolutno; vrh: 50 %; transformacija: translateY(-50%); )
Majhno presenečenje, to je mogoče storiti zelo enostavno s Flexboxom.
Nadrejeni ( display: flex; flex-direction: column; justify-content: center; )
Vodoravna in navpična poravnava
Zgoraj predstavljene tehnike lahko kombinirate, da dosežete popolnoma sredinske elemente. Toda običajno jih lahko razdelimo v 4 skupine:
Poravnava elementa s fiksno širino in višino
Če uporabite negativni maring, ki je enak polovici te širine in višine po absolutnem položaju elementa 50 %/50 %, bo element centriran. Ta metoda ima precej dobro podporo med brskalniki:
Nadrejeni (položaj: relativno; ) .child (širina: 300 slikovnih pik; višina: 100 slikovnih pik; oblazinjenje: 20 slikovnih pik; položaj: absolutno; zgoraj: 50 %; levo: 50 %; rob: -70 slikovnih pik 0 0 -170 slikovnih pik; )
Poravnava elementa z neznano širino in višino
Če ne poznate širine ali višine elementa, lahko uporabite lastnost transformacije in negativni prevod 50 % v obe smeri (odvisno od trenutne širine/višine elementa) v sredino:
Nadrejeni (položaj: relativno; ) .child (položaj: absolutno; zgoraj: 50 %; levo: 50 %; transformacija: prevedi (-50 %, -50 %); )
Poravnava elementa s Flexboxom
Za centriranje elementa s Flexboxom morate uporabiti dve lastnosti centriranja:
Nadrejeni ( display: flex; justify-content: center; align-items: center; )
Poravnava elementa z uporabo mreže CSS
To je samo majhen trik (objavil Lance Janssen), ki bo večinoma deloval za en element:
Telo, html ( višina: 100 %; prikaz: mreža; ) razpon ( /* stvar na sredino */ rob: samodejno; )
Zaključek
Zdaj lahko karkoli centrirate v CSS.
Dober dan, naročniki in bralci te publikacije. Danes se želim poglobiti v podrobnosti in vam povedati, kako centrirati besedilo v CSS. V nekaterih prejšnjih člankih sem se posredno dotaknil te teme, tako da nekaj znanja s tega področja imate.
Vendar vam bom v tej publikaciji povedal o vseh različnih načinih poravnave predmetov in tudi razložil, kako zamikati in črtati odstavke. Pa začnimo z učenjem snovi!
HTML in njegovi potomci in poravnajte
Ta metoda se skoraj nikoli ne uporablja, saj so jo nadomestila orodja za kaskadne slogovne liste. Vendar vam ne bo škodilo, če veste, da takšna oznaka obstaja.
Kar zadeva validacijo (ta izraz je podrobno opisan v članku ""), sama specifikacija html obsoja uporabo < center>, saj je za veljavnost treba uporabiti prehod DOCTYPE>.
Ta vrstaomogoča prehod prepovedanih elementov.
Zdaj pa preidimo na atribut poravnati. Nastavi vodoravno poravnavo predmetov in se prilega deklaraciji oznake. Običajno se lahko uporablja za poravnavo vsebine na levo ( levo), ob desnem robu ( prav), sredinsko ( center) in po širini besedila ( utemeljiti).
Spodaj bom podal primer, v katerem bom sliko in odstavek postavil na sredino.
Ta vsebina bo centrirana.
Upoštevajte, da ima za sliko atribut, ki ga analiziramo, nekoliko drugačen pomen.
V primeru, ki sem ga uporabil poravnaj="sredina". Zahvaljujoč temu je bila slika poravnana tako, da je bil stavek jasno na sredini slike.
Orodja za centriranje v css
Lastnosti CSS, namenjene poravnavi blokov, besedila in grafične vsebine, se uporabljajo veliko pogosteje. To je predvsem posledica priročnosti in prilagodljivosti izvajanja stilov.
Začnimo torej s prvo lastnostjo centriranja besedila – to je besedilo-poravnati.
Deluje na enak način kot poravnava v . Med ključnimi besedami lahko izberete eno s splošnega seznama ali podedujete lastnosti prednika ( dedovati).
Rad bi omenil, da lahko v css3 nastavite še 2 parametra: začetek– glede na pravila pisanja besedila (od desne proti levi ali obratno) nastavi poravnavo v levo ali desno (podobno kot pri delu levo ali desno) in konec– nasprotje od začetka (pri pisanju besedila od leve proti desni deluje kot desna, pri pisanju od desne proti levi – leva).
Stavek na desni
Stavek z uporabo konca
Povedal vam bom o majhnem triku. Pri izbiri vrednosti utemeljiti zadnja vrstica lahko neprivlačno visi z dna. Da bi ga na primer postavili v središče, lahko uporabite lastnost text-align-last.
Če želite navpično poravnati vsebino mesta ali celice tabele, uporabite lastnost navpično poravnati. Spodaj sem opisal glavne ključne besede elementa.
| Ključna beseda | Namen |
| izhodišče | Podaja poravnavo s črto prednika, imenovano osnovna črta. Če objekt prednika nima takšne črte, se poravnava izvede vzdolž spodnje meje. |
| sredina | Sredina mutiranega predmeta je poravnana z osnovno črto, ki ji je dodana višinska etaža nadrejenega elementa. |
| dno | Dno izbrane vsebine se prilagodi dnu predmeta pod njim. |
| vrh | Podobno dnu, vendar z zgornjim delom predmeta. |
| super | Naredi nadnapis znaka. |
| sub | Element naredi 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 TOTO
|
C IN E TOTO
Vdolbine
In končno pridemo do alinej odstavkov. Jezik CSS uporablja posebno lastnost, imenovano zamik besedila.
Z njegovo pomočjo lahko naredite tako rdečo črto kot izboklino (določiti morate negativno vrednost).
Če želite ustvariti rdečo črto, morate poznati samo en parameter.
To je preprosta lastnost zamika besedila.
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, v CSS obstaja posebna lastnost navpične poravnave z več vrednostmi za navpično poravnavo. 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 zamiki
Č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/
Slabost 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"
Ta metoda se lahko uporabi, 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! Lepo, 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.
Analiziramo poravnavo blokovnih elementov v CCS. V sredino jih postavimo več DIV oz LI elementi. Za večino primerov ponujam več svojih možnosti.
Namen tega članka ni našteti vseh možnosti poravnave in prepisati tistega, kar nekje že obstaja. Ne spomnim se zakaj, a pogosto nisem bil zadovoljen s ponujenimi možnostmi. Ali so bili fiksni bloki, ali je vse razpadlo med prilagodljivo postavitvijo ali kakšne druge pomanjkljivosti.
Včasih je za poravnavo na sredino dovolj, da dodate nekaj atributov in ne potrebujete nič zapletenega. Na primer, tudi jaz.
Spodaj je več možnosti za prilagodljivo postavitev za poravnavo blokov v sredini, ki sem jih jaz uporabljam na svojih spletnih straneh. In če je prvi precej pogost, potem morda nekatere druge metode na spletu sploh ne bodo opisane natanko tako.
Možnost 1
Enostavna poravnava vseh blokov na sredino strani.
Osredotočimo se UL vsebina iz 4 elementov LI, ki sta v bloku DIV z razredom posoda.
V tem primeru zadoščajo naslednja pravila v CSS:
Posoda (
širina: 100 %;
}
Kontejner ul (
poravnava besedila: sredina;
slog seznama: brez;
}
Posoda li (
zaslon: inline-block;
}
Dobimo naslednji pogled: Tukaj so osrediščeni 4 elementi LI. Ko se velikost zaslona zmanjša, se elementi, ki se ne prilegajo, premaknejo navzdol.
Če bloki LI s temi lastnostmi niso nameščene v središču, kar pomeni, da neka druga lastnost posega vanje. Na primer, to je lahko lastnina float:levo oz zaslon: tabela; ali kakšno drugo.
Zdaj lahko dodate druge sloge v zgornjo strukturo (v osnovni okvir za poravnavo CSS). Na primer, naredite bloke fiksne velikosti in zamaknite drug drugega:
Posoda li (
zaslon: inline-block;
rob: 5px;
širina: 100px;
}
Dobimo naslednje:
Toda ta možnost ima eno pomanjkljivost. Bloki se nahajajo v središču, levo in desno pa so ogromne razdalje. Lahko jih zmanjšate s spreminjanjem širine.
Lahko pa naredite posode enake velikosti, tako da so vdolbine samo med posodami, na levi in desni pa jih ne bo.
Potem bomo odstranili marža in dodajte širino tega premer tako da popolnoma pokrije območje.
Posoda li (
navpična poravnava: zgoraj;
zaslon: inline-block;
širina: 32,899 %;
}
Med bloki bo majhen prazen prostor. In da bo še večji, se lahko s parametrom umaknete v notranjost oblazinjenje.
V blokih namenoma ne dodajam ničesar dodatnega, da bi pustil točno tiste sloge, ki neposredno vplivajo na poravnavo. Toda če storite enako, ne boste dobili takih blokov. Čeprav samo zato, ker morate bloku dodati barvo, in drugič, če je prazen, ga postavite višina: 100 slikovnih pik;. Ostali atributi so po vaših željah.
Končna možnost je:
Na zgornjem posnetku zaslona sem zapustil druga področja spletnega mesta, tako da je jasno, kje so meje blokov, ker če mejijo na rob, sam rob ni več viden. In na sliki sta bela robova na levi in desni drugačna poravnava, ki nima nič skupnega z zadevnim primerom. Ponavljam, sami bloki mejijo na robove, ki niso vidni, ker jih bloki popolnoma prekrivajo.
Možnost 2
Obstaja veliko načinov za centriranje blokov. Toda če morate poravnavo narediti pametnejšo, si morate nabijati možgane. Na srečo sem prišel do zanimive metode za naslednje namene:
Kako centriram vse dive, tako da je blok v naslednji vrstici levo poravnan?
Imamo naslednjo strukturo:
blok 1
Blok 2
blok 3
blok 4
blok 5
Zanje pišemo predavanja:
širina: 90 %;
rob: 0 samodejno;
}
Arhiv-članek (
zaslon: inline-block;
navpična poravnava: zgoraj;
Širina: calc(33,3333% - (0,666666666667 * 36px));
rob: 0 10px 0 11px;
}
Upoštevajte, da če spremenite velikost kalk, potem morate poskusno prilagoditi dimenzije marža. V nasprotnem primeru bloki ne bodo centrirani.
To poravnavo je treba opraviti na oko. Če pa je v novi vrstici manj blokov kot v zgornji vrstici, bo ta osamljeni blok zraven leva stran. In videti je veliko lepše, kot če je v naslednji vrstici en sam blok v središču.
Z uporabo zgornje tehnike bomo dobili prilagodljivo postavitev z enakimi robovi, ki se ne bo poslabšala pri spreminjanju velikosti zaslona.
In če želimo, da mobilna različica nima 3 blokov, ampak 2, potem bomo v ccs za ločljivost 768 slikovnih pik bloke razdelili drugače:
@medijski zaslon in (največja širina: 768 slikovnih pik) (
.arhiv-članek (
širina: calc(47,3333% - (0,666666666667 * 25px));
rob: 0 10px 0 20px;
}
}
Dobimo iste bloke v mobilni različici, vendar z dvema blokoma na vrstico:
Možnost 3
Zdaj bomo poravnali uporabo flex. Morda se zdi, da je to idealen način izravnave, saj dejansko deluje zelo preprosto. Vendar FLEX ni kos nalogi, opisani v možnosti 2. Vsaj meni ni uspelo doseči enakih rezultatov.
Na naslednji razdelek:
Dodajanje stilov:
#cssmenu (
rob: 20 slikovnih pik samodejno;
}
#cssmenu ul (
slog seznama: brez;
zaslon: flex;
flex-wrap: ovoj;
justify-content: center;
}
#cssmenu > ul > li (
rob: 1px;
}
Dobimo:
V danem primeru:
flex-wrap: ovoj;
Premakne bloke v naslednjo vrstico, če zapolnijo vsebnik. V nasprotnem primeru bodo šli dlje izven okna brskalnika.
justify-content: center;
Vsebino blokov poravnamo na sredino.
Možnost 4
Druga možnost poravnave s tehnologijo flex.
Imamo posodo z dvema blokoma v notranjosti. Ta dva bloka potrebujemo za razdelitev širine na dve enaki strani.
blok 1
Blok 2
Da bi to naredili, bomo v sloge zapisali naslednje lastnosti:
Posoda (
zaslon: flex;
}
Blokiraj (
fleksibilna osnova: 100 %;
}
Možnost 5
Obstaja še ena možnost za centriranje blokov, če je njihovo število popolnoma enako. Na primer: obstaja 9 blokov, 3 za vsako vrstico. In veš, da bo tako vedno ostalo. Na primer, ustvarjate ciljno stran in zagotovo veste, da na spletno mesto med temi bloki ne bo dodano nič nepotrebnega.
Torej, imamo 9 blokov naslednje vrste (nisem podvojil vrstic 9-krat, vendar ne pozabite, da je blokov 9):
blok 1
Blok 2
blok 3
Zanje uporabite sloge:
Arhivski-vsebnik-za-članke (
širina: 100 %;
poravnava besedila: sredina;
}
Arhiv-članek (
širina: 25 %;
navpična poravnava: zgoraj;
zaslon: inline-block;
poravnava besedila: levo;
}
Arhiv-članek:nth-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7) (
rob: 20px 0 30px 40px;
}
Arhiv-članek:nth-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8) (
rob: 20px 40px 30px;
}
Arhiv-članek:nth-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9) (
rob: 20px 40px 30px 0;
}
Dobili bomo tudi prilagodljivo postavitev. Ko se zaslon zmanjša, bo blok, ki se ne prilega, šel na sredino spodaj
Prednost te vrste centriranja je, da lahko jasno in jasno naredite vdolbine med bloki.
Glavna pomanjkljivost je, da v bloke ni mogoče ničesar postaviti. Kateri koli element:
bodisi div oz str ali kaj drugega, bo obravnavan kot notranji element n-ti otrok. Posledično bodo slogi CSS prekriti z njim in vse alinee, narejene z uporabo roba, bodo premaknile bloke drugače, kot je bilo prvotno predvideno.