Što vam omogućava da automatski poravnate bilo koji objekt/sloj sa središtem slike ili njenim rubovima sa stopostotnom preciznošću. Također možete poravnati u odnosu na određeno područje na slici. Sve je to vrlo jednostavno i bit će razmotreno u ovom članku.
U pravilu, početnici ovu operaciju izvode na oko, što uopće nije potrebno. Odaberite alat Kretanje i obratite pažnju na to. Postoji niz postavki koje su odgovorne za ovaj zadatak ( pogledajte snimak ekrana):
Prva tri dugmeta su odgovorna za vertikalno poravnanje (s lijeva na desno): gornja ivica, sredina, donja ivica.
Sljedeća tri gumba su odgovorna za horizontalno poravnanje (s lijeva na desno): lijevo, središte, desno.
Dakle, da biste objekt postavili tačno u centar, morate odabrati vertikalno i horizontalno centriranje.
Najvažnije pravilo poravnanja: prije svega, morate reći Photoshopu područje u odnosu na koje program treba tražiti rubove ili sredinu. Dok to ne učinite, dugmad za poravnanje će biti neaktivna, što znači da se ne mogu kliknuti.
Ovo je tajna kako napraviti objekt u sredini cijele slike ili njenog zasebnog fragmenta.
Dakle, redoslijed radnji je sljedeći:
Recimo da trebate centrirati ovu sliku:
Korak 1
Photoshopu ukazujemo na područje u odnosu na koje bi program trebao poravnati sliku. Ovo se radi kreiranjem .
U paleti slojeva odaberite pozadinski sloj i pritisnite prečicu na tipkovnici Ctrl+A ( Označi sve). Kao rezultat, trebali biste vidjeti okvir za odabir iz "marširajući mravi" oko pozadinskog sloja. (U pravilu, pozadinski sloj je iste veličine kao i platno).
Bilješka
Pozadinski sloj možete odabrati na drugi način - držite pritisnut tipku Ctrl i kliknite lijevom tipkom miša na pozadinski sloj. Metoda radi kada je ovaj sloj otključan (ovo je označeno ikonom katanca).
Korak 2
Sada morate odabrati alat Kretanje. Kada imamo okvir za odabir, gumbi za poravnanje će postati aktivni, što znači da se mogu koristiti.
Odaberite sloj sa slikom koju želite da poravnate, a sada kliknite na dugmad u skladu s tim gdje želite postaviti ovu sliku. Na primjer, postavimo ga tačno u centar. Zatim moramo kliknuti na ova dugmad:
Još jedan primjer. Recimo da trebate postaviti sliku u centar, ali na lijevu ivicu. Zatim na traci sa opcijama odaberite sljedeća dugmad:
Recimo da postoji fragment na slici, unutar kojeg trebate savršeno ravnomjerno postaviti neku sliku. U mom primjeru dodao sam stakleni kvadrat. Neka unutra bude još jedna slika ( Usput, možete naučiti kako sami napraviti takav stakleni kvadrat).
Korak 1
Prije svega, po analogiji s prvom opcijom, morate odabrati ovaj fragment. Kako to učiniti?
— Ako se ovaj fragment nalazi na posebnom sloju (poput mog kvadrata, koji sam umetnuo zasebno), onda morate kliknuti Ctrl i kliknite na sličicu sloja ako nije zaključana).
— Ako se ovaj fragment nalazi na samoj slici, tada morate odabrati alate za odabir Pravokutna i ovalna područja i koristite ih da nacrtate glatku, odabranu oblast oko fragmenta. Kako koristiti ove alate. Kretanje i, držeći pritisnut taster Shift, kliknite na strelice smera na tastaturi. Slika će se pomicati u koracima od 10 piksela.
Ako ne držite ovu tipku, već jednostavno koristite strelice na tipkovnici, slika će se pomicati u koracima od 1 piksela.
Ako primijetite grešku u tekstu, odaberite je i pritisnite Ctrl + Enter. Hvala ti!
Karakteristike: Postavke: Upotreba: Snimci ekrana: Gdje preuzeti ELinks je pokušaj kreiranja modernog web pretraživača zasnovanog na tekstu. Projekat je započeo od koda pretraživača Links. Njegov cilj je u početku bio da pokuša implementirati nekoliko funkcija koje manje-više nedostaju/slabe u Links. Odakle dolazi "E" u "ELinks" - "Eksperimentalno" / "Eksperimentalno". Nakon uspjeha ovih napora, "E" je postalo shvaćeno kao "Prošireno" ili "Poboljšano". Kada je pretraživač Links dostigao određeni stepen zrelosti, superiorniji u nekim aspektima od tada najnaprednijeg web pretraživača Lynx, njegov dalji razvoj bio je na raskrsnici: prelazak na grafički prikaz i dalje od čistog teksta, ili guranje surfanja internetom koristeći tekstualni korisničko sučelje izvan granica postignuto je prvo Lynx, a zatim Linkovi - ali ostaje u tekstualnom modu. Prvi pravac je implementiran u verziji Links sposobnog za prikaz grafičkog sadržaja web stranica - Links2. Drugi je ELinks web pretraživač. Lynx je bio i ostao vrlo sofisticiran komad softvera tog tipa. Njegovi autori su osmislili i implementirali vrlo promišljen i temeljit koncept pregledavanja weba zasnovanog na tekstu, sa posebnim apstrakcijama i konvencijama koje su pomogle da se prevladaju mnoga ograničenja i nedostaci surfanja webom zasnovanog na tekstu i stvorili svijet toliko različit od brzo širećeg grafičkog dijela. interneta. Ali HTML i kompjuteri su se dalje razvijali, skript jezici su se počeli širiti, cijeli svijet predstavljanja, pronalaženja i konzumiranja informacija napredovao je i mijenjao se. Pojavile su se nove mogućnosti. Mnoge od ovih karakteristika su implementirane u Links, ali naknadne promene u vizuelnom predstavljanju informacija u web dokumentima – od više HTML-a do više CSS-a – otvorile su nove puteve; čak i dok ste u tekstualnom modu. I to pokušavaju implementirati u ELinks: podrška za prikaz boje u terminalskim emulatorima koji podržavaju ovu funkciju, malo pozicioniranja pomoću CSS-a, pa čak i neka vrsta podrške za JavaScript/ECMAScript. Tehnička strana umrežavanja (kao što je podrška za SSL) i podrška za različita kodiranja teksta već su bili prilično solidni u pretraživaču Links, ali u ELinks-u su neke karakteristike poboljšane, a druge razvijenije. ELinks je korak naprijed u konceptu web pretraživača konzole, što ELinks čini najnaprednijim primjerom njegove implementacije. Iako Lynx još uvijek prilično dobro drži svoju poziciju. Njegov koncept pregleda web stranica u tekstualnom modu, iako je pojednostavljen, poseban pristup predstavljanju i rukovanju informacijama, umjesto pokušaja da liči na okruženje grafičkih pretraživača, radi prilično dobro. Web dokumenti postaju sve sofisticiraniji i (sa svim neizbježnim ograničenjima gledanja web stranica u tekstualnom modu) slijede određeni put u rukovanju njima na način na koji rivali pokušavaju da budu kao mainstream, grafički, potpuno opremljeni desktop web pretraživači. Ovo je slično dilemi pretraživača za mobilne uređaje sa malim ekranima: pokušajte da imitirate računare sa velikim ekranima ili transformišite prikazane web dokumente tako da odgovaraju karakteristikama okruženja. Tekstualni pretraživači se uglavnom koriste na računarima sa većim ekranima, tako da postoji manje ograničenja veličine i više iskušenja: Lynx da ostane prigušen, ELinks da pomeri granice. Karakteristike Text web browser. Verzije za Linux, druge *nix sisteme, Windows, DOS, OS/2, BeOS i neke druge. HTML (uključujući tabele i okvire). Veoma ograničen CSS i JavaScript (Više detalja). Podrška za paletu boja od 16, 88 ili 256 boja u terminalskim emulatorima/konzolama koje podržavaju ovu funkciju. Podrška za kartice, preuzimanja u pozadini sa obavještenjem kada je preuzimanje završeno. Podrška za miš. Uređivanje tekstualnih polja obrazaca web stranica u vanjskom uređivaču teksta. URL prečice. Podrška za skripte u Perl, Lua, Guile, Ruby.
Imapsync. Prijenos pošte
Prenesite poštu sa jednog IMAP servera na drugi koristeći imapsync [ 1 ] / Linux, komandna linija: imapsync —host1 imap.this.com —user1 [email protected]--passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.another.com --user2 [email protected]—passfile2 /home/user/imap/passwordfile2 —ssl2 —skipsize —allowsizemismatch — Postoji stranica example.com i poštansko sanduče [email protected] na serveru određene hosting kompanije. IMAP server: imap.this.com. IMAP server podržava SSL. — Web lokacija example.com se prenosi na drugi hoster. Shodno tome, poštansko sanduče [email protected] sa svim njegovim sadržajem i održavanjem strukture foldera. IMAP server drugog hosting provajdera: imap.another.com. IMAP server podržava SSL. 1. Kreirajte poštansko sanduče [email protected] i lozinku za to na serveru hosting kompanije na kojoj se transfer odvija. 2. Kreirajte dvije tekstualne datoteke u /home/user/imap/ folderu: passwordfile1 sa lozinkom za poštansko sanduče na prvom IMAP serveru i passwordfile2 sa lozinkom za poštansko sanduče na drugom IMAP serveru. 3. chmod 600 /home/user/imap/passwordfile1 4. chmod 600 /home/user/imap/passwordfile2 5. Instalirajte imapsync 6. Pokrenite imapsync sa odgovarajućim parametrima i podacima Imapsync prenosi poštu dok održava strukturu foldera sa imap.this .com na imap.another.com. SSL se koristi za šifriranje podataka u prijenosu, a lozinke se pohranjuju u datoteke zaštićene postavljanjem dozvola na chmod 600. Prijenos pošte između dvije usluge e-pošte može zahtijevati korištenje dodatnih [ 2 ] opcija imapsync. Na primjer, kada prenosite sadržaj jednog Gmail.com poštanskog sandučeta u drugi, morate navesti “—port1” i “—port2”: imapsync —host1 imap.gmail.com —port1 993 —user1 [email protected]—passfile1 /home/user/imap/passwordfile1 —ssl1 —host2 imap.gmail.com —port2 993 —user2 [email protected]—passfile2 /home/user/imap/passwordfile2 —ssl2 —skipsize —allowsizemismatch [ 1 ] Jednostavan i uobičajen slučaj: sadržaj jednog email sandučeta se prenosi u drugi, prazan, koji se nalazi na drugom serveru. Ali mogu postojati složenije situacije: migracija e-pošte iz Gmaila u Google Apps i prelazak na Google Apps pomoću imapsync-a. [ 2 ] Ostale opcije: Migrirajte poštu sa jednog servera na drugi sa imapsync i imapsync(1) - Linux man stranica.
Pozadinska HTML slika Lekcija 10. CSS. Poravnavanje slike prema srediniHTML slika, umetanje slike u kod stranice
HTML oznaka odgovorna za prikaz slike
- HTML slika može biti bilo koja slika u PNG, JPEG i GIF formatu.
- HTML kod slike je određen oznakom.
- HTML slika može biti pozadina web stranice.
- HTML slika se može definirati kao hiperveza.
U fasciklu ili bilo koji drugi gde imate datoteku, postavite sliku sa ekstenzijom, recimo, nazovite je kako god želite, na primer, .
Umetanje slike u HTML kod stranice:
Oznaka - neupareno. Obratite pažnju na način na koji je zatvorena.
Atributi i vrijednosti
- - obavezno, označava izvor slike.
- - definira alternativni tekst, komentar koji čita robot za pretraživanje prilikom analize sadržaja web stranice. Također je potrebno odrediti.
- - definira širinu slike u pikselima.
- - definira visinu slike u pikselima.
Navedite stvarne dimenzije - na taj način ćete zadržati originalni kvalitet slike.
Za web razvoj su primenljive slike u tri formata: PNG (.png), JPEG (.jpg) i GIF (.gif). Adobe Photoshop je specijalizirani alat za kreiranje grafike za web stranice. Može se koristiti za pretvaranje jednog formata slike u drugi.
HTML slika | Horizontalne i vertikalne margineili horizontalnu i vertikalnu udaljenost između slike i teksta
Pogledajte rezultat u novom prozoru: Pozadinska slika u HTML-u
Atributi su pokriveni u CSS tutorijalima.
Umetanje slike i njen redosled → → pogledajte ovde.
HTML slika - link
Primjer koda:
Pogledajte rezultat u novom prozoru: HTML slika centrirana na stranici
Na šta ovdje treba obratiti pažnju? → Prvo, činjenica da su naznačene dimenzije - to ubrzava učitavanje slike. Drugo, specificiraju se atributi, što je također vrlo poželjno učiniti čak i ako ne postoji alternativni tekst. U prvom slučaju, centriranje je određeno HTML parametrom, au drugom linearnim uključivanjem kaskadnih stilskih tablica.
Datum objave: oktobar 2009 | Ažuriranje: avgust 2014Lekcija 9. HTML pozadina 
HTML slika Lekcija 11. HTML slika i tekst
Već dugo postoje različite metode za centriranje slika pomoću CSS-a. Na implementaciju ovih metoda veliki je uticaj imao Internet Explorer 5. Ali danas je malo ljudi zainteresovano za ovu verziju pretraživača, tako da možete da se rešite nepotrebnog koda.
Ranije su IE5 i IE5.5 diktirali svoja pravila - da biste centrirali element stranice, morate koristiti CSS svojstvo. A da biste centrirali, na primjer, sliku, morate je postaviti unutar dodatnog bloka:
Ovom dodatnom bloku se dodeljuju odgovarajuća CSS svojstva:
Sve je to bilo neophodno jer peta verzija Internet Explorera ne podržava svojstvo paddinga koje je već postojalo i koje podržavaju drugi pretraživači, koji automatski dodjeljuje istu udaljenost lijevo i desno od poravnatog elementa. Gornja metoda je i dalje u upotrebi.
Ali IE5 i IE5.5 su već stvar prošlosti, tako da se HTML kod može učiniti jednostavnijim i elegantnijim:
Odsustvo nepotrebnih dodatnih blokova postiže se zahvaljujući odgovarajućem CSS-u:
Svojstvo daje slici karakteristiku blok elementa, eliminirajući potrebu za korištenjem ili oko slike. Deklaracija tada dodeljuje nultu vrednost gornjem i donjem odstupanju, i automatski jednaku vrednost levom i desnom dopunu, što poravnava sliku u sredini.
Trebate li dodijeliti različite margine na vrh i na dno? Nema problema. Ne zaboravite na skraćenice:
Nažalost, za razliku od slučaja poravnavanja slika prema lijevoj i desnoj ivici (i), ne postoji način da se tekst omota oko slike u sredini koristeći standardne metode. Naravno, ako je veoma važno, onda je izvodljivo.
Također, ako je slika također veza, tada se područje veze proteže na cijelu širinu bloka, bez obzira na širinu slike. U nekim slučajevima ovo je nedostatak.
Gore opisani način poravnanja najprikladniji je za web stranice koje koriste slike unutar teksta (vijesti, članci). Za foto galerije, naravno, postoje vlastiti, sofisticiraniji načini poravnavanja slika.
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 9.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Poravnajte fotografiju i natpis vodoravno na web stranici.
RješenjeIlustracije koje prate tekst često su centrirane na web stranici, a tekst se pojavljuje prije i poslije slike. Ovakav raspored elemenata vam omogućava da razbijete veliki tekst u smislene blokove i skrenete pažnju na slike.
Prvo, pogledajmo poravnavanje slike prema sredini. Da biste to učinili, dodajte svojstvo stila poravnanja teksta sa centrom vrijednosti u P selektor. U ovom slučaju oznaka mora se nalaziti unutar pasusa (tag
). Da spriječimo da svi paragrafi na stranici postanu centrirani, uvedemo našu klasu fig i izvršimo sve radnje s njom. Primjer 1 pokazuje kako se to radi.
Primjer 1: Korištenje text-align
HTML5CSS 2.1IECrOpSaFx
Rezultat ovog primjera prikazan je na sl. 1.
Rice. 1. Slika centrirana na web stranici
Takođe možete dodati natpis na fotografiju. Tekst treba postaviti odmah iza slike i na sličan način centrirati. Ovdje je sve jednostavno, hajdemo ponovo koristiti našu klasu, ali je primijenimo na oznaku. Da bi se tekst potpisa razlikovao od običnih pasusa, učinite ga kurzivom i označite ga drugom bojom (primjer 2).
Primjer 2. Naslov slike
HTML5CSS 2.1IECrOpSaFx
Rezultat ovog primjera prikazan je na sl. 2.
2. Potpis ispod slike
Za blok sa fotografijom koristi se oznaka, a za njegov natpis se koristi oznaka. Starije verzije IE-a ne razumiju ove oznake, pa je mala skripta dodana posebno za njih.
CSS centriran na slikuWindows: Internet Explorer 6.0+, Firefox 1.0+, Google Chrome, Opera 5.0+ [1], Safari 3.1+, SeaMonkey 1.0+ [2].
Linux: Firefox 1.0+, Google Chrome / Chromium, Opera 5.0+, SeaMonkey 1.0+ [3], NetSurf 2.6+, Hv3.
Horizontalno centriranje slike pomoću CSS-a. primjer:
HTML/XHTML. kod:
.example (pozicija: relativna; lijevo: 0px; vrh: 0px; visina: auto; širina: 100%; plutajući: lijevo; padding: 10px; granica: 1px #ccc čvrsta; pozadina: #fafafa;)
.example img (prikaz: blok; margina: 0 auto;)
CSS svojstva kontejnera (u ovom slučaju primjer) mogu biti vrlo različita; centriranje slike se kreira pomoću stilova koji su direktno povezani sa slikom: .example img (prikaz: blok; margina: 0 auto;).
Aliosque subditos et theme
CSS centriran na sliku
Horizontalno centriranje slike pomoću CSS-a. Primjer: HTML/XHTML.
Poravnavanje slike sa središnjim HTML-om i CSS-omkod: CSS. Kod: .example (pozicija: relativna; lijevo: 0px; vrh: 0px; visina: auto; širina: 100%; float: lijevo; padding: 10px; granica: 1px #ccc čvrsta; pozadina: #fafafa;) .example img (prikaz: blok; margina: 0 auto;) CSS svojstva kontejnera (u ovom slučaju, primjer) mogu biti vrlo različita; centralno poravnanje slike se kreira pomoću stilova koji su direktno povezani sa slikom: .example img (prikaz: blok ; margina: 0 auto;).
[ 1 ] I takođe u Operi 4.0+, ako se ne koriste skraćena svojstva CSS-a. To jest, ako je CSS kod u obliku .example img (prikaz: blok; margina-lijevo: auto; margin-desno: auto;). [ 2 ] I također u Netscapeu 6.01+, Mozilla 0.6+. [ 3 ] I također u Netscapeu 6.01+, Mozilla 0.6+.
ELinks. Upotreba
Idite na stranice: ELinks - Tekst ili web pretraživač na konzoli. Opis: karakteristike, snimke ekrana, gdje preuzeti. ELinks. Podešavanje - Kako postaviti ELinks. Pokretanje ELinks-a vam omogućava da uradite skoro sve što možete kroz upotrebu njegovih menija. Dakle, ono što slijedi je samo o tome kako pokrenuti ELinks i, na primjer, kako napraviti nekoliko drugih stvari. 1) Kako pokrenuti ELinks - ELinks se može pokrenuti u GUI okruženju (X Windows, MS Windows, itd.) ili u interfejsu komandne linije. U prvom slučaju se prvo mora pokrenuti emulator/konzola terminala: xterm, rxvt, Win32 konzola i drugi: ELinks (Linux) - Za pokretanje ELinks unesite naredbu: elinks - Za pokretanje ELinks, koja otvara web dokument iz Internet: elinks Web - adresa web dokumenta - Za pokretanje ELinks koji pristupa tvrdom disku za pregled lokalnih foldera: elinks file:/// ili: elinks / - Za pokretanje ELinks koji otvara lokalni folder: elinks file:///home/ user1/ ili: elinks /home/user1/ — Za pokretanje ELinks, koji otvara lokalnu datoteku: elinks file:///home/user1/document1.htm ili: elinks /home/user1/document1.htm ELinks (Windows) — Da biste pokrenuli ELinks, unesite naredbu: elinks - Za pokretanje ELinks koji otvara web dokument sa Interneta: elinks Web adresa web dokumenta - Za pokretanje ELinks pristupa tvrdom disku za pregled lokalnih foldera: elinks file:/// - Za pokrenite ELinks, otvorite lokalnu fasciklu: elinks file://c/home/user1/ - Da pokrenete ELinks, otvorite lokalnu datoteku: elinks file://c/home/user1/document1.htm 2) Za pristup ELinks meniju : Pritisnite Esc na tastaturi 3) Da otvorite web dokument u već pokrenutom ELinks: Pritisnite g na tastaturi ili Esc -> File -> Idi na URL -> [ Unesite web adresu ] -> Enter 4) Vratite se: Strelica tipka lijevo na tastaturi ili Esc -> Datoteka -> Vrati se 5) Otvorite vezu u novoj kartici u pozadini: Shift - t ili Esc -> Link -> Otvori u novoj kartici u pozadini 6) Idite na sljedeću karticu: Shift - > ili Esc - > Prikaz -> Sljedeća kartica 7) Zatvorite karticu: Pritisnite c na tipkovnici ili Esc -> Pogled -> Zatvori karticu 8) Proslijedite URI vanjskoj aplikaciji kada ELinks radi u emulatoru terminala.
Datum: 2010-09-07
U HTML dokumentu, slike su poravnate vodoravno, okomito i centrirano.
Horizontalno poravnanje slikeZa horizontalnu kontrolu slike koristite atribut align="".
Poravnavanje slika prema sredini u HTML-uNavedite lijevo u njegovoj vrijednosti ako želite da poravnate sliku s lijevom ivicom stranice ili desno ako želite da je poravnate s desnom ivicom. Podrazumevano, slika je uvijek poravnata s lijevom ivicom stranice:
Koristeći isti align="" atribut, možete kontrolirati vertikalni položaj slike. Da biste to učinili, morate odrediti vrh u njegovoj vrijednosti da se poravna uz gornju ivicu, sredinu - u sredini i donju - duž donje granice:
Napomena: unos images/photo.jpg znači da slika nije u jednom direktorijumu, već u folderu slika.
Poravnavanje slike sa sredinom straniceOsim toga, slika se može centrirati. Da biste to učinili, umotajte oznaku slike u uparenu oznaku:
1.1 Uvod u html
1.2 Struktura HTML dokumenta
2.1 Stav u html-u
2.2 Naslovi u html-u
2.3 Citati i komentari u html-u
2.4 Razmak i premotavanje oznaka u HTML-u
3.1 Numerisana lista html
3.2 Lista sa oznakama
3.3 Ugniježđene liste
4.1 Odabir HTML teksta
4.2 Tip slova i veličina fonta
4.3 Promjena boje teksta u html-u
4.4 Ivice i pozadina stranice
5.1 Umetanje slike na stranicu
Volim rješavati zanimljive layout probleme, a s obzirom na moje iskustvo u ovoj oblasti, nešto više od 5 godina, takvi problemi se ne sreću često.Nedavno sam se susreo sa nekoliko takvih problema odjednom: 1. Centriranje slike u sredini stranice i komprimiranje prilikom promjene veličine pretraživača. U principu, i prvi i drugi zadatak se mogu riješiti pomoću malog javascripta, ali ja sam htio to učiniti mudro koristeći html+css.
Zadatak je olakšan i činjenicom da je stranica na kojoj će se ovo koristiti razvijena kao moderna, a podrška je ograničena na ie9+, FF, Chrome, Safari, Opera. 2. Apsolutno centriranje slike, bez obzira na veličinu prozora pretraživača. Ali morao sam da se pozabavim ovim. Prvobitna ideja je bila ova:
.wrapper( overflow: hidden; pozicija: fiksna; vrh: 0; desno: 0; dolje: 0; lijevo: 0; ) .item( pozicija: apsolutna; vrh: 50%; lijevo: 50%; prikaz: inline-block ; ) .item img( margina: -50% 0 0 -50%; )
Ideja se zasnivala na sledećoj logici:
- Vanjski blok, .wrapper, rastegnut na punu slobodnu širinu i visinu.
- Unutrašnji blok, .item, uzima širinu i visinu slike koja se nalazi unutra, pošto je inline-blok; i nalazi se sa gornjim levim uglom u sredini roditeljskog bloka.
- Postavljanje slike u minus marginu, koja bi je trebala poravnati tačno sa središtem .wrapper-a
Odlučio sam to tako što sam se prisjetio transformacije, tačnije njene translate funkcije, koja kao da pomjera prikaz objekta, ali napušta mjesto gdje je bio. I pokazalo se da zamjenom margine slike sa transform: translate(-50%, -50%); problem je odmah riješen. I evo šta je ispalo na kraju:
*( padding: 0; margina: 0; vertikalno poravnanje: vrh; ) html, body( širina: 100%; visina: 100%; ) .wrapper( overflow: hidden; položaj: fiksna; vrh: 0; desno: 0 ; dolje: 0; lijevo: 0; ) .item( pozicija: apsolutna; vrh: 50%; lijevo: 50%; prikaz: inline-block; ) .item img( -webkit-transform: translate(-50%, - 50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); )
PS: Nisam siguran da li su to jedine opcije ili ne. Mislim da ove opcije nisu pogodne za svakoga.
Ali sigurno znam da ako su bili prikladni u mom slučaju, onda će biti ljudi kojima će vjerovatno biti od velike pomoći u njihovim zadacima. Osim toga, ako malo dodate kodu, možete dodati štake za stariji IE, nisam ga dodao jer nisam htio pokvariti čisti kod zbog veoma zastarjelih pretraživača.
PS2: Kritike i savjeti su dobrodošli. Hvala vam što ste pročitali do kraja.
Oznake: html, css, css3, slika, slika, slika, poravnanje, vertikalno poravnanje
ZadatakPoravnajte fotografiju i natpis vodoravno na web stranici.
RješenjeIlustracije koje prate tekst često su centrirane na web stranici, a tekst se pojavljuje prije i poslije slike. Ovakav raspored elemenata vam omogućava da razbijete veliki tekst u smislene blokove i skrenete pažnju na slike.
Prvo, pogledajmo poravnavanje slike prema sredini. Da biste to učinili, dodajte svojstvo stila poravnanja teksta sa centrom vrijednosti u P selektor. U ovom slučaju oznaka mora se nalaziti unutar pasusa (tag
). Da spriječimo da svi paragrafi na stranici postanu centrirani, uvedemo našu klasu fig i izvršimo sve radnje s njom. Primjer 1 pokazuje kako se to radi.
Primjer 1: Korištenje text-align
HTML5 CSS 2.1 IE Cr Op Sa Fx
Poravnaj fotografiju sa središtem .fig (poravnanje teksta: centar; /* Poravnaj prema centru */)
Tekst prije slike
Tekst za slikom
Rezultat ovog primjera prikazan je na sl. 1.
Rice. 1. Slika centrirana na web stranici
Takođe možete dodati natpis na fotografiju. Tekst treba postaviti odmah iza slike i na sličan način centrirati. Ovdje je sve jednostavno, hajdemo ponovo koristiti našu klasu, ali je primijenimo na oznaku. Da bi se tekst potpisa razlikovao od običnih pasusa, učinite ga kurzivom i označite ga drugom bojom (primjer 2).
Primjer 2. Naslov slike
HTML5 CSS 2.1 IE Cr Op Sa Fx
Fotografija sa natpisom .fig (prikaz: blok; /* Blok element (za starije pretraživače) */ text-align: center; /* poravnanje po sredini */ font-style: italic; /* Italic */ margin-top: 0; /* Gornja margina */ margin-bottom: 5px; /* Donja margina */ boja: #666; /* Boja natpisa */ ) document.createElement("figure"); document.createElement("figcaption"); 
Pećinski čovek pravi vatru. Ali koja je to lunarna površina u pozadini? Ne, nije tako jednostavno.
Rezultat ovog primjera prikazan je na sl. 2.
Rice. 2. Potpis ispod slike
Za blok sa fotografijom koristi se oznaka, a za njegov natpis se koristi oznaka. Starije verzije IE-a ne razumiju ove oznake, pa je mala skripta dodana posebno za njih.
