Sadržaj div je centriran. Središnje poravnanje u CSS-u. Centriranje niza ili string-* elementa

Ovaj tipdopušta prolazak zabranjenih elemenata.

Sada prijeđimo na atribut uskladiti. Postavlja horizontalno poravnanje objekata na i uklapa se nakon deklaracije oznake. Obično se može koristiti za poravnavanje sadržaja ulijevo ( lijevo), uz desni rub ( pravo), centrirano ( centar) i širinom teksta ( opravdati).

U nastavku ću dati primjer u kojem ću sliku i pasus postaviti u središte.

Ovaj će sadržaj biti centriran.

Imajte na umu da za sliku atribut koji analiziramo ima malo drugačija značenja.

U primjeru koji sam koristio poravnati="sredina". Zahvaljujući tome, slika je bila poravnata tako da se rečenica nalazi jasno u sredini slike.

Alati za centriranje u cssu

CSS svojstva dizajnirana za poravnavanje blokova, teksta i grafičkog sadržaja koriste se mnogo češće. To je prvenstveno zbog pogodnosti i fleksibilnosti implementacije stilova.

Pa počnimo s prvim svojstvom centriranja teksta - ovo je tekst-uskladiti.

Funkcionira na isti način kao align in . Među ključnim riječima možete odabrati jednu s općeg popisa ili naslijediti karakteristike pretka ( naslijediti).

Želio bih napomenuti da u css3 možete postaviti još 2 parametra: početak– ovisno o pravilima pisanja teksta (s desna na lijevo ili obrnuto), postavlja poravnanje lijevo ili desno (slično kao kod rada lijevo ili desno) i kraj– suprotno od početka (pri pisanju teksta slijeva nadesno djeluje kao desno, pri pisanju zdesna nalijevo – lijevo).

Reći ću vam jedan mali trik. Prilikom odabira vrijednosti opravdati posljednja linija može neprivlačno visjeti s dna. Kako biste ga, primjerice, pozicionirali u središte, možete koristiti svojstvo tekst-poravnaj-zadnji.

Da biste okomito poravnali sadržaj stranice ili ćelije tablice, koristite svojstvo okomito poravnati. U nastavku sam opisao glavne ključne riječi elementa.

Udubljenja

I na kraju dolazimo do uvlaka pasusa. CSS jezik koristi posebno svojstvo tzv tekstualna uvlaka.

Uz njegovu pomoć možete napraviti i crvenu liniju i izbočinu (morate odrediti negativnu vrijednost).

Mislim da su se mnogi od vas koji su se morali baviti rasporedom susreli s potrebom okomitog poravnavanja elemenata i poznaju poteškoće koje nastaju prilikom poravnavanja elementa prema sredini.

Da, u CSS-u postoji posebno svojstvo vertikalnog poravnanja s više vrijednosti za okomito poravnanje. Međutim, u praksi to uopće ne funkcionira kako se očekuje. Pokušajmo to shvatiti.

Usporedimo sljedeće pristupe. Poravnajte pomoću:

• stolovi,
• uvlačenje,
• linija-visina
• istezanje,
• negativna margina,
• transformirati
• pseudo element
• flexbox.

Postoje dva div elementa, od kojih je jedan ugniježđen u drugi. Dajmo im odgovarajuće klase – vanjske i unutarnje.

Prvo, razmotrimo slučaj kada su dimenzije vanjskih i unutarnjih blokova znan. Dodajmo pravilo display: inline-block unutarnjem elementu, te text-align: center i vertical-align: middle vanjskom elementu.

Imajte na umu da se poravnanje odnosi samo na elemente koji imaju inline ili inline-block način prikaza.

Postavimo veličine blokova, kao i boje pozadine tako da možemo vidjeti njihove granice.

