Ceea ce permite automat cu o precizie sută la sută aliniați orice obiect/strat la centrul imaginii sau la marginile acesteia. De asemenea, vă puteți alinia în raport cu o singură zonă din imagine. Toate acestea sunt foarte simple și vor fi discutate în acest articol.
De regulă, începătorii fac această operație cu ochiul, ceea ce nu este deloc necesar. Alegeți un instrument in miscareși acordă-i atenție. Există o serie de setări care sunt responsabile pentru această sarcină ( uită-te la captura de ecran):
Primele trei butoane sunt responsabile pentru alinierea verticală (de la stânga la dreapta): sus, centru, jos.
Următoarele trei butoane sunt responsabile pentru alinierea orizontală (de la stânga la dreapta): stânga, centru, dreapta.
Astfel, pentru a plasa obiectul exact în centru, trebuie să selectați centrarea pe verticală și pe orizontală.
Cea mai importantă regulă de aliniere: În primul rând, trebuie să îi spui lui Photoshop zona în raport cu care programul ar trebui să caute marginile sau mijlocul. Până când veți face acest lucru, butoanele de aliniere vor fi inactive, ceea ce înseamnă că nu se pot face clic pe ele.
Acesta este secretul modului de realizare a unui obiect în mijlocul întregii imagini sau al fragmentului său individual.
Deci, succesiunea acțiunilor este următoarea:
Să presupunem că doriți să plasați această imagine în centru:
Opțiunea 1- raportat la întreaga pânză.
Pasul 1
Indicăm lui Photoshop zona în raport cu care programul ar trebui să alinieze imaginea. Acest lucru se realizează prin crearea .
Selectați stratul de fundal din paleta de straturi și apăsați Ctrl + A de pe tastatură ( Selectează tot). Ca rezultat, ar trebui să vedeți un cadru de selecție din "furnici care marșează"în jurul stratului de fundal. (De regulă, stratul de fundal are aceeași dimensiune ca pânza).
Notă
Puteți selecta stratul de fundal într-un alt mod - țineți apăsată tasta ctrlși faceți clic stânga pe stratul de fundal. Metoda funcționează când acest strat este deblocat (acest lucru este indicat de pictograma lacăt, ).
Pasul 2
Acum trebuie să alegeți un instrument in miscare. Când avem un cadru de selecție, butoanele de aliniere vor deveni active, ceea ce înseamnă că pot fi folosite.
Selectați stratul cu imaginea pe care doriți să o aliniați și acum faceți clic pe butoanele în funcție de locul în care doriți să plasați această imagine. De exemplu, să plasăm exact în centru. Apoi trebuie să facem clic pe aceste butoane:
Alt exemplu. Să presupunem că doriți să plasați imaginea în centru, dar în partea stângă. Apoi selectați următoarele butoane din bara de opțiuni:
Opțiunea 2- într-un singur fragment al imaginii
Să presupunem că există un fragment pe imagine, în interiorul căruia trebuie să plasați o imagine perfect uniform. În exemplul meu, am adăugat un pătrat de sticlă. Lasă o altă imagine în interiorul ei ( Apropo, poți învăța cum să faci singur un astfel de pătrat de sticlă).
Pasul 1
În primul rând, prin analogie cu prima opțiune, este necesar să selectați acest fragment. Cum să facă acest lucru?
- Dacă acest fragment este pe un strat separat (cum ar fi pătratul meu, pe care l-am inserat separat), atunci trebuie să faceți clic ctrlși faceți clic pe miniatura stratului dacă nu este blocat).
- Dacă acest fragment se află în imaginea în sine, atunci trebuie să selectați instrumentele de selecție Regiunile dreptunghiulare și ovaleși folosiți-le pentru a desena o zonă netedă selectată în jurul fragmentului. Cum să utilizați aceste instrumente. in miscareși ținând apăsată tastaSchimb, apăsați pe săgețile de direcție de pe tastatură. Imaginea se va mișca în trepte de 10 pixeli.
Dacă nu țineți apăsată această tastă, ci pur și simplu utilizați săgețile de la tastatură, atunci imaginea se va mișca în trepte de 1 pixel.
Am observat o eroare în text - selectați-o și apăsați Ctrl + Enter. Mulțumesc!
Caracteristici: Personalizare: Utilizare: Capturi de ecran: De unde să descărcați ELinks este o încercare de a crea un browser web modern bazat pe text. Proiectul a început pe baza codului de browser Links. Scopul lui la început a fost să încerce să implementeze câteva caracteristici care lipseau mai mult sau mai puțin/slabele în Link-uri. De unde vine „E” din „ELinks” - „Experimental” / „Experimental”. După succesul eforturilor depuse, „E” a început să fie înțeles ca „Extins”/ „Extins” sau „Îmbunătățit”/ „Îmbunătățit”. Când browserul Links a atins un anumit grad de maturitate, depășind în unele privințe pe cel mai avansat browser web Lynx, dezvoltarea lui ulterioară s-a aflat la o răscruce: să se îndrepte spre afișarea graficelor și dincolo de textul pur sau să avanseze navigarea pe web folosind o interfață de utilizator bazată pe text dincolo de limitele atinse la început.Lynx și apoi Links – dar rămânând în modul text. Prima direcție a fost implementată în versiunea de Linkuri capabilă să afișeze conținutul grafic al paginilor web - Links2. Al doilea este browserul web ELinks. Lynx a fost, și este încă, o piesă de software foarte sofisticată de acest gen. Autorii săi au conceput și implementat un concept foarte atent și solid de navigare pe web în modul text, cu abstracții și convenții speciale care au ajutat la depășirea multor limitări și dezavantaje ale navigării pe web folosind o interfață text și au creat o lume atât de diferită de partea grafică care se extinde rapid. a Internetului. Dar HTML și computerele s-au dezvoltat în continuare, limbajele de scripting au început să se răspândească, întreaga lume a prezentării, găsirii și consumului de informații a avansat, s-a schimbat. Au apărut noi oportunități. Multe dintre aceste caracteristici au fost implementate în Link-uri, dar următoarele modificări în prezentarea vizuală a informațiilor din documentele web - de la mai mult HTML la mai mult CSS - au deschis noi drumuri; chiar și în modul text. Și aceasta este ceea ce ELinks încearcă să implementeze: suport pentru afișarea culorii în emulatoarele de terminale care acceptă această caracteristică, puțină poziționare cu CSS și chiar un fel de suport JavaScript / ECMAScript. Latura tehnică a tehnologiilor de rețea (cum ar fi suportul SSL) și suportul pentru diverse codificări de text erau deja destul de solide în browserul Links, dar în ELinks unele caracteristici au fost îmbunătățite, iar altele mai dezvoltate. ELinks este un pas înainte în conceptul de browser web pentru consolă, făcând din ELinks cel mai avansat exemplu de implementare a acestuia. Deși Lynx se ține încă destul de bine. Conceptul său de a naviga pe web în modul text, chiar și ca o simplificare, o abordare specială pentru prezentarea și manipularea informațiilor și nu se străduiește să semene cu mediul browserelor grafice, funcționează destul de bine. Documentele web devin din ce în ce mai complexe de implementat și (cu toate limitările inevitabile ale navigării paginilor web în modul text) de a urma o anumită cale în manipularea lor, aceasta este o modalitate de a concura cu încercarea de a fi ca un element de bază, grafic complet. browsere web desktop prezentate. Aceasta este analogă cu dilema browserelor pentru dispozitive mobile cu ecrane mici: încercați să imiteți computerele cu ecrane mari sau transformați documentele web afișate pentru a se potrivi cu caracteristicile mediului. Browserele de text sunt folosite mai ales pe computere cu ecrane mai mult sau mai puțin mari, astfel încât există mai puține restricții de dimensiune și mai multe tentații: Lynx - rămâneți discret, ELinks - mergeți dincolo. Caracteristici browser web bazat pe text. Versiuni pentru Linux, alte sisteme *nix, Windows, DOS, OS/2, BeOS și altele. HTML (inclusiv tabele și cadre). CSS și JavaScript foarte limitat (Aflați mai multe). Suport pentru palete de 16, 88 sau 256 de culori în emulatorii/consola de terminale care acceptă această caracteristică. Suport pentru file, descărcări în fundal cu notificare privind sfârșitul descărcării. Suport mouse. Editarea câmpurilor de text ale formularelor de pagini web într-un editor de text extern. Taste rapide pentru URL. Suport pentru scripturi în Perl, Lua, Guile, Ruby.
imapsync. Transfer prin e-mail
Transferarea e-mailurilor de la un server IMAP la altul utilizând imapsync [ 1 ] / Linux, linie de comandă: 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 - Există un site example.com și o cutie poștală [email protected] pe serverul unei companii de hosting. Server IMAP: imap.this.com. Serverul IMAP acceptă SSL. — Site-ul example.com este transferat către o altă gazdă. În consecință, cutia poștală [email protected] cu tot cuprinsul acestuia si cu pastrarea structurii folderelor. Server IMAP al altui furnizor de găzduire: imap.another.com. Serverul IMAP acceptă SSL. 1. Creați o cutie poștală [email protected]și parola acestuia pe serverul companiei de găzduire unde are loc transferul. 2. Creați două fișiere text în folderul /home/user/imap/: passwordfile1 cu parola pentru căsuța poștală de pe primul server IMAP și passwordfile2 cu parola pentru căsuța poștală de pe al doilea server IMAP. 3. chmod 600 /home/user/imap/passwordfile1 4. chmod 600 /home/user/imap/passwordfile2 5. Instalați imapsync 6. Rulați imapsync cu parametri și date adecvate Imapsync migrează e-mailul cu structura de foldere de la imap.this.com imap .altul.com. SSL este folosit pentru a cripta datele în tranzit, iar parolele sunt stocate în fișiere protejate prin setarea permisiunilor chmod 600. Transferul de e-mail între două servicii de e-mail poate necesita utilizarea unor opțiuni imapsync suplimentare [ 2 ]. De exemplu, atunci când migrați conținutul unei căsuțe poștale Gmail.com în alta, trebuie să specificați „--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 ] Un caz simplu și obișnuit: conținutul unei căsuțe de e-mail este transferat în alta - goală, situată pe un alt server. Dar pot exista situații mai complexe: migrarea e-mailului Gmail la Google Apps și mutarea la Google Apps cu imapsync. [ 2 ] Alte opțiuni: Migrați e-mailurile de la un server la altul cu imapsync și imapsync(1) - pagina de manual Linux.
Imagine de fundal HTML
Lecția 10 CSS. Alinierea imaginii la centru
Imagine HTML, inserarea unei imagini în codul paginii
Etichetă HTML responsabilă pentru afișarea imaginii
- Imagine HTML poate fi orice imagine în format PNG, JPEG și GIF.
- Codul HTML al imaginii definit de tag.
- Imagine HTML poate fi fundalul unei pagini web.
- Imagine HTML poate fi definit ca un hyperlink.
- Inserarea unei imagini în codul HTML al unei pagini
- Distanța dintre imagine și text pe orizontală și pe verticală
- Definirea unei imagini de fundal în HTML
- Imagine HTML - link și cod care o definește
- Plasați o imagine HTML în centrul unei pagini sau al unui bloc
În folderul sau în orice altul unde aveți fișierul, plasați imaginea cu extensia, spuneți, denumiți-o cum doriți, de exemplu, .
Inserarea unei imagini în codul HTML al unei pagini:
Eticheta este neîmperecheată. Atenție la felul în care se închide.
Atribute și valori
- - obligatoriu, indică sursa imaginii.
- - definește un text alternativ, un comentariu pe care un robot de căutare îl citește atunci când analizează conținutul unei pagini web. De asemenea, trebuie marcat.
- - specifică lățimea imaginii în pixeli.
- - specifică înălțimea imaginii în pixeli.
Specificați dimensiunile reale - astfel încât să păstrați calitatea originală a imaginii.
Trei formate de imagine sunt aplicabile pentru dezvoltarea web: PNG (.png), JPEG (.jpg) și GIF (.gif). Adobe Photoshop este un instrument specializat pentru crearea de grafică pentru site-uri web. Poate fi folosit pentru a converti un format de imagine în altul.
Imagine HTML | Indentări orizontal și vertical
sau distanța orizontală și verticală dintreimagine și text
Vedeți rezultatul într-o fereastră nouă: imagine de fundal HTML
Atributele sunt acoperite în tutorialele CSS.
Inserarea unei imaginiși ordinea acesteia → → vezi aici.
Imagine HTML - link
Exemplu de cod:
Vedeți rezultatul într-o fereastră nouă: imagine HTML centrată pe pagină
La ce ar trebui să se acorde atenție aici? → În primul rând, faptul că dimensiunile sunt indicate - acest lucru accelerează încărcarea imaginii. În al doilea rând, atributele sunt precizate, ceea ce este, de asemenea, foarte de dorit, chiar dacă nu există un text alternativ. În primul caz a fost definită centrarea HTML parametru, iar în al doilea - folosind includerea liniară a foilor de stil în cascadă.
Data publicării: octombrie 2009 | Actualizare: august 2014
Lecția 9 
Imagine HTML Lecția 11
Cum să aliniezi centrul unei imagini cu centrul unui div?
De mult timp, au existat diverse metode de centrare a imaginilor folosind CSS. Implementarea acestor metode a fost puternic influențată de Internet Explorer 5. Dar astăzi, puțini oameni sunt interesați de această versiune a browserului, așa că puteți scăpa de codurile inutile.
Anterior, IE5 și IE5.5 dictau propriile reguli - pentru a alinia un element de pagină la centru, trebuie să utilizați o proprietate CSS. Și pentru a centra, de exemplu, o imagine, trebuie să o plasați într-un bloc suplimentar:
Pentru acest bloc suplimentar i se atribuie proprietatea CSS corespunzătoare:
Toate acestea au fost necesare deoarece Internet Explorer din versiunile a cincea nu suportă proprietatea indentărilor externe care existau deja și era suportată de alte browsere, care atribuie automat aceeași distanță la stânga și la dreapta elementului aliniat din mers. Metoda de mai sus este încă în uz.
Dar IE5 și IE5.5 sunt în trecut, astfel încât codul HTML poate fi făcut mai simplu și mai elegant:
Absența blocurilor suplimentare inutile se realizează datorită CSS-ului corespunzător:
Proprietatea atribuie caracteristica unui element bloc imaginii, ceea ce elimină necesitatea utilizării sau în jurul imaginii. Apoi, declarația setează umpluturile de sus și de jos la zero, iar cele din stânga și dreapta la o valoare egală automat, care aliniază imaginea la centru.
Trebuie să atribuiți diferite umpluturi de sus și de jos? Nici o problemă. Nu uitați de abrevieri:
Din păcate, spre deosebire de cazurile de aliniere a imaginilor la marginile din stânga și din dreapta (și), nu există nicio modalitate de a înfășura textul în jurul unei imagini centrate folosind metode standard. Desigur, dacă este foarte important, atunci realizabil.
De asemenea, dacă imaginea este și o legătură, atunci zona de legătură se extinde pe toată lățimea blocului, indiferent de lățimea imaginii. În unele cazuri, acesta este un dezavantaj.
Metoda de aliniere de mai sus este cea mai potrivită pentru site-urile care folosesc imagini în interiorul textului (știri, articole). Pentru galeriile foto, desigur, există modalități mai sofisticate de a alinia imaginile.
| Internet Explorer | Crom | Operă | safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 9.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
O sarcină
Aliniați fotografia cu legenda la centrul orizontal al paginii web.
Soluţie
Ilustrațiile textului sunt adesea centrate pe pagina web, cu text înainte și după imagine. O astfel de aranjare a elementelor vă permite să spargeți un text mare în blocuri semantice și să atrageți atenția asupra desenelor.
Să ne uităm mai întâi la centrarea imaginii. Pentru a face acest lucru, adăugați proprietatea de stil text-align la selectorul P cu centrul valorii. În același timp, eticheta trebuie plasat în interiorul unui paragraf (tag
). Pentru a preveni centrarea tuturor paragrafelor din pagină, vom introduce propria noastră clasă fig și vom efectua toate acțiunile cu ea. Exemplul 1 arată cum se face acest lucru.
Exemplul 1: Utilizarea text-align
HTML5CSS 2.1IECrOpSaFx
Rezultatul acestui exemplu este prezentat în Fig. unu.
Orez. 1. Imagine aliniată la centrul paginii web
De asemenea, puteți adăuga o legendă la fotografie. Textul trebuie plasat imediat după imagine și centrat în mod similar. Totul este simplu aici, din nou vom folosi clasa noastră, dar o vom aplica deja etichetei
Exemplul 2. Legendă
HTML5CSS 2.1IECrOpSaFx
Rezultatul acestui exemplu este prezentat în Fig. 2.
Cum să aliniezi o fotografie la centrul unei pagini web?
2. Semnătura sub figură
Eticheta este folosită pentru blocul foto
CSS imagine centrală
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.
Centrarea orizontală a unei imagini folosind CSS. Exemplu:
HTML/XHTML. Codul:
<div clasa=" exemplu«>
<imgsrc=» imagine.jpg» alt=» Imagine» / >
</ div>
.exemplu(poziție: relativ; stânga: 0px; sus: 0px; înălțime: automat; lățime: 100%; float: stânga; umplutură: 10px; chenar: 1px #ccc solid; fundal: #fafafa;)
.exempluimg(afișare: bloc; marjă: 0 auto;)
Proprietățile CSS ale containerului (în acest caz exemplu) poate fi foarte diferită, alinierea la centru a imaginii este creată folosind stiluri care sunt direct legate de imagine: .exempluimg(afisare: bloc; margine: 0 auto;).
Aliosque subditos et thema
CSS imagine centrală
Centrarea orizontală a unei imagini folosind CSS. Exemplu: HTML / XHTML.
Alinierea la centru a unei imagini în HTML și CSS
Codul:
[ 1 ] Și, de asemenea, în Opera 4.0+, dacă nu este folosită prescurtarea CSS. Adică, dacă codul CSS este sub forma .example img (afișare: bloc; margin-left: auto; margin-right: auto;). [ 2 ] De asemenea, în Netscape 6.01+, Mozilla 0.6+. [ 3 ] De asemenea, în Netscape 6.01+, Mozilla 0.6+.
eLink-uri. Utilizare
Salt la pagini: ELinks - browser web bazat pe text sau consolă. Descriere: caracteristici, capturi de ecran, unde se descarcă. eLink-uri. Configurare — Cum să configurați ELinks. Lansarea ELinks vă permite să faceți aproape tot ce puteți prin utilizarea meniurilor sale. Deci, ceea ce urmează este doar despre cum să puneți ELinks în funcțiune și despre cum să faceți alte câteva lucruri ca exemplu. 1) Cum să rulați ELinks - ELinks poate fi rulat într-un mediu GUI (X Windows, MS Windows, etc.) sau cu o interfață de linie de comandă. În primul caz, trebuie lansat mai întâi un emulator de terminal/consolă: xterm, rxvt, consola Win32 și altele: ELinks (Linux) - Pentru a porni ELinks, introduceți comanda: elinks - Pentru a porni ELinks, deschiderea unui document web de pe Internet : elinks Web - adresa documentului web - Pentru a lansa ELinks accesând hard disk pentru a răsfoi folderele locale: elinks file:/// sau: elinks / - Pentru a lansa ELinks deschizând un folder local: elinks file:///home/user1/ sau : elinks /home/user1/ - Pentru a rula ELinks care deschide un fișier local: elinks file:///home/user1/document1.htm sau: elinks /home/user1/document1.htm ELinks (Windows) - Pentru a rula ELinks, introduceți comanda: elinks - Pentru a lansa ELinks care deschide un document web de pe Internet: elinks Web document web address - Pentru a lansa ELinks accesând hard disk pentru a răsfoi folderele locale: elinks file:/// - Pentru a rula ELinks deschizând folderul local: elinks file://c/home/user1/ - Ce pentru a rula ELinks deschizând un fișier local: elinks file://c/home/user1/document1.htm 2) Pentru a accesa meniul ELinks: Apăsați Esc de pe tastatură 3) Pentru a deschide un document web într-un ELinks care rulează deja: Apăsați g pe tastatură sau Esc —> Fișier —> Mergeți la URL —> [ Introduceți adresa web ] —> Enter 4) Înapoi: Tasta săgeată stânga de pe tastatură sau Esc —> Fișier —> Înapoi 5) Deschideți linkul într-un fundal nou filă: Shift — t sau Esc —> Link —> Deschideți într-o filă nouă în fundal 6) Accesați fila următoare: Shift —> sau Esc —> Vizualizare —> Fila următoare 7) Închideți fila: Apăsați c de pe tastatură sau Esc —> Vizualizare —> Închide fila 8) Transmite URI-ul aplicației externe atunci când ELinks rulează într-un emulator de terminal.
data: 2010-09-07
Într-un document html, imaginile sunt aliniate orizontal, vertical și centrat.
Alinierea orizontală a imaginii
Pentru a controla imaginea pe orizontală, utilizați atributul align="".
Aliniați imaginile la centru în HTML
În sensul său, indicați stânga dacă doriți să aliniați imaginea în partea stângă a paginii sau valoarea dreapta- pe drumul cel bun. În mod implicit, imaginea este întotdeauna aliniată la stânga paginii:
Alinierea verticală a imaginii
Cu același atribut align="" puteți controla poziția imaginii și pe verticală. Pentru a face acest lucru, în valoarea sa trebuie să scrieți top pentru alinierea de sus, mijloc- la mijloc si partea de jos- de-a lungul marginii inferioare:
Notă: înregistrare imagini/fotografie.jpgînseamnă că imaginea nu se află într-un singur director, ci în folderul imagini.
Alinierea imaginii la centrul paginii
În plus, imaginea poate fi centrată. Pentru a face acest lucru, înfășurați eticheta de imagine într-o etichetă pereche
1.1 Introducere în html
1.2 Structura documentului html
2.1 Paragraf în html
2.2 Titluri în html
2.3 Citate și comentarii în html
2.4 Spații albe și etichete break în html
3.1 Lista numerotată html
3.2 Lista cu marcatori
3.3 Liste imbricate
4.1 Selectarea textului html
4.2 Font și dimensiunea fontului
4.3 Schimbați culoarea textului în html
4.4 Chenarele paginii și fundalul
5.1 Inserarea unei imagini pe site
Îmi place să rezolv sarcini de layout interesante și, ținând cont de experiența mea în acest domeniu, puțin mai mult de 5 ani, astfel de sarcini nu apar des.Recent m-am confruntat cu mai multe probleme ca aceasta:
1. Centrarea imaginii în centrul paginii și micșorarea acesteia când browserul este redimensionat.
În principiu, atât prima cât și a doua sarcină pot fi rezolvate folosind puțin javascript, dar am vrut să o fac inteligent prin html + css.O altă sarcină a fost ușurată de faptul că site-ul pe care va fi folosit a fost dezvoltat modern, iar suportul a fost limitat la ie9+, FF, Chrome, Safari, Opera.
2. Centrarea absolută a imaginii indiferent de dimensiunea ferestrei browserului.
Dar cu asta a trebuit să mă chinuiesc. Ideea originală a fost aceasta:
.wrapper( depășire: ascuns; poziție: fix; sus: 0; dreapta: 0; jos: 0; stânga: 0; ) .item( poziție: absolut; sus: 50%; stânga: 50%; afișare: bloc inline ; ) .item img( marja: -50% 0 0 -50%; )
Ideea s-a bazat pe următoarea logică:
- unitate exterioară, .înveliș, intins pe toata latimea si inaltimea libere.
- Unitate interioară, .articol, ia lățimea și înălțimea imaginii care se află în interior, deoarece este în bloc; și este setat cu colțul din stânga sus la centrul blocului părinte.
- Îndepărtarea imaginii într-o margine în minus, care trebuia doar să o alinieze exact în centru .înveliș
Am decis acest lucru amintindu-mi transformarea, sau mai degrabă, funcția sa de translație, care, așa cum spune, schimbă afișarea obiectului, dar părăsește locul unde a fost. Și s-a dovedit că prin înlocuirea marjei imaginii cu transform: translate(-50%, -50%); problema se rezolva imediat. Și iată ce s-a întâmplat la sfârșit:
*( padding: 0; margin: 0; vertical-align: top; ) html, body( lățime: 100%; înălțime: 100%; ) .wrapper( overflow: ascuns; poziție: fix; sus: 0; dreapta: 0 ; jos: 0; stânga: 0; ) .item( poziție: absolut; sus: 50%; stânga: 50%; afișare: inline-block; ) .item img( -webkit-transform: translate(-50%, - 50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); )
PS: Nu sunt sigur dacă acestea sunt singurele opțiuni sau nu. Nu cred că aceste opțiuni sunt pentru toată lumea.
Dar știu sigur că, dacă vor apărea în cazul meu, atunci vor exista oameni pe care îi pot fi de mare ajutor în sarcinile lor. În plus, dacă adăugați puțin cod, puteți adăuga cârje pentru IE mai vechi, nu l-am adăugat pentru că nu am vrut să stric codul curat de dragul browserelor foarte învechite.
ZY2: Criticile și sfaturile sunt foarte binevenite. Vă mulțumesc că ați citit până la capăt.
Etichete: html, css, css3, imagine, imagine, imagine, aliniere, vertical-align
O sarcină
Aliniați fotografia cu legenda la centrul orizontal al paginii web.
Soluţie
Ilustrațiile textului sunt adesea centrate pe pagina web, cu text înainte și după imagine. O astfel de aranjare a elementelor vă permite să spargeți un text mare în blocuri semantice și să atrageți atenția asupra desenelor.
Să ne uităm mai întâi la centrarea imaginii. Pentru a face acest lucru, adăugați proprietatea de stil text-align la selectorul P cu centrul valorii . În același timp, eticheta trebuie plasat în interiorul unui paragraf (tag
). Pentru a preveni centrarea tuturor paragrafelor din pagină, vom introduce propria noastră clasă fig și vom efectua toate acțiunile cu ea. Exemplul 1 arată cum se face acest lucru.
Exemplul 1: Utilizarea text-align
HTML5 CSS 2.1 IE Cr Op Sa Fx
Text înainte de imagine
Text după imagine
Rezultatul acestui exemplu este prezentat în Fig. unu.
Orez. 1. Imagine aliniată la centrul paginii web
De asemenea, puteți adăuga o legendă la fotografie. Textul trebuie plasat imediat după imagine și centrat în mod similar. Totul este simplu aici, din nou vom folosi clasa noastră, dar o vom aplica deja etichetei
Exemplul 2. Legendă
HTML5 CSS 2.1 IE Cr Op Sa Fx
Rezultatul acestui exemplu este prezentat în Fig. 2.
Orez. 2. Semnătura sub imagine
Eticheta este folosită pentru blocul foto
