Što vam omogućuje da automatski sa stopostotnom točnošću poravnajte bilo koji objekt/sloj sa središtem slike ili njezinim rubovima... Također možete poravnati s određenim područjem na slici. Sve je to vrlo jednostavno i o tome će se raspravljati u ovom članku.
Početnici u pravilu ovu operaciju rade 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 snimku zaslona):
Prva tri gumba odgovorna su za okomito poravnanje (s lijeva na desno): gore, središte, dno.
Sljedeća tri gumba odgovorna su za horizontalno poravnanje (s lijeva na desno): lijevo, središte, desno.
Dakle, da biste objekt postavili točno u središte, morate odabrati centriranje okomito i vodoravno.
Najvažnije pravilo poravnanja je: prije svega, morate reći Photoshopu područje u odnosu na koje bi program trebao tražiti rubove ili sredinu. Dok to ne učinite, gumbi za poravnanje bit će neaktivni, što znači da se ne mogu pritisnuti.
Ovo je tajna kako napraviti objekt u sredini cijele slike ili njenog zasebnog fragmenta.
Dakle, slijed radnji je sljedeći:
Recimo da ovu sliku želite postaviti u središte:
opcija 1- u odnosu na cijelo platno.
Korak 1
Photoshopu označavamo područje u odnosu na koje bi program trebao poravnati sliku. To se radi stvaranjem.
Odaberite pozadinski sloj na paleti slojeva i pritisnite kombinaciju tipki Ctrl + A ( Odaberi sve). Kao rezultat, trebali biste vidjeti okvir za odabir iz "Marširajući mravi" oko pozadinskog sloja. (U pravilu je pozadinski sloj iste veličine kao i platno).
Bilješka
Pozadinski sloj možete odabrati na drugi način - držite tipku Ctrl i kliknite lijevom tipkom miša na pozadinski sloj. Metoda radi kada je ovaj sloj otključan (to je označeno ikonom zaključavanja,).
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 poravnati, a sada kliknite na gumbe u skladu s mjestom na koje želite postaviti ovu sliku. Na primjer, postavimo ga točno u središte. Zatim moramo pritisnuti ove gumbe:
Još jedan primjer. Recimo da želite postaviti sliku u središte, ali s lijevog ruba. Zatim na ploči s parametrima odaberite sljedeće gumbe:
Opcija 2- u jednom fragmentu slike
Recimo da postoji fragment na slici, unutar kojeg trebate idealno postaviti neku sliku savršeno ravnomjerno. U mom primjeru dodao sam stakleni kvadrat. Neka druga slika bude unutra ( usput, možete sami naučiti kako napraviti takav stakleni kvadrat).
Korak 1
Prvi je korak, po analogiji s prvom opcijom, istaknuti ovaj fragment. Kako to učiniti?
- Ako je ovaj fragment na zasebnom 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 uz njihovu pomoć nacrtati ravnomjeran odabir oko fragmenta. Kako koristiti ove alate. Kretanjei držeći tipkuShift, kliknite na strelice smjera na tipkovnici. Slika će se pomicati u koracima od 10 piksela.
Ako ne držite pritisnutu tipku, već jednostavno koristite strelice na tipkovnici, slika će se pomicati u koracima od 1 piksela.
Ako uočite grešku u tekstu, odaberite je i pritisnite Ctrl + Enter. Hvala!
Značajke: Prilagodba: Upotreba: Snimke zaslona: Gdje preuzeti ELinks je pokušaj stvaranja modernog tekstualnog web preglednika. Projekt je započeo od koda preglednika Links. Njegov cilj je bio prvi pokušati implementirati nekoliko značajki koje više ili manje nedostaju/slabe u Linkovima. E u ELinksu dolazi eksperimentalno. Nakon uspjeha ovih napora, "E" je postalo shvaćeno kao "Prošireno" ili "Poboljšano". Kada je preglednik Links dosegao određeni stupanj cjelovitosti, nadmašivši u nekim aspektima tada najnapredniji web preglednik Lynx, njegov se daljnji razvoj našao na raskrižju: krenuti prema prikazu grafike i dalje od čistog teksta ili unaprijediti surfanje webom pomoću teksta korisničko sučelje izvan onih postignutih na početku. Lynx, a zatim Linkovi - ali još uvijek u tekstualnom načinu. Prvi smjer realiziran je u verziji Links koja može prikazati grafički sadržaj web stranica - Links2. Drugi je ELinks web preglednik. Lynx je bio i još uvijek je vrlo zreo komad softvera te vrste. Njegovi su autori osmislili i implementirali vrlo sofisticiran i čvrst koncept pregledavanja weba u tekstualnom načinu s posebnim apstrakcijama i konvencijama koje su pomogle prevladati mnoga ograničenja i nedostatke surfanja webom korištenjem tekstualnog sučelja i stvorile svijet toliko različit od brzo rastućeg grafičkog dio interneta. Ali HTML i računala su se dalje razvijali, počelo je širenje skriptnih jezika, cijeli svijet predstavljanja, pronalaženja i konzumiranja informacija krenuo je naprijed i promijenio se. Pojavile su se nove prilike. Mnoge od ovih značajki implementirane su u Linkovima, ali sljedeće promjene u vizualnom prikazu informacija u web dokumentima - od više HTML-a do više CSS-a - otvorile su nove putove; čak i dok ste u tekstualnom modu. I to pokušavaju implementirati u ELinks: podrška za prikaz boja u terminalskim emulatorima koji podržavaju ovu značajku, malo pozicioniranja pomoću CSS-a, pa čak i neka vrsta podrške za JavaScript / ECMAScript. Tehnička strana mrežnih tehnologija (kao što je podrška za SSL) i podrška za različita kodiranja teksta već su bile prilično solidne u pregledniku Links, ali u ELinksu su neke značajke poboljšane, a druge razrađene. ELinks je korak naprijed u konceptu konzolnog web preglednika, što ELinks čini najnaprednijim primjerom njegove implementacije. Iako Lynx još uvijek prilično drži svoju poziciju. Njegov koncept pregledavanja weba u tekstualnom načinu rada, iako se radi o pojednostavljenju, posebnom pristupu prezentiranju i rukovanju informacijama, umjesto da nastoji biti poput okruženja grafičkog preglednika, radi prilično dobro. Web dokumenti postaju sve složeniji za implementaciju i (uz sva neizbježna ograničenja gledanja web stranica u tekstualnom načinu) slijediti specifičan put u postupanju s njima je način da se natječete s pokušajem da budete poput mainstreama, grafički puni -isključeni stolni web preglednici. Ovo je analogno dilemi preglednika za mobilne uređaje s malim zaslonima: pokušajte simulirati računala s velikim zaslonima ili transformirati prikazane web dokumente kako bi odgovarali karakteristikama okruženja. Tekstualni preglednici uglavnom se koriste na računalima s više ili manje velikim zaslonima, tako da postoji manje ograničenja veličine i više iskušenja: Lynx da ostane skroman, ELinks da ide dalje. Značajke Tekst web preglednika. Verzije za Linux, druge * nix sustave, Windows, DOS, OS/2, BeOS i neke druge. HTML (uključujući tablice i okvire). Vrlo ograničen CSS i JavaScript (Više). Podrška za paletu boja od 16, 88 ili 256 u kompatibilnim terminalnim emulatorima / konzolama. Podrška za kartice, pozadinska preuzimanja s obavijesti o završetku preuzimanja. Podrška za miš. Uređivanje tekstualnih polja na obrascima web stranica u vanjskom uređivaču teksta. Prečice za URL-ove. Podrška za skripte u Perl, Lua, Guile, Ruby.
Imapsync. Prijenos pošte
Prijenos pošte s jednog IMAP poslužitelja na drugi pomoću imapsync [1] / Linux, naredbeni redak: imapsync —host1 imap.this.com —user1 [e-mail zaštićen]—Passfile1 / home / user / imap / passwordfile1 —ssl1 —host2 imap.another.com —user2 [e-mail zaštićen]—Passfile2 / home / user / imap / passwordfile2 —ssl2 —skipsize —allowsizemismatch - Imamo example.com i poštanski sandučić [e-mail zaštićen] na poslužitelju hosting tvrtke. IMAP poslužitelj: imap.this.com. IMAP poslužitelj podržava SSL. - Stranica example.com se prenosi na drugi hoster. Sukladno tome, poštanski sandučić [e-mail zaštićen] sa svim svojim sadržajem i čuvajući strukturu mapa. IMAP poslužitelj drugog hosting providera: imap.another.com. IMAP poslužitelj podržava SSL. 1. Napravite poštanski sandučić [e-mail zaštićen] i lozinku za njega na poslužitelju hosting tvrtke gdje se prijenos odvija. 2. Napravite dvije tekstualne datoteke u mapi / home / user / imap /: passwordfile1 sa lozinkom poštanskog sandučića na prvom IMAP poslužitelju i passwordfile2 sa lozinkom poštanskog sandučića na drugom IMAP poslužitelju. 3. chmod 600 / home / user / imap / passwordfile1 4. chmod 600 / home / user / imap / passwordfile2 5. Instalirajte imapsync 6. Pokrenite imapsync s odgovarajućim parametrima i podacima Imapsync prenosi poštu uz očuvanje strukture mapa iz imap.this. com na imap.another.com. SSL se koristi za šifriranje podataka u prijenosu, a lozinke se pohranjuju u datoteke zaštićene postavkom chmod 600. Premještanje pošte između dvije usluge e-pošte može zahtijevati dodatne opcije imapsync [2]. Na primjer, kada prenosite sadržaj jednog poštanskog sandučića Gmail.com u drugi, morate navesti "—port1" i "—port2": imapsync —host1 imap.gmail.com —port1 993 —user1 [e-mail zaštićen]—Passfile1 / home / user / imap / passwordfile1 —ssl1 —host2 imap.gmail.com —port2 993 —user2 [e-mail zaštićen]—Passfile2 / home / user / imap / passwordfile2 —ssl2 —skipsize —allowsizemismatch [1] Jednostavan i uobičajen slučaj: sadržaj jednog e-mail pretinca se prenosi u drugi - prazan, koji se nalazi na drugom poslužitelju. No mogu postojati i složenije situacije: migracija e-pošte s Gmaila na Google Apps i prelazak na Google Apps s imapsync. [2] Ostale opcije: Migrirajte poštu s jednog poslužitelja na drugi s imapsync i imapsync (1) - Linux man stranica.
Pozadinska HTML slika
Lekcija 10. CSS. Poravnanje slike po sredini
HTML slika, umetnite sliku 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 definiran oznakom.
- HTML slika može biti pozadina web stranice.
- HTML slika može se specificirati u ulozi hiperveze.
- Umetanje slike u HTML kod stranice
- Udaljenost između slike i teksta vodoravno i okomito
- Definiranje pozadinske slike u HTML-u
- HTML slika - poveznica i njen definirajući kod
- Postavite HTML sliku u središte stranice ili bloka
Stavite sliku s ekstenzijom u mapu ili bilo koju drugu gdje imate datoteku, recimo, nazovite je kako god želite, na primjer,.
Umetanje slike u HTML kod stranice:
Oznaka nije uparena. Obratite pažnju na način na koji ga zatvarate.
Atributi i vrijednosti
- - obavezno, označava izvor slike.
- - definira alternativni tekst, komentar koji robot za pretraživanje čita prilikom analize sadržaja web stranice. Također je potrebno označiti.
- - definira širinu slike u pikselima.
- - definira visinu slike u pikselima.
Molimo koristite stvarne dimenzije kako biste zadržali izvornu kvalitetu slike.
Za web razvoj primjenjiva su tri formata slika: PNG (.png), JPEG (.jpg) i GIF (.gif). Adobe Photoshop je specijalizirani alat za izradu grafike za web stranice. Može se koristiti za pretvaranje jednog formata slike u drugi.
HTML slika | Horizontalne i vertikalne uvlake
ili vodoravni i okomiti razmak izmeđuslika i tekst
Pogledajte rezultat u novom prozoru: Pozadinska slika u HTML-u
Atributi su pokriveni u CSS tutorialima.
Umetanje slike i njegov redoslijed → → vidi ovdje.
HTML slika - link
Primjer koda:
Pogledajte rezultat u novom prozoru: HTML slika u sredini stranice
Na što ovdje trebate obratiti pažnju? → Prvo su naznačene dimenzije - to ubrzava učitavanje slike. Drugo, atributi su navedeni, što je također vrlo poželjno učiniti, čak i ako nema alternativnog teksta. U prvom slučaju određeno je centriranje HTML parametar, au drugom linearnim uključivanjem kaskadnih stilskih tablica.
Datum objave: listopad 2009. | Ažuriranje: kolovoz 2014
Lekcija 9. HTML pozadina 
HTML slika Lekcija 11. HTML slika i tekst
Kako da poravnam središte slike sa središtem div bloka?
Već duže vrijeme postoje različite metode centriranja slika pomoću CSS-a. Na implementaciju ovih metoda uvelike je utjecao Internet Explorer 5. Ali danas je ova verzija preglednika malo zanimljiva, pa se možete riješiti nepotrebnog koda.
Prije 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:
Za ovaj dodatni blok dodjeljuje se odgovarajuće CSS svojstvo:
Sve je to bilo potrebno jer Internet Explorer 5 ne podržava tada postojeće i podržano od drugih preglednika svojstvo margina, koje automatski dodjeljuje jednaku udaljenost lijevo i desno od poravnatog elementa u hodu. Gornja metoda je još uvijek u upotrebi.
Ali IE5 i IE5.5 su stvar prošlosti, pa se HTML može učiniti jednostavnijim i elegantnijim:
Odsutnost nepotrebnih dodatnih blokova postiže se zahvaljujući odgovarajućem CSS-u:
Svojstvo pripisuje slici karakteristiku elementa bloka, što eliminira potrebu za korištenjem ili oko slike. Nadalje, deklaracija dodjeljuje nulte vrijednosti gornjoj i donjoj margini, a automatski jednaku vrijednost lijevoj i desnoj margini, što poravnava sliku u sredini.
Trebate dodijeliti različite gornje i donje margine? Nema problema. Ne zaboravite na kratice:
Nažalost, za razliku od slučajeva poravnanja slika prema lijevom i desnom rubu (i), ne postoji način za premotavanje teksta oko slike u sredini pomoću standardnih metoda. Naravno, ako je jako važno, onda je izvedivo.
Također, ako je slika također poveznica, tada se područje veze proteže na cijelu širinu bloka, bez obzira na širinu slike. U nekim slučajevima to je nedostatak.
Gornja metoda poravnanja najprikladnija je za web-mjesta koja koriste slike unutar teksta (vijesti, članci). Za foto galerije, naravno, postoje sofisticiraniji načini za poravnavanje slika.
| Internet Explorer | Krom | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 9.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Zadatak
Poravnajte fotografiju naslova s vodoravnim središtem web-stranice.
Riješenje
Ilustracije za tekst često su usredotočene na web stranicu, s tekstom prije i iza slike. Ovakav raspored elemenata omogućuje vam da razbijete veliki tekst u semantičke blokove i privučete pozornost na slike.
Prvo, pogledajmo centriranje slike. Da biste to učinili, selektoru P dodajte svojstvo stila poravnanja teksta sa središtem vrijednosti. U ovom slučaju, oznaka mora biti smješten unutar odlomka (oznaka
). Kako bismo spriječili da se svi paragrafi na stranici počnu centrirati, uvest ćemo našu klasu fig i sve radnje će se izvoditi 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. jedan.
Riža. 1. Slika je poravnata sa središtem web stranice
Fotografiji možete dodati i natpis. Tekst bi trebao biti smješten odmah iza slike i na sličan način poravnat sa središtem. Ovdje je sve jednostavno, opet ćemo koristiti našu klasu, ali ćemo je već primijeniti na oznaku
Primjer 2. Naslov slike
HTML5CSS 2.1IECrOpSaFx
Rezultat ovog primjera prikazan je na sl. 2.
Kako da poravnam fotografiju sa središtem web stranice?
2. Potpis ispod slike
Za blok s fotografijom upotrijebite oznaku
CSS centrirana slika
Windows: 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 poravnavanje slike prema sredini pomoću CSS-a. Primjer:
HTML / XHTML. Kod:
<razd klasa = " primjer«>
<imgsrc=» slika.jpg» alt=» Slika» / >
</ razd>
.primjer(položaj: relativan; lijevo: 0px; vrh: 0px; visina: auto; širina: 100%; plutajući: lijevo; padding: 10px; obrub: 1px #ccc solid; pozadina: #fafafa;)
.primjerimg(prikaz: blok; margina: 0 auto;)
CSS svojstva spremnika (u ovom slučaju primjer) mogu biti vrlo različiti, središnje poravnanje slike stvara se pomoću stilova koji su izravno povezani sa slikom: .primjerimg(prikaz: blok; margina: 0 auto;).
Aliosque subditos et thema
CSS centrirana slika
Horizontalno poravnavanje slike prema sredini pomoću CSS-a. Primjer: HTML / XHTML.
Poravnavanje slike u sredini HTML-a i CSS-a
Kod:
[1] Također u Operi 4.0+, osim ako se ne koristi skraćenica za CSS svojstva. Odnosno, ako je CSS kod u obliku primjera 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+.
ELlinks. Korištenje
Idite na stranice: ELinks - Tekst ili web preglednik konzole. Opis: značajke, snimke zaslona, gdje preuzeti. ELlinks. Konfiguracija - Kako konfigurirati ELinks. Pokrenuti ELinks omogućuje vam da učinite gotovo sve što možete kroz korištenje njegovog izbornika. Dakle, sljedeća rasprava 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 sa sučeljem naredbenog retka. 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 pristupa tvrdom disku za pregled lokalnih mapa: elinks datoteka: /// ili: elinks / - Za pokretanje ELinks, otvaranje lokalne mape: elinks datoteka: /// home / user1 / ili: elinks / home / user1 / - Za pokretanje ELinks, koji otvara lokalnu datoteku: elinks datoteka: ///home/user1/document1.htm ili: elinks /home/user1/document1.htm ELinks (Windows) - Za pokrenite ELinks, unesite naredbu: elinks - Za pokretanje ELinks, koji otvara web dokument s Interneta: elinks Web adresa web dokumenta - Za pokretanje ELinks pristupa tvrdom disku za pregled lokalnih mapa: elinks datoteka: /// - Za pokrenite ELinks, otvorite lokalnu mapu: elinks datoteka: // c / home / user1 / - Što za pokretanje ELinks, koji otvara lokalnu datoteku: elinks datoteka: //c/home/user1/document1.htm 2) Za pristup izborniku ELinks: Pritisnite Esc na tipkovnici 3) Za otvaranje web dokumenta u već pokrenutom ELinksu: Pritisnite g na tipkovnici ili Esc -> Datoteka -> Idi na URL -> [Unesite web adresu] -> Enter 4) Vratite se: tipka sa strelicom lijevo na tipkovnici ili Esc -> Datoteka -> Vrati se 5) Otvorite vezu u novoj pozadini kartica : Shift - t ili Esc -> Veza -> Otvori u novoj kartici u pozadini 6) Idite na sljedeću karticu: Shift -> ili Esc -> Pogled -> Sljedeća kartica 7) Zatvori karticu: Pritisnite c na tipkovnici ili Esc -> Pogled -> Zatvori karticu 8) Proslijedi 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 slike
Za horizontalnu kontrolu slike koristite atribut poravnati = "".
Poravnavanje slika prema sredini u HTML-u
Navedite u njegovoj vrijednosti lijevo ako želite poravnati sliku s lijeve strane stranice ili vrijednost pravo- na desnom rubu. Prema zadanim postavkama, slika je uvijek poravnata s lijeve strane stranice:
Okomito poravnavanje slike
Koristeći isti atribut poravnati = "" možete kontrolirati položaj slike i vertikalu. Da biste to učinili, morate napisati u njegovom značenju vrh za poravnavanje s gornjom granicom, sredina- u sredini i dno- uz donju granicu:
Napomena: snimanje slike / fotografija.jpg znači da slika nije u jednom direktoriju, već u mapi slika.
Poravnavanje slike prema sredini stranice
Osim toga, slika se može centrirati. Da biste to učinili, omotajte oznaku slike u par oznaka
1.1 Uvod u html
1.2 Struktura html dokumenta
2.1 Stavak u html-u
2.2 Naslovi u html-u
2.3 Citati i komentari u html-u
2.4 Oznake za razmak i crtice u html-u
3.1 Numerirani html popis
3.2 Popis s oznakama
3.3 Ugniježđene liste
4.1 Isticanje html teksta
4.2 Vrsta slova i veličina fonta
4.3 Promjena boje teksta u html-u
4.4 Granice 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 susreću često.Nedavno sam se suočio s nekoliko takvih zadataka odjednom:
1. Centriranje slike u sredini stranice i komprimiranje prilikom promjene veličine preglednika.
U principu, i prvi i drugi zadatak se mogu riješiti uz malo javascripta, ali ja sam to htio pametno napraviti kroz html + css.Zadatku je olakšala i činjenica da je stranica na kojoj će se koristiti moderno razvijena, a podrška je bila ograničena na ie9+, FF, Chrome, Safary, Opera.
2. Apsolutno centriranje slike bez obzira na veličinu prozora preglednika.
Ali morao sam se pozabaviti s ovim. Prvotna ideja je bila ova:
.wrapper (preljev: skriven; položaj: fiksni; gore: 0; desno: 0; dolje: 0; lijevo: 0;) .item (položaj: apsolutni; gornji: 50%; lijevo: 50%; prikaz: inline-block ;) .item img (margina: -50% 0 0 -50%;)
Ideja se temeljila na sljedećoj logici:
- Vanjski blok, .omot rastegnut do svoje pune slobodne širine i visine.
- Unutarnja jedinica, .artikal, uzima širinu i visinu slike koja je unutra, budući da je inline-blok; i izložen je gornjim lijevim kutom do sredine roditeljskog bloka.
- Uklanjanje slike u minus margini, koja ju je trebala poravnati točno u sredini .omot
Odlučio sam to tako što sam se prisjetio transformacije, odnosno njegove translate funkcije, koja, takoreći, pomiče prikaz objekta, ali napušta mjesto gdje je bio. I pokazalo se da zamjenom margine slike s transform: translate (-50%, -50%); problem je odmah riješen. I evo što je ispalo na kraju:
* (padding: 0; margina: 0; vertikalno poravnanje: vrh;) html, tijelo (širina: 100%; visina: 100%;) .wrapper (preljev: skriven; pozicija: fiksna; vrh: 0; desno: 0 ; dolje: 0; lijevo: 0;) .item (pozicija: apsolutna; vrh: 50%; lijevo: 50%; prikaz: inline-block;) .item img (-webkit-transform: prevedi (-50%, - 50%); -moz-transform: prevesti (-50%, -50%); transformirati: prevesti (-50%, -50%);)
PS: Nisam siguran jesu li to jedine opcije ili ne. Mislim da ove opcije nisu prikladne za svakoga.
Ali pouzdano znam da će, ako se oni pojave u mom slučaju, biti ljudi kojima bi mogli biti od velike pomoći u svojim zadacima. Osim toga, ako malo dopunite kod, možete dodati štake za stariji IE, nisam ga dodao jer nisam htio pokvariti čisti kod radi vrlo zastarjelih preglednika.
ZY2: Kritike i savjeti su dobrodošli. Hvala što ste pročitali do kraja.
Oznake: html, css, css3, slika, slika, slika, poravnanje, okomito poravnanje
Zadatak
Poravnajte fotografiju naslova s vodoravnim središtem web-stranice.
Riješenje
Ilustracije za tekst često su usredotočene na web stranicu, s tekstom prije i iza slike. Ovakav raspored elemenata omogućuje vam da razbijete veliki tekst u semantičke blokove i privučete pozornost na slike.
Prvo, pogledajmo centriranje slike. Da biste to učinili, selektoru P dodajte svojstvo stila poravnanja teksta sa središtem vrijednosti. U ovom slučaju, oznaka mora biti smješten unutar odlomka (oznaka
). Kako bismo spriječili da se svi paragrafi na stranici počnu centrirati, uvest ćemo našu klasu fig i sve radnje će se izvoditi s njom. Primjer 1 pokazuje kako se to radi.
Primjer 1. Korištenje text-align
HTML5 CSS 2.1 IE Cr Op Sa Fx
Tekst prije slike
Tekst za slikom
Rezultat ovog primjera prikazan je na sl. jedan.
Riža. 1. Slika je poravnata sa središtem web stranice
Fotografiji možete dodati i natpis. Tekst bi trebao biti smješten odmah iza slike i na sličan način poravnat sa središtem. Ovdje je sve jednostavno, opet ćemo koristiti našu klasu, ali ćemo je već primijeniti na oznaku
Primjer 2. Naslov slike
HTML5 CSS 2.1 IE Cr Op Sa Fx
Rezultat ovog primjera prikazan je na sl. 2.
Riža. 2. Potpis ispod slike
Za blok s fotografijom upotrijebite oznaku
