U ovom članku ćemo se dotaknuti pitanja središnjeg poravnanja raznih html elementi koristeći svojstva css-a.

Vrlo često postoji potreba za centriranjem diva ili poravnavanjem njegovog sadržaja. Postoji nekoliko načina za to. Neke su metode prikladne za poravnavanje teksta, slika itd., ali nisu prikladne za poravnavanje blokova.

Prvo pogledajmo opcije za poravnavanje sadržaja blokova, poput slika i teksta. Ova metoda se odnosi na gotovo sve elemente.

U ovom slučaju, sve je jednostavno - za nadređeni element postavljamo svojstvo poravnanja teksta s centrom vrijednosti. Ova metoda centriranja teksta pomoću CSS-a je najjednostavnija i najprikladnija. Za dublje razumijevanje navest ću primjer. Važno je shvatiti da je u ovom slučaju samo sadržaj poravnat prema središtu.

HTML kôd:

Dio teksta poravnat prema sredini za nadređeni element tijela

CSS kôd:

tijelo (text-align:center;) /*poravnaj sadržaj tijela prema sredini*/

Shvatili smo najjednostavniju stvar - poravnavanje teksta i slika pomoću CSS-a na središte stranice.

Prijeđimo sada na načine poravnavanja elemenata kao što je vrsta bloka (div, tablica). U ovom slučaju nećemo centrirati sadržaj, već same tablice, blokove i odlomke.

Ukupno predlažem dvije mogućnosti korištenja CSS-a: korištenje svojstva margine i korištenje svojstva položaja c lijevo. Važno je napomenuti da nijedna od ovih metoda neće raditi osim ako nemate fiksnu širinu za element, bilo u px, % ili bilo što drugo.

Dakle, prvi korak je odlučiti u kojim jedinicama i koja će biti širina elementa koji želimo poravnati prema sredini.

Poravnanje u sredini pomoću margine

Za metodu margine nije važno postavljate li širinu u postocima ili pikselima. Za centriranje ovom metodom trebate postaviti sljedeće vrijednosti svojstva margine na 0 auto. Točnije, za bočno ispunjavanje vrijednost bi trebala biti auto, a za vrh i dno možete postaviti bilo koje ispunjavanje. Oni. proširena verzija vrijednosti izgleda ovako: 0 auto 0 auto ili ovako: 10px auto 5% auto.

Dakle, možete postaviti vanjske margine za vrh i dno elementa, ali bočne margine moraju biti postavljene na auto.

Ovo je možda najsvestraniji i najprikladniji način da div ili bilo koji drugi element bude centriran.

HTML kôd:

CSS kôd:

