Poravnava središča DIV

12. 3. 2019

Spletni oblikovalci uporabljajo DIV dnevno pri svojem delu. Brez podcenjevanja je to najbolj priljubljena oznaka. Odprite vir katerega koli mesta in videli boste, da je večina, če ne dve tretjini objektov, zaprta

. Tudi s prihodom HTML5 in pojavom resnih konkurentov v obliki članka ali glave, je še vedno povsod vstavljena v markup. Zato vam predlagam, da se ukvarjate z vprašanjem oblikovanja in usklajevanja divov v centru.

Kako srediti div

Kaj je div?

Ime elementa izhaja iz angleške delitve besed, kar pomeni delitev. Pri pisanju oznake se uporablja za razbijanje elementov v bloke. DIV vsebuje skupine vsebine na spletni strani. Na primer, slike, odstavki z besedilom. Oznaka ne vpliva na prikaz vsebine in ne nosi nobene semantične obremenitve.

DIV podpira vse globalne atribute. Za spletno oblikovanje pa potrebujete le dva - to je razred in id. Vse ostalo se boste spominjali le v eksotičnih primerih, in to ni dejstvo. Atribut poravnave, ki je bil prej uporabljen za centriranje DIV-a ali levega, je opuščen.

Kako uskladiti div v sredini

Kdaj uporabiti div

Predstavljajte si, da je stran hladilnik, in DIV so plastične posode, s katerimi morate razvrstiti vsebino. V eni posodi ne boste dajali sadja z jetrno klobaso. Vsako vrsto izdelka postavite ločeno. Podobno se generira spletna vsebina.

Odprite katero koli spletno mesto in ga razdelite na pomembne bloke. Na vrhu pokrovčka, pod nogo, v središču glavnega besedila. Običajno je na strani manjša kolona z oglaševalsko vsebino ali oblakom oznak.

 <code>Document</code>  

Zdaj razstavite vsak del podrobneje. Začnite z glavo. Glava strani ima ločen logotip, navigacijo, naslov prve ravni, včasih slogan. Dodelite svoj vsebnik vsakemu semantičnemu bloku. Tako ne boste ločevali le elementov v toku, temveč tudi olajšali njihovo oblikovanje. Za vas bo veliko lažje poravnati predmet v oznaki DIV v centru tako, da mu dodelite razred ali identifikator.

Kako poravnati besedilo v središču razdelka

Poravnava središča DIV z robovi