Vanjski (širina: 200px; visina: 200px; poravnanje teksta: središte; okomito poravnavanje: sredina; boja pozadine: #ffc; ) .unutarnji (zaslon: inline-block; širina: 100px; visina: 100px; boja pozadine : #fcc; )
Nakon primjene stilova, vidjet ćemo da je unutarnji blok poravnat vodoravno, ali ne i okomito:
http://jsfiddle.net/c1bgfffq/

Zašto se to dogodilo? Stvar je u tome što svojstvo vertical-align utječe na poravnanje sam element, a ne njegov sadržaj(osim kada se primjenjuje na ćelije tablice). Stoga primjena ovog svojstva na vanjski element nije proizvela ništa. Štoviše, primjena ovog svojstva na unutarnji element također neće učiniti ništa, jer su inline-blokovi poravnati okomito u odnosu na susjedne blokove, au našem slučaju imamo jedan inline blok.

Postoji nekoliko tehnika za rješavanje ovog problema. U nastavku ćemo pobliže pogledati svaku od njih.

Poravnanje pomoću tablice

Očigledni nedostatak ovog rješenja je da je, sa semantičkog gledišta, neispravno koristiti tablice za usklađivanje. Drugi nedostatak je što stvaranje tablice zahtijeva dodavanje još jednog elementa oko vanjskog bloka.

Prvi minus se može djelomično ukloniti zamjenom oznaka table i td s div i postavljanjem načina prikaza tablice u CSS-u.

Poravnanje pomoću uvlake

Vanjski (visina: 200px; ) .unutarnji (visina: 100px; margina: 50px 0;)
http://jsfiddle.net/c1bgfffq/6/

Nedostatak rješenja je što je primjenjivo samo u ograničenom broju slučajeva kada su poznate visine obaju blokova.

Poravnanje pomoću visine linije

Vanjski (visina: 200px; visina linije: 200px;) .unutarnji (bjelina: nowrap; preljev: skriven;)
http://jsfiddle.net/c1bgfffq/12/

Ova se tehnika također može upotrijebiti za poravnavanje višerednog teksta ako redefinirate vrijednost visine retka za unutarnji blok, te također dodate display: inline-block i vertical-align: središnja pravila.

Vanjski (visina: 200px; visina linije: 200px; ) .unutarnji (visina linije: normalno; prikaz: umetnuti blok; okomito poravnanje: sredina; )
http://jsfiddle.net/c1bgfffq/15/

Nedostatak ove metode je da mora biti poznata visina vanjskog bloka.

Poravnanje pomoću "istezanja"

Da biste to učinili potrebno vam je:

1. postavite relativno pozicioniranje vanjskom bloku, a apsolutno pozicioniranje internom bloku;
2. dodajte pravila top: 0 i bottom: 0 unutarnjem bloku, zbog čega će se rastegnuti na cijelu visinu vanjskog bloka;
3. postavite okomito ispunjavanje unutarnjeg bloka na auto.

Ideja koja stoji iza ove tehnike je da postavljanje visine za rastegnuti i apsolutno pozicionirani blok uzrokuje da preglednik izračuna vertikalno ispunjavanje u jednakom omjeru ako je postavljeno na auto.

Usklađivanje s vrhom negativne margine

Morate postaviti vanjski blok na relativno pozicioniranje, a unutarnji blok na apsolutno pozicioniranje. Zatim trebate pomaknuti unutarnji blok prema dolje za polovicu visine vanjskog vrha bloka: 50% i podići ga za polovicu vlastite visine margin-top: -H unutarnji / 2.

Vanjski (položaj: relativan; ) .unutarnji (visina: 100 px; položaj: apsolutni; vrh: 50%; margin-top: -50 px; )
http://jsfiddle.net/c1bgfffq/13/

Nedostatak ove metode je što se mora znati visina unutarnje jedinice.

Usklađivanje s transformacijom

Vanjski ( položaj: relativan; ) .unutarnji ( položaj: apsolutni; vrh: 50%; transformacija: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Zašto je bilo nemoguće postaviti vrijednost kao postotak u prethodnoj metodi? Budući da se postotne vrijednosti margine izračunavaju u odnosu na nadređeni element, vrijednost od 50% bila bi polovica visine vanjske kutije, a morali bismo podići unutarnju kutiju na polovicu vlastite visine. Svojstvo transformacije savršeno je za to.

Nedostatak ove metode je što se ne može koristiti ako unutarnja jedinica ima apsolutno pozicioniranje.

Usklađivanje s Flexboxom

Vanjski blok treba postaviti na display: flex, a unutarnji blok na margin: auto. I to je sve! Prekrasno, zar ne?

Vanjski (zaslon: savitljiv; širina: 200 piksela; visina: 200 piksela; ) .unutarnji (širina: 100 piksela; margina: automatski; )
http://jsfiddle.net/c1bgfffq/14/

Nedostatak ove metode je što Flexbox podržavaju samo moderni preglednici.

Koju metodu trebam odabrati?

• Za okomito poravnavanje teksta bolje je koristiti okomite uvlake ili svojstvo line-height.
• Za apsolutno pozicionirane elemente s poznatom visinom (na primjer, ikone), metoda s negativnim svojstvom margin-top je idealna.
• Za složenije slučajeve, kada je visina bloka nepoznata, trebate koristiti pseudoelement ili svojstvo transformacije.
• Pa, ako ste toliko sretni da ne trebate podržavati starije verzije IE preglednika, onda je, naravno, bolje koristiti Flexbox.

Analiziramo poravnanje blok elemenata u CCS. Stavljamo nekoliko u središte DIV ili LI elementi. Nudim nekoliko svojih opcija za većinu slučajeva.

Ovaj članak nema za cilj navesti sve mogućnosti poravnanja i prepisati ono što već negdje postoji. Ne sjećam se zašto, ali često nisam bio zadovoljan ponuđenim opcijama. Ili su postojali fiksni blokovi, ili se sve raspalo tijekom adaptivnog izgleda ili neki drugi nedostaci.

Ponekad je za poravnanje prema središtu dovoljno dodati nekoliko atributa i ne treba vam ništa komplicirano. Na primjer, i ja sam.

Ispod je nekoliko opcija za prilagodljivi izgled za poravnavanje blokova u sredini, koje sam koristim na svojim web stranicama. I ako je prvi prilično čest, onda možda neke druge metode neće biti niti opisane na Internetu na ovaj način.

opcija 1

Jednostavno poravnavanje svih blokova prema sredini stranice.

Idemo u centar UL sadržaj od 4 elementa LI, koji se nalaze u bloku DIV s razredom spremnik.

U ovom slučaju dovoljna su sljedeća pravila u CSS-u:

Spremnik (
širina: 100%;
}

Kontejner ul (
poravnanje teksta: središte;
list-style: nijedan;
}

Spremnik li (
prikaz: inline-block;
}

Dobivamo sljedeći pogled: Ovdje su centrirana 4 LI elementa. Kada se veličina zaslona smanji, elementi koji ne odgovaraju pomiču se prema dolje.

Ako blokovi LI s tim svojstvima nisu instalirani u središtu, što znači da ih neko drugo svojstvo ometa. Na primjer, ovo bi moglo biti vlasništvo float:lijevo ili prikaz: stol; ili neki drugi.

Sada možete dodati druge stilove u gornju strukturu (u osnovni okvir CSS poravnanja). Na primjer, napravite blokove fiksne veličine i međusobno uvucite:

Spremnik li (
prikaz: inline-block;
margina: 5px;
širina: 100px;
}

Dobivamo sljedeće:

Ali postoji jedan nedostatak ove opcije. Blokovi se nalaze u središtu, ali su velike udaljenosti lijevo i desno. Mogu se smanjiti promjenom širine.

Ili možete napraviti spremnike iste veličine tako da udubine budu samo između spremnika, a s lijeve i desne strane ih neće biti.

Onda ćemo ukloniti margina i dodajte širinu ovoga širina tako da potpuno pokrije područje.

Spremnik li (
okomito poravnanje: gore;
prikaz: inline-block;
širina: 32,899%;
}

Između blokova bit će mali prostor praznog prostora. A da biste ga učinili još većim, možete se povući unutra pomoću parametra podstava.

U blokove namjerno ne dodajem ništa dodatno kako bih ostavio upravo one stilove koji izravno utječu na poravnanje. Ali ako učinite isto, nećete dobiti takve blokove. Barem zato što, prvo, morate dodati boju bloku, a drugo, ako je prazan, stavite visina: 100px;. Ostali atributi su po vašoj želji.

Konačna verzija je:

Na gornjoj snimci zaslona ostavio sam ostala područja stranice tako da je jasno gdje su granice blokova, jer ako su uz rub, tada sam rub više nije vidljiv. A na slici su bijeli rubovi lijevo i desno različito poravnanje koje nema ništa zajedničko s dotičnim primjerom. Ponavljam, sami blokovi su uz rubove, koji nisu vidljivi, jer ih blokovi potpuno prekrivaju.

opcija 2

Postoji mnogo načina za centriranje blokova. Ali ako trebate napraviti poravnanje pametnije, morate razbiti mozak. Srećom, došao sam do zanimljive metode za sljedeće svrhe:

Kako centrirati sve divove tako da blok u sljedećem retku bude lijevo poravnat?

Imamo sljedeću strukturu:

Za njih pišemo tečajeve:

širina: 90%;
margina: 0 auto;
}

Arhiva-članak (
prikaz: inline-block;
okomito poravnanje: gore;

Širina: calc(33,3333% - (0,666666666667 * 36px));
margina: 0 10px 0 11px;
}

Imajte na umu da ako promijenite veličine kalk, tada morate eksperimentalno prilagoditi dimenzije margina. Inače blokovi neće biti centrirani.

Ovo poravnanje mora se izvršiti na oko. Ali ako ima manje blokova u novom retku nego u retku iznad, ovaj usamljeni blok bit će uz lijeva strana. I izgleda mnogo ljepše nego kada se u susjednoj liniji jedan jedini blok nalazi u centru.

Primjenom gornje tehnike dobit ćemo prilagodljivi izgled, sa svim rubovima jednakim, koji se neće pogoršati mijenjanjem veličina zaslona.

A ako želimo da mobilna verzija nema 3 bloka, već 2, tada ćemo u ccs za razlučivost od 768 piksela blokove podijeliti drugačije:

@medijski zaslon i (maksimalna širina: 768px) (
.arhivski-članak (
širina: calc(47,3333% - (0,666666666667 * 25px));
margina: 0 10px 0 20px;
}
}

Uzmimo iste blokove u mobilnoj verziji, ali s dva bloka po retku:

Opcija 3

Sada ćemo poravnati pomoću savijati. Ovo se može činiti kao idealan način za izravnavanje, jer zapravo radi vrlo jednostavno. Međutim, FLEX se ne nosi sa zadatkom opisanim u opciji 2. Barem ja nisam uspio postići iste rezultate.

Na sljedeći odjeljak:

Dodavanje stilova:

#cssmenu (
margina: 20px auto;
}