tijelo (text-align:center;) div (padding:10px; color:#FFFFFF;) div.centr (background:#003300; width:300px; /*fiksna širina u pikselima*/ margin:10px auto 0 auto; / *vanjske margine, poravnavanje bloka prema sredini i uvlačenje vrha za 10 px*/ ) div.centrall ( background:#990000; width:30%; /*fiksna širina korištenjem postotaka*/ margin:2% auto 0 auto; /*vanjsko ispunjavanje koje poravnava blok prema sredini i uvlači vrh za 2%*/ text-align:center; )

Središnje poravnanje pomoću položaja i lijevo

Ova opcija nije prikladna za svaki element.

Prvo, širina mora biti određena samo kao postotak; to neće raditi s pikselima. Uskoro ćete shvatiti zašto je to tako.

Drugo, nadređena oznaka mora imati svojstvo položaja postavljeno na relativno/apsolutno/fiksno, bilo što od sljedećeg.

Sada također trebate postaviti bilo koju od ovih vrijednosti za svojstvo položaja za element koji se poravnava. Zatim uzmite 100, oduzmite širinu ovog elementa i dobiveni broj podijelite s 2. Dobivena vrijednost bit će ona koju treba navesti za lijevo (vrijedi napomenuti da se ovo svojstvo može zamijeniti s desno , kao i obično, ovo je nije bitno). Zahvaljujući ovim svojstvima, željeni div ili tablica bit će postavljeni u središte nadređenog elementa.

Kako ovo radi? Svojstvo položaja ovdje je potrebno kako bi se svojstvo lijevo računalo od lijevog ruba nadređenog elementa na ekranu, iako je ponekad prikladna opcija da nema određenog svojstva položaja za nadređenog. Zatim jednostavno postavimo vrijednost svojstva left tako da lijevi rub bude postavljen na pola širine cijele širine nadređenog elementa minus širina samog bloka.

Uvjerite se sami kako to radi.

HTML kôd:

CSS kôd:

tijelo (position:relative;) div (padding:10px; color:#FFFFFF; position:relative;) div.centrall ( background:#990000; width:20%; /*fiksna širina putem postotaka*/ text-align:center ; lijevo:40%; /*uvučeno od lijevog ruba nadređenog elementa*/ )

NetSurf 2.6+, Hv3.

Vodoravno poravnajte sliku sa središtem koristeći CSS. Primjer:

HTML/XHTML. Kodirati:

.primjer(položaj: relativan; lijevo: 0px; vrh: 0px; visina: automatski; širina: 100%; plutajuće: lijevo; ispuna: 10px; obrub: 1px #ccc solid; pozadina: #fafafa;)

.primjer img(prikaz: blok; margina: 0 automatski;)

CSS svojstva i kontejner (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: .primjer img(prikaz: blok; margina: 0 automatski;).

I također u Operi 4.0+, ako se ne koriste skraćena CSS svojstva. Odnosno, ako je CSS kod u obrascu. primjer img(prikaz: blok; margina-lijevo: auto; margina-desno: auto;).

I također u Netscapeu 6.01+, Mozilli 0.6+.

Aliosque subditos et theme

1) Horizontalno i okomito središnje poravnanje pomoću CSS-a - 1 Poravnajte sadržaj stranice prema sredini u vidljivom području prozora preglednika pomoću CSS-a. Spremnik u kojem se nalazi sav sadržaj web stranice poravnat je po sredini – po širini i visini. Za više moderni preglednici: [Više detalja] : [Otvorite primjer stranice] 2) Horizontalno i okomito središnje poravnanje pomoću CSS-a - 2 Poravnavanje sadržaja stranice prema središtu u vidljivom području prozora preglednika pomoću CSS-a. Spremnik u kojem se nalazi sav sadržaj web stranice poravnat je po sredini – po širini i visini. Konzervativniji od prethodne opcije. Prikladno ne samo za moderne preglednike, već i za starije. Kao npr Internet Explorer 6 ili rane verzije Maxthon. Ako trebate nešto promijeniti, to zahtijeva više truda od prve metode: [Više detalja]: [Otvorite stranicu s primjerom] 3) Horizontalno poravnanje bloka nepoznate širine Horizontalno poravnanje bloka nepoznate širine koristeći CSS: [ Više detalja ] : [ Otvorite primjer stranice ] 4) Položaj: apsolutno centrirano Vodoravno poravnanje apsolutno pozicioniranog elementa prema središtu pomoću CSS-a: [ Više detalja ] 5) Slika autora CSS centar Horizontalno središnje poravnanje slike pomoću CSS-a: [ Više ] 6) Okomito CSS poravnanje Okomito CSS poravnanje blok elementa koji sadrži tekst i slike: [ Više ] 7) Središnje poravnanje s koristeći JavaScript i CSS Poravnajte sadržaj stranice centriran u vidljivom području prozora preglednika pomoću JavaScripta i CSS-a. Spremnik u kojem se nalazi sav sadržaj web stranice je centriran - okomito i vodoravno: [ Više detalja ]: Dva slučaja: 1. Spremnik je centriran ako je razlučivost zaslona monitora jednaka ili veća od 1024x768: [ Otvaranje stranice primjera ] 2 Spremnik je centriran ako je razlučivost zaslona monitora jednaka ili veća od 1024x768 + kursor miša lebdi iznad veze u jednom od elemenata sadržaja stranice: [ Otvori stranicu primjera ]