Pri obdelavi spletnih elementov brskalnik upošteva tri lastnosti: padding, marging in border. Padding padding je prostor med vsebino in njeno mejo. Margin - polja, ki ločujejo en predmet od drugega. Meja je črta vzdolž blokov. Določijo se lahko takoj z vseh strani ali samo z ene strani:

 div{border: 1px solid #333;border-left: none;} 

Te lastnosti dodajo prosti prostor med predmeti in jim pomagajo pri poravnavi in ​​postavitvi po potrebi. Na primer, če je treba blok s sliko premakniti z levega roba na sredino za 20%, dodelite element za levi rob z vrednostjo 20%:

 .block-with-img{margin-left: 20%;} 

Elemente lahko oblikujete tudi z njihovimi širinami in negativnimi zamiki. Na primer, obstaja blok z dimenzijami 200px z 200px. Najprej ji dodelimo absolutno pozicioniranje in ga prestavimo v center za 50%.

 div{position: absolute;left: 50%;} 

Zdaj, tako da je DIV idealno lociran v središču, mu dajemo negativno zamik v levo, ki je enak 50% njegove širine, to je -100 slikovnih pik:

 margin-left: -100px; 

V CSS se ta metoda imenuje "odstranjevanje zraka". Vendar pa ima pomembno pomanjkljivost potrebo po stalnih izračunih, kar je precej težko narediti za elemente z več ravnmi gnezdenja. Če sta nastavljena oblazinjenje in širina obrobe, bo privzeti brskalnik izračunal velikost vsebnika kot vsoto debeline obrobe, oblazinjenje na desno, levo in vsebino znotraj, kar je lahko tudi presenečenje.

Torej, ko morate centrirati DIV, uporabite lastnost box-sizing z vrednostjo robnega polja. Brskalniku ne bo dovolil, da doda zamik in meje celotni širini elementa DIV. Če želite element dvigniti ali spustiti, uporabite tudi negativne vrednosti. Lahko pa jih v tem primeru dodelite zgornjemu ali spodnjem polju vsebnika.

Kako uskladiti blok DIV v centru s samodejnimi polji

To je enostaven način za osredotočanje velikih blokov. Preprosto določite širino vsebnika in lastnost robov na samodejno. Brskalnik bo blok postavil na sredino z istimi polji na levi in ​​desni, da bo vse opravil sam. Posledično ne tvegate, da bi se zapletli v matematične izračune in znatno prihranili čas.

 div{width: 90%;margin: 0 auto;} 

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

Poravnava skozi prikaz: lastnost inline-block

Elementi DIV so privzeto blokirani in njihova prikazna vrednost je blokirana. Za to metodo boste morali to lastnost preglasiti. Primerno samo za DIV s starševsko vsebino:

Vsako besedilo

Element z razredom external-div je dodeljen lastnostim poravnave besedila s sredinsko vrednostjo, ki postavi besedilo v središče. Za zdaj pa brskalnik vidi vdelani DIV kot blok objekt. Če želite, da bo lastnost poravnave besedila delovala, mora biti notranje-div zaznano kot male črke. Zato v tabeli CSS za izbirnik internal-div zapišete naslednjo kodo:

.inner-div{display: inline-block;} 

Lastnost prikaza spremenite iz bloka v inline-block.

center align div

Metoda transformacije / prevajanja

Cascading style sheets omogočajo premikanje, košnjo, vrtenje in preoblikovanje spletnih elementov v vseh pogledih. To naredite tako, da uporabite lastnost transformacije. Vrednosti označujejo želeno vrsto pretvorbe in stopnjo. V tem primeru bomo delali s prevajanjem:

 transform: translate(50%, 50%); 

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

  • stopnja vodoravnega gibanja;
  • stopnjo gibanja navpično.

Če je treba element premakniti le vzdolž ene od koordinatnih osi, potem za besedo določite ime osi in v oklepaju vrednost zahtevanega odmika:

 transform: translateY(-20%); 

V nekaterih vajah lahko najdete preoblikovanje s predponami prodajalca:

 -webkit-transform: translate(50%, 50%);-ms-transform: translate(50%, 50%);transform: translate(50%, 50%); 

Leta 2018 to ni več potrebno, lastnost podpirajo vsi brskalniki, vključno z Edge in IE.

Za premik DIV, ki ga potrebujemo v središču, je funkcija prevajanja CSS zapisana z vrednostjo 50% za navpično in vodoravno os. Zaradi tega bo brskalnik element premaknil iz trenutnega položaja za polovico širine in višine. Navesti je treba lastnosti širine in višine:

 Dokument 

Ne pozabite, da se element, za katerega se uporablja lastnost transformacije, premika, ne glede na predmete okoli njega. Po eni strani je priročno, vendar včasih premika, lahko DIV blokira drugo posodo. Zato se ta metoda centriranja spletnih komponent šteje za nestandardno in se uporablja samo v nujnih primerih. Za animacijo se uporabljajo transformacije nad vsemi kanoni CSS.

center align div

Delo z postavitvijo Flexbox

Flexbox je težaven način za postavitev spletnih postavitev. Če pa ga obvladate, boste razumeli, da je veliko enostavnejši in prijetnejši od standardnih metod oblikovanja. Specifikacija Flexbox je prilagodljiv in izjemno zmogljiv način za obdelavo predmetov. Iz angleščine se ime modula prevede kot »fleksibilni zabojnik«. Vrednosti širine, višine, lokacije elementov se prilagajajo samodejno, brez izračuna zamikov in robov.

Kako poravnati center z lastnostmi css div centra

V prejšnjih primerih smo že delali z lastnostmi zaslona, ​​vendar smo si zastavili blok (blok) in vrednost niza (inline-block). Za izdelavo fleksibilnih postavitev bomo uporabili zaslon: flex. Najprej potrebujemo flex kontejner:

Za pretvorbo v fleksibilni vsebnik v kaskadnih tabelah pišemo:

 .flex-container{display: flex;} 

Vsi zajeti v njej, vendar samo neposredni potomci, bodo flex-elementi:

Prvi
Drugi
Tretjič
Četrti

Če postavite seznam znotraj flex kontejnerja, se elementi liste li štejejo za flex elemente. Postavitev Flexbox bo delovala samo na ul:

Flex pravila postavitve

Za upravljanje flex elementov potrebujete justify-content in align-items. Odvisno od podanih vrednosti, ti dve lastnosti postavita predmete po potrebi samodejno. Če želimo poravnati vse ugnezdene DIV-je v centru, napišemo justify-content: center, align-items: center in nič drugega. Brskalnik bo opravil preostalo delo:

Prvi
Drugi
Tretjič
Četrti

Za poravnavo besedila v središču DIV, ki je flex element, lahko uporabite standardno tehniko poravnave besedila. Lahko pa naredite vsako ugnezdeno div tudi flex-kontejnerje in upravljate vsebino z justify-content. Ta metoda je veliko bolj racionalna, če znotraj vsebuje različne vsebine, vključno z grafiko, drugimi ugnezdenimi predmeti, vključno s seznami na več ravneh.