Centar slike, tekst i blok elemente pri izgradnji web stranica
Ako učite kako izgraditi web stranice , jedna od najčešćih trikova koje ćete morati svladati je kako centrirati stavke u prozoru preglednika. To bi moglo značiti središte slike na stranici ili bi moglo biti središnje opravdanje teksta poput naslova kao dijela dizajna.
Pravi način ostvarivanja ovog vizualnog izgleda centriranih slika ili teksta ili čak cijele vaše web stranice je pomoću Cascading Style Sheets (CSS) . Većina svojstava za centriranje u CSS-u od verzije 1.0, a izvrsno funkcioniraju s CSS3 i suvremenim web preglednicima .
Kao i mnogi aspekti web dizajna, postoji više načina za korištenje CSS-a elementima centra na web stranici. Pogledajmo različite načine korištenja CSS-a kako bismo postigli ovaj vizualni izgled.
Na pregledu korištenja CSS-a elementima centra u HTML-u
Centriranje s CSS-om može biti izazov za početak web dizajnera jer postoji toliko različitih načina ostvarivanja ovog vizualnog stila. Iako razne metode mogu biti lijepe ili iskusne web-programere koji znaju da nisu sve tehnike na svakom elementu, to može biti nevjerojatno izazov za novije web-stručnjake, jer širok raspon metoda znači da trebaju znati kada koristiti taj pristup. Najbolja stvar za učiniti je stjecanje razumijevanja nekoliko pristupa. Kada ih počnete koristiti, naučit ćete koja će metoda najbolje funkcionirati u kojim slučajevima.
Na visokoj razini možete koristiti CSS za:
- Tekst centra
- Centriranje elementa na razini bloka (poput podjele)
- Centriraj sliku
- Okomito centrirajte blok ili sliku
Prije mnogo (mnogo) godina, web dizajneri mogli bi upotrijebiti element
Tekst centriranja s CSS-om
Najlakše je usredotočiti se na web stranicu teksta. Postoji samo jedna svojstva stila koju trebate znati za to: text-align. U nastavku slijedite CSS stil, na primjer:
p.center {text-align: centar; }
S ovom retku CSS svaki stavak napisan s središnjom klasom bio bi vodoravno usmjeren unutar svog roditeljskog elementa. Na primjer, ako je stavak bio unutar podjele, što znači da je dijete te podjele, ona bi bila usmjerena vodoravno unutar
Evo primjera ove klase koji se primjenjuje u HTML dokumentu:
Ovaj je tekst usredotočen.
Kada centrirate tekst sa svojstvima prilagodbe teksta, ne zaboravite da će biti centrirana unutar njezinog elementa koji sadrži, a ne nužno usmjeren na cijelu stranicu. Također zapamtite da se centar za opravdani tekst može teško čitati za velike blokove sadržaja, stoga koristite ovaj stil blago. Naslovi i manji blokovi teksta, poput tekstualnog sadržaja za neki članak ili neki drugi sadržaj, često su jednostavni za čitanje i fino kada su centrirani, ali veći blokovi teksta, poput samog cjelovitog članka, bili bi izazovni da konzumiraju li sadržaj u potpunosti opravdano. Zapamtite, čitljivost je uvijek ključna kad se radi o tekstu web mjesta!
Centriranje blokova sadržaja s CSS-om
Blokovi su elementi na vašoj stranici koji imaju definiranu širinu i uspostavljeni su kao element na razini bloka. Često se ti blokovi izrađuju pomoću HTML elementa
div.center {
margina: 0 auto;
širina: 80em;
}
Ovaj CSS stenografija za svojstvo margine postavit će gornju i donju marginu na vrijednost 0, dok će lijevi i desni koristiti "auto". To u suštini zahtjeva bilo koji prostor koji je dostupan i ravnomjerno ga podijeli između dviju strana prozora prozora, učinkovito centriranjem elementa na stranici.
Ovdje se primjenjuje u HTML-u:
ali tekst unutar nje je lijevo poravnat.
Sve dok vaš blok ima definiranu širinu, on će se usredotočiti unutar elementa koji sadrži. Tekst sadržan u tom bloku neće biti usredotočen unutar njega, ali će ostati opravdan. To je zato što je tekst zadan u web preglednicima. Ako biste i htjeli centriranu tekst, mogli biste upotrebljavati tekstualno usklađivanje nekretnina koje smo prethodno obuhvatili zajedno s ovom metodom kako bismo usmjerili podjelu.
Središnje slike s CSS-om
Iako će većina preglednika prikazivati slike centrirane koristeći isti tekstualni entitet, već smo pogledali stavak, ne preporučuje se oslanjati se na tu tehniku jer W3C ne preporučuje. Budući da se ne preporučuje, uvijek postoji mogućnost da buduće verzije preglednika mogu odabrati da ignoriraju ovu metodu.
Umjesto korištenja tekstualnog usklađivanja za središnju sliku, trebali biste eksplicitno reći pregledniku da je slika element na razini bloka. Na taj način možete ga centrirati kao i bilo koji drugi blok. Ovdje je CSS kako bi se to dogodilo:
img.center {
prikaz: blok;
margina-lijevo: auto;
margina-desno: auto;
}
I ovdje je HTML koji za sliku koju želimo biti usredotočena:
Također možete centrirati objekte pomoću in-line CSS-a (vidi dolje), ali ovaj pristup NIJE preporučljiv jer dodaje vizualne stilove u HTML oznaku. Imajte na umu da želimo odvojiti stil i strukturu, tako da dodamo CSS stilove u HTML kôd s prekidanjem te razdvojenosti i kao takav treba izbjegavati kad god je to moguće.
Elementi centriranja okomito s CSS-om
Uređaji za centriranje okomito su oduvijek bili izazovni u web dizajnu, ali s izdavanjem CSS Flexible Box Layout Modula u CSS3, sada postoji način da to napravite.
Vertikalno poravnanje funkcionira slično horizontalnom poravnanju pokrivenom gore. CSS svojstvo vertikalno je poravnat s srednjom vrijednosti.
.vcenter {
vertikalni poravnaj: srednji;
}
Nedostatak ovog pristupa je da svi preglednici ne podržavaju CSS FlexBox, iako se sve više i više približava ovom novom CSS izgledu! U stvari, svi moderni preglednici danas podržavaju ovaj CSS stil. To znači da je vaš jedini problem s Flexboxom bio mnogo starija inačica preglednika.
Ako imate problema s starijim preglednicima, W3C preporučuje da centrirate tekst vertikalno u spremniku na sljedeći način:
- Stavite elemente koji će biti usredotočeni unutar elementa koji sadrži, kao što je div.
- Postavite minimalnu visinu na element koji sadrži.
- Navedite da sadrži element kao stolnu ćeliju.
- Postavite okomito poravnanje na "sredinu".
Na primjer, ovdje je CSS:
.vcenter {
min-visina: 12em;
prikaz: stolna stanica;
vertikalni poravnaj: srednji;
}
A ovdje je HTML:
Ovaj je tekst vertikalno usmjeren u okvir.
Vertikalno centriranje i starije inačice programa Internet Explorer
Postoje neki načini prisiljavanja Internet Explorera (IE) na središte, a zatim pomoću uvjetnih komentara, tako da samo IE vidi stilove, ali su malo glomazni i ružni. Dobra je vijest da je Microsoftova nedavna odluka o odbacivanju podrške za starije verzije IE-a, oni koji ne podržavaju preglednike trebali bi uskoro izaći, olakšavajući web dizajneri lakšim korištenjem modernih pristupa rasporedu poput CSS FlexBox koji će učiniti sve CSS izgled, ne samo centriranje, lakše za sve web dizajnere.