MPlayer: FFmpeg Media playeri pojavili su se davno, ali je njihov procvat započeo masovnom distribucijom računala dovoljno snažnih za reprodukciju video datoteka. To se poklopilo s masovnim širenjem operativni sustavi i općenito softver s grafičkim sučeljem. Međutim, postoji dualnost u prirodi GUI programa: postoji skup koda koji je odgovoran za GUI, za izgled a postoji – za to što zadatak za koji ovu aplikaciju je uopće stvoren. Oba kompleksa troše resurse sustava, njihov odgovor na radnje korisnika stvara određeno vrijeme čekanja. A u slučajevima ili konceptima gdje se izgled smatra manje važnim - manje važnim do točke napuštanja ili gotovo napuštanja - pojavljuju se, između ostalih, konzolne aplikacije. Osim toga, odvajanje GUI-ja i motora olakšava promjenu grafičkog sučelja ili izvođenje niza automatiziranih radnji. Ova se shema također provodi u odnosu na media playere za Windows. MPlayer je, na primjer, u svom uobičajenom obliku konzolna aplikacija koja se brzo pokreće, ima brz odgovor na radnje korisnika i troši resurse sustava gotovo u potpunosti za svoj trenutni zadatak. I na temelju toga, po želji, dodaje se jedno ili drugo grafičko sučelje za stvaranje, općenito, nove aplikacije. MPlayer - / početna stranica / konzolni media player za Windows. Osnova za SMPlayer i UMPlayer. Postoje verzije za Linux, FreeBSD, NetBSD, OpenBSD, Apple Darwin, Mac OS X, QNX, OpenSolaris/Solaris, Irix, HP-UX, AIX, neke druge *nix sustave, BeOS, Syllable, AmigaOS, AROS, MorphOS, DOS , Windows. Podržani formati: video, audio, statične slike, titlovi itd. (Više puni popis video i audio kodeci) MPlayer: "Dead Man" MPlayer: "Nebeski kapetan i svijet sutrašnjice" MPlayer: "10.000 BC" MPlayer: "13 Tzameti" MPlayer: "Crtačov ugovor" MPlayer: "Balzaminovljev brak" FFmpeg - / početna stranica / Skup uslužnih programa i biblioteka za rad s video i audio datotekama. Kreirano u i za Linux, ali postoji i opcija za Windows. Moguća je kompilacija za druge operativne sustave. Podržani formati datoteka i kodeci: (Popis ).Također, VLC media player može se pokrenuti s tekstualnim sučeljem pomoću ncurses.

Značajke interakcije između HTML slika i teksta

Pogledajmo kako postaviti teksta lijevo ili desno od slike.

U prethodnoj lekciji pogledali smo izlaznu metodu HTML slike s nastavkom .jpg na web stranici i kako postaviti dodatni razmak između njega i teksta. Nastavimo upoznavanje s oznakom te značajke njegove interakcije s elementima teksta.

Navigacija po stranici

Tekst na vrhu, dnu, u sredini slike

Tekst na vrhu slike Tekst u sredini slike Tekst na dnu slike

Proizlaziti:

Atributi i vrijednosti

• align="top" - poravnava slika i tekst duž vrha.
• align="middle" - poravnava slika i tekst u sredini, okomito.
• align="bottom" - poravnava slika i tekst uz dno.

Dopustite mi da vas podsjetim da su za web primjenjiva tri formata slika: PNG (.png), JPEG (.jpg) i GIF (.gif).

Obratite pozornost na način učitavanja slike: ../images/2121.png. Prvo, korišteno PNG format(.png). Drugo, slika je u posebnoj mapi, odnosno imam dokument u jednoj mapi, a sliku u drugoj. U ovakvim situacijama vrlo je bitno ispravno naznačiti put od dokumenta do učitane slike, što je i učinjeno: prve dvije točkice... određuju izlaz iz mape u kojoj se dokument nalazi (sve lekcije, oni su također stranice, oni su također dokumenti tečaja na HTML Imam ih u istoj mapi, CSS- u drugom, slike - u trećem, i tako dalje); /images/ nije ništa drugo nego naziv mape sa slikama, a 2121.png je puni naziv datoteke same slike.

HTML slika lijevo - tekst desno

