Centar za slike, tekst i elemente blokiranja prilikom izrade web lokacija
Ako učite kako da kreirate web stranice , jedan od najčešćih trikova koje ćete morati da savladate je kako srediti stavke u prozoru pregledača. To bi moglo značiti centriranje slike na stranici, ili bi moglo biti centar koji opravdava tekst kao naslove kao dio dizajna.
Pravi način ostvarivanja ovog vizuelnog izgleda centriranih slika ili teksta ili čak celokupne web stranice je korištenje Cascading Style Sheets-a (CSS) . Većina osobina za centriranje bilo je u CSS-u od verzije 1.0, a oni odlično rade sa CSS3 i modernim veb pregledačima .
Kao i mnogi aspekti web dizajna, postoji više načina za korištenje CSS-a za centriranje elemenata na web stranici. Hajde da pogledamo nekoliko različitih načina korišćenja CSS-a da bi se postigao ovaj vizuelni izgled.
O pregledu korišćenja CSS-a na elemente centra u HTML-u
Centriranje sa CSS-om može biti izazov za početak web dizajnera, jer postoji toliko različitih načina za ostvarenje ovog vizuelnog stila. Iako različite metode mogu biti dobri ili začinjeni web programeri koji znaju da sve tehnike ne rade na svakom elementu, ovo može biti strašno izazovno za nove web profesionalce jer širok spektar metoda znači da treba znati kada koristiti koji pristup. Najbolje je da steknete razumevanje nekoliko pristupa. Dok počnete da ih koristite, naučićete koji način najbolje funkcioniše u kojim instancama.
Na visokom nivou možete koristiti CSS za:
- Tekst centra
- Središte element blok-nivo (kao podela)
- Centrirajte sliku
- Vertikalno centrirajte blok ili sliku
Mnogi (mnogi) godini, web dizajneri su mogli da koriste element
Centriranje teksta sa CSS
Najjednostavnije što se centrira na web stranici je tekst. Postoji samo jedna osobina stila koju trebate znati da uradite ovo: poravnavanje teksta. Uzmi stil CSS ispod, na primer:
p.center {tekstualno poravnanje: centar; }
Sa ovom linijom CSS-a, svaki paragraf koji je napisan sa centralnom klasom biće horizontalno postavljen unutar njegovog roditeljskog elementa. Na primjer, ako je pasus bio unutar podjele, što znači da je to dijete te divizije, bilo bi horizontalno centrirano unutar
Evo primjera ove klase koja se primjenjuje u HTML dokumentu:
Ovaj tekst je usredsređen.
Prilikom centriranja teksta pomoću alata za poravnavanje teksta, ne zaboravite da će biti usredsređen na element koji sadrži i ne mora biti usredsređen unutar same stranice. Takođe, zapamtite da je centar-opravdani tekst teško čitati za velike blokove sadržaja, pa koristite ovaj stil pošto. Naslovi i mali blokovi teksta, kao tekst tekstova za članak ili drugi sadržaj, često se lako čitaju i fini kada se centriraju, ali veći blokovi teksta, poput samog celog članka, biće izazovni za konzumiranje ako je sadržaj bio u potpunosti centar opravdano. Zapamtite, čitljivost je uvijek ključna kada je u pitanju tekstualni sajt!
Centriranje blokova sadržaja sa CSS-om
Blokovi su svi elementi na vašoj stranici koji imaju definisanu širinu i uspostavljeni su kao element blok-nivoa. Često se ti blokovi kreiraju pomoću HTML
div.center {
marža: 0 auto;
širina: 80em;
}
Ovaj CSS shorthand za svojstvo marže postavio je gornji i donji margin vrijednosti od 0, dok bi lijevo i desno koristilo "auto". Ovo u suštini zahteva svaki prostor koji je dostupan i ravnomerno ga deli između dve strane prozora za prikaz, efikasno centrirajući element na stranici.
Ovde se primjenjuje u HTML-u:
ali je tekst unutar nje ostao poravnat.
Sve dok vaš blok ima definisanu širinu, on će se usredsrediti unutar elementa koji sadrži. Tekst sadržan u tom bloku neće biti usredsređen na njega, već će biti opravdan. Ovo je zbog toga što je tekst ostavljen u opravdanosti u web pregledačima. Ako ste želeli da tekst bude usredsređen, možete koristiti osobinu za poravnavanje teksta koja smo ranije pokrivali u kombinaciji sa ovom metodom kako bi centrirali podjelu.
Centriranje slika sa CSS
Dok će većina pretraživača prikazati slike usredsređene koristeći istu tekstualnu algoritmu koju smo već pogledali za paragraf, nije dobra ideja da se oslonite na tu tehniku, jer to nije preporučljivo od strane W3C-a . Pošto se ne preporučuje, uvijek postoji šansa da buduće verzije pretraživača mogu izabrati da ignorišu ovaj metod.
Umesto da koristite tekst alignment za centriranje slike, trebalo bi eksplicitno reći pregledaču da je slika element blok-nivoa. Na ovaj način, možete ga srediti kao i svaki drugi blok. Evo CSS-a:
img.center {
prikaz: blok;
margin-left: auto;
margin-right: auto;
}
I evo HTML-a za sliku koju želimo da centriramo:
Takođe možete centrirati objekte koristeći CSS (u nastavku), ali ovaj pristup se NE preporučuje jer doda vizuelne stilove u HTML oznaku. Zapamtite, želimo da odvojimo stil i strukturu, tako da dodamo CSS stilove u vaš HTML kod s prekidom tog razdvajanja i, kao takvo, treba ga izbjeći kad god je to moguće.
Centriranje elemenata vertikalno sa CSS
Centriranje objekata vertikalno oduvek je bilo izazovno u web dizajnu, ali sa oslobađanjem CSS modula Flexible Box modula u CSS3, sada postoji način da to uradite.
Vertikalno poravnanje deluje slično horizontalnom poravnanju pokrivenom gore. CSS svojstvo je vertikalno poravnato srednjom vrednošću.
.vcenter {
vertikalno poravnavanje: sredina;
}
Nedostatak ovog pristupa je u tome što svi pretraživači ne podržavaju CSS FlexBox, iako se sve više i više pojavljuju na ovaj novi način CSS rasporeda! Zapravo, svi savremeni pretraživači danas podržavaju ovaj CSS stil. To znači da će vaša jedina zabrinutost sa Flexbox-om biti mnogo starija verzija pretraživača.
Ako imate problema sa starijim pregledačima, W3C preporučuje da vertikalno centrirate tekst u kontejner koristeći sledeći metod:
- Stavite elemente da budu centrirani unutar elementa koji sadrži, kao što je div.
- Postavite minimalnu visinu na elementu koji sadrži.
- Izjavite da sadrži element kao ćelija tablice.
- Postavite vertikalno poravnanje na "sredinu".
Na primjer, ovdje je CSS:
.vcenter {
min-visina: 12em;
displej: table-cell;
vertikalno poravnavanje: sredina;
}
I evo HTML-a:
Ovaj tekst je vertikalno usredsređen u okvir.
Vertikalno centriranje i starije verzije Internet Explorer-a
Postoji nekoliko načina da se Internet Explorer (IE) primorava na centar i onda koristi uslovne komentare tako da samo IE vidi stilove, ali su malo glomazni i ružni. Dobra vijest je u tome što je Microsoftova nedavna odluka da ispusti podršku za starije verzije IE-a, ti nedostajući pretraživači trebali bi uskoro izaći, što će web dizajnerima olakšati korištenje savremenih pristupa kao što su CSS FlexBox koji će napraviti sve CSS izglede, ne samo centriranje, lakše za sve web dizajnere.