Metode za navpično sredinsko poravnavo v CSS. Vse o poravnavi CSS

Stavek na desni

Stavek z uporabo konca

Če želite ustvariti rdečo črto, morate poznati samo en parameter.

To je preprosta lastnost zamika besedila.

Kaj je DIV

Ime elementa izhaja iz angleške besede division, kar pomeni delitev. Pri pisanju oznak se uporablja za razbijanje elementov v bloke. DIV-ji zajemajo skupine vsebin na spletni strani. Na primer slike, odstavki z besedilom. Oznaka na noben način ne vpliva na prikaz vsebine in nima nobene semantične obremenitve.

DIV podpira vse globalne atribute. Toda za spletno oblikovanje potrebujete le dva - class in id. Vseh drugih se boste spomnili le v eksotičnih primerih, a to ni dejstvo. Atribut poravnave, ki se je včasih uporabljal za sredinsko ali levo poravnavo divov, je bil opuščen.

Kdaj uporabiti DIV

Predstavljajte si, da je spletno mesto hladilnik, DIV-ji pa so plastične posode, v katere morate razvrstiti vsebino. Sadja ne bi dali v isto posodo z jetrnico. Vsako vrsto izdelka boste postavili posebej. Spletna vsebina se generira na podoben način.

Odprite katero koli spletno stran in jo razdelite na smiselne bloke. Glava na vrhu, noga na dnu, glavno besedilo na sredini. Ob strani je običajno manjši stolpec z reklamno vsebino ali oblak oznak.

Zdaj si podrobneje oglejte vsak razdelek. Začnite z glavo. Glava spletnega mesta ima ločen logotip, navigacijo, naslov prve stopnje in včasih slogan. Vsakemu semantičnemu bloku dodelite svoj vsebnik. To ne bo samo ločilo elementov v toku, ampak jih bo tudi lažje formatirati. Predmet v oznaki DIV boste veliko lažje postavili na sredino, če mu dodelite razred ali ID.

Centriranje DIV-jev z uporabo robov

Pri upodabljanju spletnih elementov brskalnik upošteva tri lastnosti: oblazinjenje, rob in rob. Oblazinjenje je prostor med vsebino in njeno obrobo. Rob - polja, ki ločujejo en predmet od drugega. Meja so črte vzdolž blokov. Lahko se dodelijo vsem naenkrat ali samo eni strani:

Te lastnosti dodajo prostor med predmeti in vam pomagajo poravnati in pravilno postaviti. Na primer, če je treba blok s sliko premakniti od levega roba proti sredini za 20 %, elementu dodelite margin-left z vrednostjo 20 %:

Block-with-img( margin-left: 20 %; )

Elemente je mogoče oblikovati tudi z uporabo njihovih vrednosti širine in negativnega oblazinjenja. Na primer, obstaja blok z dimenzijami 200 x 200 slikovnih pik. Najprej mu določimo absolutni položaj in ga premaknimo v sredino za 50%.

Div (položaj: absolutno; levo: 50 %; )

Zdaj, da zagotovimo, da je centriran DIV v popolnem položaju, mu damo negativni rob na levi, ki je enak 50 % njegove širine, to je -100 slikovnih pik:

Levi rob: -100px;

V CSS se to imenuje "odstranjevanje zraka". Ima pa pomembno pomanjkljivost, da je treba izvajati nenehne izračune, kar je precej težko narediti za elemente z več nivoji gnezdenja. Če sta podani vrednosti oblazinjenja in širine obrobe, bo brskalnik privzeto izračunal dimenzije vsebnika kot vsoto debeline obrob, oblazinjenja na desni in levi ter same vsebine v notranjosti, kar lahko tudi presenečenje.

Torej, ko morate centrirati DIV, uporabite lastnost box-sizing z vrednostjo border-box. To bo brskalniku preprečilo, da bi dodal vrednosti oblazinjenja in obrobe skupni širini elementa DIV. Če želite dvigniti ali znižati element, uporabite tudi negativne vrednosti. Toda v tem primeru jih je mogoče dodeliti zgornjemu ali spodnjemu polju vsebnika.

Kako centrirati blok DIV s samodejnimi robovi

To je preprost način za centriranje velikih blokov. Preprosto dodelite širino vsebnika in lastnost roba na samodejno. Brskalnik bo na sredino postavil blok z enakima robovoma na levi in ​​desni strani in vse delo opravil sam. Posledično ne tvegate, da bi se zmedli pri matematičnih izračunih in znatno prihranite čas.

Pri razvoju odzivnih aplikacij uporabite metodo samodejnega polja. Glavna stvar je, da vsebniku dodelite vrednost širine v em ali odstotkih. Koda v zgornjem primeru bo centrirala DIV in na kateri koli napravi, vključno z mobilnimi telefoni, bo zasedla 90 % zaslona.

Poravnava prek lastnosti prikaza: inline-block

Elementi DIV se privzeto štejejo za blokovne elemente, njihova prikazana vrednost pa je blok. Za to metodo boste morali preglasiti to lastnost. Primerno samo za DIV-e z nadrejenim vsebnikom:

