Svaki dizajner izgleda stalno se suočava s potrebom da uskladi sadržaj u bloku: horizontalno ili okomito. Postoji nekoliko dobrih članaka na ovu temu, ali svi nude mnogo zanimljivih, ali malo praktičnih opcija, zbog čega morate gubiti dodatno vrijeme da biste istakli ono glavno. Odlučio sam da dostavim ove podatke u formi koja mi odgovara, da više ne guglam.
Poravnavanje blokova s poznatim veličinama
Najlakši način za korištenje CSS-a je da poravnate okvire koji imaju unaprijed određenu visinu (za vertikalno poravnanje) ili širinu (za horizontalno poravnanje).
Poravnanje sa paddingom
Ponekad ne možete centrirati element, već mu dodati granice sa svojstvom " padding".
Na primjer, postoji slika 200 x 200 piksela i želimo da je centriramo u blok 240 x 300. Možemo postaviti visinu i širinu vanjskog bloka = 200px, i dodati 20 piksela na vrhu i na dnu, i 50 lijevo i desno.
.example-wrapper1 (pozadina: #535E73; širina: 200px; visina: 200px; padding: 20px 50px;)Poravnavanje apsolutno pozicioniranih blokova
Ako je blok postavljen na " pozicija: apsolutna", onda se može pozicionirati u odnosu na najbliži roditelj sa "pozicija: relativna". Za ovo, sva svojstva (" top","u pravu","dnu","lijevo") unutrašnjeg bloka za dodjelu iste vrijednosti, kao i "margina: auto".
*Postoji nijansa: širina (visina) unutrašnjeg bloka + vrijednost lijevog (desno, dolje, gore) ne smije prelaziti veličinu roditeljskog bloka. Sigurnije je postaviti lijeva (desno, dolje, gore) svojstva na 0 (nula).
.example-wrapper2 (pozicija: relativna; visina: 250px; pozadina: url(space.jpg) ;) 0; desno: 0; margina: auto; pozadina: url(king.png) ;)Horizontalno poravnanje
Poravnanje sa "text-align: center"
Za poravnavanje teksta u bloku postoji posebno svojstvo " text-align". Kada je postavljeno na " centar" svaki red teksta će biti vodoravno poravnat. Za višeredni tekst ovo rješenje se rijetko koristi, češće se može naći ova opcija za poravnavanje raspona, linkova ili slika.
Jednom sam morao smisliti tekst da pokažem kako poravnavanje teksta funkcionira sa CSS-om, ali ništa zanimljivo mi nije palo na pamet. U početku sam odlučio da negdje kopiram pjesmicu, ali sam se sjetio da bi to moglo pokvariti jedinstvenost članka, a naši dragi čitatelji to neće moći pronaći na Google-u. I onda sam odlučio da napišem ovaj pasus ovdje – na kraju krajeva, poenta nije u njemu, već je poenta u usklađivanju.
.example-text (text-align : center ; padding : 10px ; background : #FF90B8 ;)Vrijedi napomenuti da će ovo svojstvo raditi ne samo za tekst, već i za sve ugrađene elemente ("display: inline").
Ali ovaj tekst je lijevo poravnat, ali je u bloku koji je centriran u odnosu na omotač.
.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; širina: 40%; padding : 10px ; text-align : lijevo; background : #FFE5E5 ; )Poravnavanje blokova sa marginama
Elementi na nivou bloka sa poznatom širinom lako se poravnavaju horizontalno tako što ćete ih postaviti na "margin-left: auto; margin-right: auto". Obično se koristi skraćenica: " margina: 0 auto" (umjesto nule, može postojati bilo koja vrijednost). Ali za vertikalno poravnanje, ova metoda neće raditi.
.lama-wrapper (visina: 200px; pozadina: #F1BF88;) .lama1 (visina: 200px; širina: 200px; pozadina: url(lama.jpg); margina: 0 auto ;)Ovako vrijedi poravnati sve blokove, gdje je to moguće (gdje nije potrebno fiksno ili apsolutno pozicioniranje) - to je najlogičnije i adekvatnije. Iako se ovo čini očiglednim, povremeno sam viđao zastrašujuće primjere s negativnim uvlakama, pa sam mislio da pojasnim.
Vertikalno poravnanje
Mnogo je više problema sa vertikalnim poravnanjem - očigledno, to nije bilo predviđeno u CSS-u. Postoji nekoliko načina da se postigne željeni rezultat, ali svi nisu baš lijepi.
Poravnanje sa svojstvom line-height
U slučaju kada u bloku postoji samo jedna linija, možete postići njeno vertikalno poravnanje primjenom " visina linije" i podesite ga na željenu visinu. Da biste bili sigurni, trebali biste postaviti i "height", čija će vrijednost biti jednaka vrijednosti "line-height", jer ovo drugo nije podržano u svim pretraživačima.
.example-wrapper4 (visina linije: 100px; boja: #DC09C0; pozadina: #E5DAE1; visina: 100px; poravnanje teksta: centar;)Također je moguće poravnati blok s više linija. Da biste to učinili, morat ćete koristiti dodatni blok omotača i postaviti mu visinu linije. Unutrašnji blok može biti višelinijski, ali mora biti "inline". Na njega morate primijeniti "vertical-align: middle".
.example-wrapper5 (visina linije: 160px; visina: 160px; veličina fonta: 0; pozadina: #FF9B00;) 1.5; vertical-align: srednja; pozadina: #FFFAF2; boja: #FF9B00: text-align; ; )Blok omotača mora imati postavljenu "font-size: 0". Ako veličinu fonta ne postavite na nulu, pretraživač će sam sebi dodati nekoliko dodatnih piksela. Također ćete morati navesti veličinu fonta i visinu reda za unutrašnji blok, jer su ova svojstva naslijeđena od roditelja.
Vertikalno poravnanje u tabelama
Nekretnina " vertikalno poravnanje" također utiče na ćelije tabele. Sa vrijednošću postavljenom na "sredina", sadržaj unutar ćelije je centriran. Naravno, tabelarni izgled se danas smatra arhaičnim, ali u izuzetnim slučajevima može se simulirati navođenjem " displej: ćelija tabele".
Obično koristim ovu opciju za vertikalno poravnanje. Ispod je primjer izgleda preuzet iz gotovog projekta. Zanimljiva je slika koja je na ovaj način centrirana okomito.
.one_product .img_wrapper ( display : table-cell ; visina : 169px ; vertikalno poravnanje : sredina ; overflow : skriveno ; pozadina : #fff ; širina : 255px ; ) .one_product img ( max-height : 169px : max-10width %; minimalna širina: 140px; prikaz: blok; margina: 0 auto;)Treba imati na umu da ako element ima "float" set koji nije "none", onda će ionako biti u obliku bloka (prikaz: blok) - tada ćete morati koristiti dodatni omotač bloka.
Poravnanje sa dodatnim inline elementom
A za inline elemente možete primijeniti " vertikalno poravnanje: sredina". U ovom slučaju, svi elementi sa " displej: inline" koji se nalaze na istoj liniji poravnat će se sa zajedničkom središnjom linijom.
Morate kreirati pomoćni blok visine jednake visini roditeljskog bloka, tada će željeni blok biti centriran. Za ovo je zgodno koristiti pseudoelemente:prije ili:poslije.
.example-wrapper6 (visina: 300px; text-align: center; background: #70DAF1;) .pudge (prikaz: inline-block; vertical-align: middle; background: url(pudge.png); background-color: # fff ; širina : 200px ; visina : 200px ; ) .riki (prikaz: inline-block; visina: 100%; vertikalno poravnanje: sredina;)Prikaz: savijanje i poravnanje
Ako vam nije stalo do korisnika Explorera 8, ili vam je toliko stalo da ste spremni da ubacite dio dodatnog javascripta za njih, onda se može koristiti "display: flex". Flex kutije zaista dobro rješavaju probleme sa poravnanjem, a dovoljno je napisati "margin: auto" da centrira sadržaj unutra.
Ova metoda me do sada praktički nikada nije srela, ali za nju nema posebnih ograničenja.
Pa, to je sve što sam htio napisati o CSS poravnanju. Sada centriranje sadržaja neće biti problem!
CSS tekst predstavlja skup svojstava za formatiranje tekstualnog sadržaja web stranica. Upotreba CSS stilova za formatiranje teksta omogućava vam da HTML elementima date izgled koji želite, tako da se HTML oznake mogu koristiti samo za njihovu namjenu, za definiranje strukture dokumenta.
O svojstvima teksta dodanim u specifikaciju CSS3— text-overflow , word-break , word-wrap , može se čitati.
Formatiranje teksta u CSS-u
1. Horizontalno poravnanje text-align
Svojstvo poravnava linije teksta unutar bloka po širini u odnosu na njegove granice. Primjenjuje se samo na elemente na nivou bloka, kao što su paragrafi. Naslijeđeno.
| vrijednosti: | |
| lijevo | Lijevo poravnanje elementa. Zadana vrijednost za jezike koji čitaju slijeva nadesno. |
| u pravu | Poravnava prema desnoj ivici elementa. |
| centar | Poravnanje centra elementa kontroliše poravnanje sadržaja, a ne same elemente. Centrira svaki red teksta elementa. |
| opravdati | Poravnanje prema širini elementa. U poravnatom tekstu, oba kraja linije pristaju uz lijevu i desnu ivicu nadređenog elementa. Razmaci između riječi i slova su raspoređeni na način da je dužina svih redova jednaka. Različiti pretraživači mogu povećati i uvlačenje između riječi i razmak između slova. |
| početni | |
| nasljediti | |
Sintaksa
P (poravnanje teksta: lijevo;) p (poravnanje teksta: desno;) p (poravnanje teksta: centar;) p (poravnanje teksta: poravnanje;) 
Rice. 1. Svojstvo text-align
2. Uvlačenje teksta-uvlaka
Postavlja uvlačenje (uvlačenje) na prvom redu elementa, dajući iluziju strukturiranog teksta. Primjenjuje se na bilo koji element bloka, zadana vrijednost je 0. Ako postoji slika u prvom redu elementa bloka, ona će se pomicati zajedno s ostatkom teksta. Naslijeđeno.
Sintaksa
P(uvlačenje teksta: 5px;) p(uvlačenje teksta: 2%;) 
Rice. 2. Svojstvo text-indent
3. line-height
Rice. 3. Linejski kontejner Svojstvo postavlja udaljenost između osnovnih linija reda teksta, specificirajući iznos za koji se visina bloka svakog elementa povećava ili smanjuje. Kontrolira razmak između redova, dodatni razmak između redova iznad i ispod teksta. Da biste odredili razmak između redaka, morate pronaći razliku između visine reda i veličine fonta, podijeliti razliku sa dva i dodati svaku polovinu području sadržaja iznad i ispod. Uzima samo pozitivne vrijednosti. Standardni razmak između redova je ekvivalentan 120%.
Ako su visina reda i visina jednake, poravnava tekst po visini. Naslijeđeno.
Sintaksa
h1 (visina linije: 20px;) h1 (visina linije: 200%;) h1 (visina linije: 1,2;) h1 (visina linije: normalna;) 
Rice. 4. Primjer prikaza različitih vrijednosti proreda
4. vertikalno poravnati
Primjenjuje se samo na umetnute elemente, slike i polja obrasca. Ne poravnava sadržaj elementa bloka. Nije naslijeđen.
| vertikalno poravnanje | |
|---|---|
| vrijednosti: | |
| osnovna linija | Poravnava osnovnu liniju elementa sa osnovnom linijom njegovog roditelja, poravnavajući srednju liniju elementa sa srednjom linijom roditelja. |
| sub | Pravi subscript element (slično oznaci ). Iznos degradacije elementa može varirati ovisno o korisnikovom pretraživaču. |
| Super | Element čini superscript (slično oznaci ). Vrijednosti sup i super ne mijenjaju veličinu fonta, prema zadanim postavkama tekst elementa superscript i subscript ima istu veličinu kao i tekst nadređenog elementa. |
| top | Gornja ivica elementa je poravnata sa gornjom ivicom najvišeg elementa u liniji. |
| text top | Gornja ivica elementa je poravnata sa gornjom ivicom fonta roditeljskog elementa. |
| srednji | Srednja linija elementa (obično slike) je poravnata sa linijom koja prolazi kroz sredinu nadređenog elementa. |
| dnu | Donja ivica elementa je poravnata sa donjom ivicom najnižeg elementa u liniji. |
| donji tekst | Donja ivica elementa je poravnata sa donjom ivicom fonta roditeljskog elementa. |
| dužina | Postavlja vrijednost u jedinicama dužine, pomičući element za određenu udaljenost. |
| % | Ne dozvoljava postavljanje sredine, izračunato kao dio visine linije elementa, a ne njegovog roditelja, tj. ako postavite vertical-align na 50% na elementu s visinom linije od 20px, tada će se osnovna linija elementa povećati za 10px. |
| početni | Postavlja vrijednost svojstva na njegovu zadanu vrijednost. |
| nasljediti | Nasljeđuje vrijednost svojstva od roditeljskog elementa. |
Html postoji univerzalni parametar i zove se ALIGN. Može se koristiti sa raznim html tagovima:
p | h1 | div | stol | thead | tijelo | stopalo | tr | th | td
Moguće vrijednosti:
Centar- centriranje
lijevo- lijevo poravnanje
U redu- desno
opravdati- po širini, na lijevoj i desnoj ivici. U ovom slučaju može postojati veliki razmak između riječi.
Tekst opravdan
Izgled u pretraživaču:
Naslov je poravnat po sredini
Tekst je opravdan. Tekst je opravdan. Tekst je opravdan. Tekst je opravdan. Tekst je opravdan. Tekst je opravdan. Tekst je opravdan. Tekst je opravdan. Tekst je opravdan. Tekst je opravdan. Tekst je opravdan. Tekst je opravdan.
Sadržaj ovog bloka je desno poravnat
Imajte na umu da se lijevo poravnanje vrši automatski. Stoga, nema potrebe specificirati takvu vrijednost za parametar poravnanja.
Do sada smo samo poravnavali elemente lijevo. Tačnije, mi to uopće nismo radili, a sam pretraživač po defaultu poravnava elemente lijevo. Naravno, bilo bi previše dosadno poravnati sve na lijevo. Stoga, postoje različiti načini za poravnavanje prema sredini i desno.
Poravnavanje elemenata je nešto što samo trebate znati kada . Prva stvar koju treba uraditi je da otkucate najjednostavniju stranicu.
Jednom davno postojala je oznaka
Možete dodati i sliku centriranu, hajde da također pređemo na sljedeći red pomoću oznake
:
Naslov 1. nivoa centriran
To je bila oznaka
Da bi riješili ovaj problem, programeri su smislili univerzalni način poravnanja elemenata. HTML. Metoda je korištenje takozvanih kontejnera, koji se kreiraju pomoću oznake Hajde sada da napišemo isto HTML kod, ali uz korištenje kontejnera, pored toga, poravnajmo ne u centar, već udesno. Kao što vidite, sve funkcioniše. Savjetujem vam da promijenite i vrijednost atributa " poravnati" da pogledate druge vrste poravnanja sadržaja kontejnera. Drugi način za poravnavanje elemenata HTML- ovo su tabele, ali ova tema zaslužuje posebnu raspravu, pa ćemo o njoj govoriti u jednom od sljedećih članaka. Za sada bi vaša stranica trebala izgledati ovako: S poštovanjem, Mikhail Rusakov. P.S. Ako želite da saznate više o HTML, zatim pogledajte moj besplatni kurs s primjerom izrade web stranice na HTML: Poravnanje teksta određuje njegov izgled i orijentaciju rubova pasusa, a može biti lijevo, desno, centrirano ili poravnato. U tabeli. 1 prikazuje opcije poravnanja tekstualnog bloka. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Najčešća opcija je poravnato lijevo, kada je lijevi tekst pomaknut na ivicu, dok desni ostaje nazubljen. Desno i centralno poravnanje se uglavnom koristi u naslovima i podnaslovima. Treba imati na umu da se prilikom upotrebe opravdanja u tekstu mogu pojaviti veliki razmaci između riječi, što nije baš lijepo. Oznaka pasusa se obično koristi za postavljanje poravnanja teksta. Sa atributom align, koji specificira metodu poravnanja. Također je dozvoljeno poravnati blok teksta pomoću oznake Tekst Tekst Tekst Tekst Lijevo poravnanje elemenata je postavljeno prema zadanim postavkama, tako da nema potrebe da ga još jednom specificirate. Dakle align="left" može biti izostavljen. Razlika između pasusa (tag ) i oznaku Atribut align je prilično svestran i može se primijeniti ne samo na osnovni tekst, već i na naslove poput Primjer 1: Poravnanje teksta
metoda nabrajanja Pustinju dijelimo na nekoliko elementarnih dijelova, čija se veličina poklapa s ukupnim dimenzijama lava, ali je manja od veličine kaveza. Zatim, jednostavnim nabrajanjem, određujemo područje u kojem se lav nalazi, što automatski dovodi do njegovog hvatanja. metoda dihotomije Pustinju dijelimo na dvije polovine. U jednom dijelu je lav, u drugom ga nema. Uzimamo polovinu u kojoj se nalazi lav i ponovo je podijelimo na pola. Tako ponavljamo dok se lav ne uhvati. Rezultat primjera prikazan je na sl. jedan. Rice. 1. Poravnajte tekst desno i lijevo U ovom primjeru, naslov je poravnat sa središtem prozora pretraživača, odabrani pasus je poravnat udesno, a osnovni tekst je poravnat lijevo.
Naslov 1. nivoa centriran
Naslov 1. nivoa, poravnat desno
Tab. 1. Načini poravnanja teksta
Lijevo poravnanje
Desno poravnanje
Centralno poravnanje
Justify
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Tab. 2. Poravnavanje teksta sa parametrom poravnanja
HTML kod
Opis
Dodaje novi pasus teksta, po defaultu poravnat lijevo. Mala vertikalna uvlaka se automatski dodaju prije i poslije pasusa.
Centralno poravnanje.
Lijevo poravnanje.
Poravnanje po širini.
Onemogućuje automatsko prelamanje linija, čak i ako je tekst širi od prozora pretraživača.
Tekst
Dozvoljava pregledniku da prekine liniju na navedenoj lokaciji, čak i ako se koristi oznaka
Centralno poravnanje.
Lijevo poravnanje.
Desno poravnanje.
Poravnanje po širini.
. Primjer 1 pokazuje kako postaviti poravnanje u takvom slučaju.
Kako uhvatiti lava?
Top Related Articles