#cssmenu ul (
list-style: nijedan;
zaslon: savitljiv;
flex-wrap: omot;
justify-content: centar;
}

#cssmenu > ul > li (
margina: 1px;
}

Dobivamo:

U navedenom primjeru:

flex-wrap: omot;

Premješta blokove u sljedeći redak ako popune spremnik. Inače će ići dalje izvan prozora preglednika.

justify-content: centar;

Poravnavamo sadržaj blokova prema sredini.

Opcija 4

Još jedna mogućnost poravnanja pomoću flex tehnologije.

Imamo kontejner s dva bloka unutra. Potrebna su nam ova 2 bloka da podijelimo širinu na dvije jednake strane.

Da bismo to učinili, zapisat ćemo sljedeća svojstva u stilovima:

Spremnik (
zaslon: savitljiv;
}

Blok (
fleksibilna osnova: 100%;
}

Opcija 5

Postoji još jedna opcija za centriranje blokova, ako je njihov broj strogo jednak. Na primjer: postoji 9 blokova, 3 za svaki red. I znate da će tako uvijek ostati. Na primjer, stvarate odredišnu stranicu i sigurno znate da ništa nepotrebno neće biti dodano na web mjesto između ovih blokova.

Dakle, imamo 9 blokova sljedećeg tipa (nisam duplicirao linije 9 puta, ali imajte na umu da postoji 9 blokova):

Primijenite stilove za njih:

Arhivski spremnik-za-članke (
širina: 100%;
poravnanje teksta: središte;
}

Arhiva-članak (
širina: 25%;
okomito poravnanje: gore;
prikaz: inline-block;
poravnanje teksta: lijevo;
}

Arhiva-članak:nth-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7) (
margina: 20px 0 30px 40px;
}

Arhiva-članak:nth-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8) (
margina: 20px 40px 30px;
}

Arhiva-članak:nth-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9) (
margina: 20px 40px 30px 0;
}

Dobit ćemo i prilagodljivi izgled. Kada se zaslon smanji, blok koji ne stane ići će dolje u sredinu

Prednost ove vrste centriranja je u tome što možete jasno i jasno napraviti udubljenja između blokova.

Glavni nedostatak je što se ništa ne može staviti unutar blokova. Bilo koji element:

ili div ili str ili nešto drugo, smatrat će se unutarnjim elementom n-to dijete. Kao rezultat toga, CSS stilovi će biti superponirani na njega i sve uvlake napravljene korištenjem margine će pomaknuti blokove drugačije nego što je izvorno predviđeno.