Elementu z razredom outer-div je dodeljena lastnost poravnave besedila z vrednostjo center, ki centrira besedilo znotraj. Toda za zdaj brskalnik vidi ugnezdeni DIV kot blokovni objekt. Da lastnost text-align deluje, je treba inner-div obravnavati kot male črke. Torej v tabelo CSS za izbirnik notranjih divov napišete naslednjo kodo:

Inner-div( display: inline-block; )

Lastnost prikaza spremenite iz block v inline-block.

metoda transformacije/prevajanja

Kaskadni slogovni listi omogočajo poljubno premikanje, nagibanje, vrtenje in drugačno preoblikovanje spletnih elementov. Za to se uporablja lastnost transformacije. Vrednosti označujejo želeno vrsto in stopnjo transformacije. V tem primeru bomo delali s prevajalnikom:

Funkcija prevajanja premakne element iz trenutnega položaja levo/desno in gor/dol. V oklepaju sta podani dve vrednosti:

• stopnja vodoravnega gibanja;
• stopnja navpičnega gibanja.

Če je treba element premakniti vzdolž samo ene od koordinatnih osi, potem za besedo translate navedete ime osi in v oklepaju količino zahtevanega premika:

Pretvorba: translateY(-20%);

V nekaterih priročnikih lahko najdete transformacijo s predponami prodajalca:

Webkit-transform: translate(50%, 50%); -ms-transform: prevedi (50%, 50%); transformacija: prevedi (50%, 50%);

V letu 2018 ta lastnost ni več podprta v vseh brskalnikih, vključno z Edge in IE.

Da centriramo DIV, ki ga želimo, je funkcija prevajanja CSS zapisana z vrednostjo 50 % za navpično in vodoravno os. To bo povzročilo, da bo brskalnik odmaknil element od trenutnega položaja za polovico njegove širine in višine. Določiti je treba lastnosti širine in višine:

Upoštevajte, da se element, za katerega je uporabljena lastnost transformacije, premika neodvisno od predmetov, ki ga obkrožajo. Po eni strani je to priročno, včasih pa lahko DIV s premikanjem prekriva drugo posodo. Zato se ta metoda centriranja spletnih komponent šteje za nestandardno in se uporablja le v primerih skrajne potrebe. Za animacijo so uporabljene transformacije po vseh kanonih CSS.

Delo s postavitvijo Flexbox

Flexbox velja za prefinjen način oblikovanja spletnih postavitev. Če pa ga obvladate, boste spoznali, da je veliko enostavnejši in prijetnejši od standardnih načinov oblikovanja. Specifikacija Flexbox je prilagodljiv in neverjetno močan način za ravnanje z elementi. Ime modula je iz angleščine prevedeno kot "prilagodljiva posoda". Vrednosti širine, višine in razporeditve elementov se prilagajajo samodejno, brez izračunavanja zamikov in robov.

V prejšnjih primerih smo že delali z lastnostjo display, vendar smo jo nastavili na vrednosti bloka in bloka v vrstici. Za ustvarjanje prilagodljivih postavitev bomo uporabili display: flex. Najprej potrebujemo flex posodo:

Če ga želimo pretvoriti v flex vsebnik v kaskadnih tabelah, zapišemo:

Flex-kontejner (zaslon: flex; )

Vsi ugnezdeni objekti, vendar le neposredni potomci, bodo upogljivi elementi:

Če postavite seznam v vsebnik flex, se elementi seznama li ne štejejo za elemente flex. Postavitev Flexbox bo delovala samo na ul:

Pravila za namestitev flex elementov

Za upravljanje elementov flex potrebujete justify-content in align-items. Glede na vrednosti, ki jih določite, ti dve lastnosti samodejno postavita predmete po potrebi. Če moramo centrirati vse ugnezdene DIV-e, napišemo justify-content: center, align-items: center in nič drugega. Brskalnik bo ostalo delo opravil sam:

Za centriranje besedila na DIV-ih, ki so prilagodljivi elementi, lahko uporabite standardno tehniko poravnave besedila. Lahko pa naredite vsak ugnezdeni DIV tudi flex vsebnik in upravljate vsebino z uporabo justify-content. Ta metoda je veliko bolj racionalna, če vsebuje raznoliko vsebino, vključno z grafiko, drugimi ugnezdenimi objekti, vključno s seznami na več ravneh.

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 za bloke in 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 govoril najprej 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:

Predpostavimo, da je to glava spletnega mesta. Ne razteza se čez celotno širino okna in ga moramo centrirati. Pišemo takole:

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. Samodejna vrednost sporoči brskalniku, naj samodejno izračuna oblazinjenje na obeh straneh, tako da je element natančno osredotočen na svojega starša. 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 enostavno navpično centrirala 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; )

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 vrstice za blok. Mislim, da je to bolj pravilen 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; )

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 centrira element navpično. Zato je treba v tem primeru blok nastaviti na naslednje:

div( prikaz: celica tabele; 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, vendar je 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. Na primer, nadrejeni ima 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!