Proizlaziti:

Slika se okreće oko teksta s desne strane Slika se okreće oko teksta s desne strane Slika se okreće oko teksta s desne strane. Slika se okreće oko teksta s desne strane. Slika se okreće oko teksta s desne strane. Slika se okreće oko teksta s desne strane. Slika se okreće oko teksta s desne strane

Pješčanik

vlast 11. listopada 2013. u 17:17

Centriranje slika na stranici

Uvod

Volim rješavati zanimljive layout probleme, a s obzirom na moje iskustvo u ovom području, nešto više od 5 godina, takvi se problemi ne susreću često.
Nedavno sam naišao na nekoliko od ovih problema:

1. Centriranje slike u sredini stranice i njeno sažimanje prilikom promjene veličine preglednika.

U principu, i prvi i drugi zadatak mogu se riješiti pomoću malog javascripta, ali ja sam to htio mudro napraviti koristeći html+css.
Zadatak je bio olakšan i činjenicom da je stranica na kojoj će se to koristiti razvijena kao moderna, a podrška je ograničena na ie9+, FF, Chrome, Safari, Operu.

2. Apsolutno centriranje slike, bez obzira na veličinu prozora preglednika.

Ali morao sam se petljati s ovim. Izvorna ideja je bila ova:

.wrapper( overflow: skriveno; položaj: fiksno; gore: 0; desno: 0; dno: 0; lijevo: 0; ) .item( položaj: apsolutno; vrh: 50%; lijevo: 50%; prikaz: inline-block ; ) .item img( margina: -50% 0 0 -50%; )

Ideja se temeljila na sljedećoj logici:

• Vanjski blok, .omot, rastegnut cijelom slobodnom širinom i visinom.
• unutarnja jedinica, .artikal, uzima širinu i visinu slike koja se nalazi unutra, budući da je inline-block; i postavlja se s gornjim lijevim kutom u središte nadređenog bloka.
• Postavljanje slike u minus marginu, koja ju je trebala poravnati točno u sredini .omot

Ali posve logičnu ideju prekinula je još logičnija ovisnost. Ispuna od 50% izračunava se na temelju polovice visine ili širine nadređenog. U mom slučaju, širina i visina roditelja izgrađene su na širini i visini slike, a nakon što je slika pomaknuta za -50%, roditelj, .artikal, smanjio za istih 50% i krug se zatvorio.

To sam odlučio tako što sam se sjetio transformacije, točnije njene funkcije translate, koja kao da pomiče prikaz objekta, ali ostavlja mjesto gdje je bio. I pokazalo se da zamjenom margine slike s transform: translate(-50%, -50%); problem je odmah riješen. A ovo je ispalo na kraju:

*( padding: 0; margina: 0; vertical-align: top; ) html, body( width: 100%; height: 100%; ) .wrapper( overflow: hidden; position: fixed; top: 0; right: 0 ; dolje: 0; lijevo: 0; ) .item( položaj: apsolutni; vrh: 50%; lijevo: 50%; prikaz: inline-block; ) .item img( -webkit-transform: translate(-50%, - 50%); -moz-transform: prevedi (-50%, -50%); transform: prevedi (-50%, -50%); )

PS: Nisam siguran jesu li to jedine opcije ili ne. Mislim da ove opcije nisu prikladne za svakoga.
Ali sigurno znam da ako su bili prikladni u mom slučaju, tada će biti ljudi kojima će vjerojatno biti od velike pomoći u njihovim zadacima. Osim toga, ako kodu dodate malo koda, možete dodati štake za stariji IE, nisam to dodao jer nisam htio zbog zastarjeli preglednici pokvariti čisti kod.
PS2: Kritike i savjeti su dobrodošli. Hvala što ste pročitali do kraja.

Oznake: html, css, css3, slika, slika, slika, poravnanje, okomito poravnanje

Ovaj članak nije podložan komentarima jer njegov autor još nije punopravni član zajednice. Autora ćete moći kontaktirati tek nakon što primi pozivnicu od nekoga iz zajednice. Do ovog trenutka njegovo će korisničko ime biti skriveno aliasom.