Meniul
AcasăRețea socială

Alinierea imaginii la centrul html. Utilizarea CSS pentru a centra imagini și alte obiecte HTML

Utilizarea CSS este cea mai mare în cel mai bun mod posibil centrarea imaginilor, a blocurilor de text și chiar a întregului design de pagini web. Majoritatea proprietăților pentru HTML align au fost disponibile în CSS începând cu versiunea 1.0. Funcționează excelent cu CSS3 și browserele web moderne:

Utilizarea CSS pentru centrare în HTML

Centrarea cu folosind CSS poate fi o provocare pentru noii designeri web. Există multe modalități de a face acest lucru, dar nu toate se aplică fiecărui element.

CSS poate fi folosit pentru a:

  • Textul central;
  • Centrați un element de bloc (cum ar fi un div);
  • Centrați imaginea;
  • Centrați vertical un bloc sau o imagine.

Cu ani în urmă, designerii web puteau folosi acest lucru pentru a centra imaginile și textul. Dar această etichetă a fost acum retrasă și nu mai este acceptată. browsere moderne. Acest lucru se datorează faptului că site-urile web moderne trebuie să aibă o separare clară a structurii și stilurilor.

HTML este folosit pentru a crea structura, iar CSS definește stilurile. Deoarece centrarea este o caracteristică vizuală, se realizează folosind stiluri în cascadă.

Centrarea textului cu CSS

Cel mai simplu mod este să centrați textul pe o pagină web. Pentru a face acest lucru, aveți nevoie de o singură proprietate: HTML aliniere text :

p.center ( text-align: center; )

Cu această linie de cod, fiecare paragraf cu clasa centrală va fi centrat orizontal în cadrul elementului său părinte.

Aplicații ale acestei clase:

Acest text este centrat.

Când centrați textul folosind proprietatea text-align, rețineți că acesta va fi centrat în containerul care îl conține și nu neapărat în raport cu întreaga pagină.

Centrarea blocurilor de conținut folosind CSS

Blocurile sunt orice elemente dintr-o pagină care sunt setate ca elemente la nivel de bloc și au o lățime specifică. Adesea, astfel de blocuri sunt create folosind .

Cea mai obișnuită modalitate de a centra casetele este să setați umplutura din stânga și din dreapta la automat:

div.center (marja: 0 auto; lățime: 80em; )

Aceasta este o formă scurtă proprietățile marginii va seta umplutura de sus și de jos la 0, iar umplutura din stânga și din dreapta va folosi valoarea auto. Aceasta ocupă tot spațiul disponibil și îl împarte uniform între cele două părți, ceea ce este echivalent cu un HTML div align .

Aplicație în HTML:

Întregul bloc este centrat, dar textul din interior este aliniat la stânga.

Deoarece blocul are o lățime specifică, acesta va fi centrat în elementul care îl conține. Textul din acest bloc nu va fi aliniat la centru, ci la stânga. Pentru că în mod implicit în browsere, textul este aliniat la stânga. Pentru ca textul să fie și aliniat la centru, utilizați proprietatea text-align pe care am descris-o mai devreme.

Centrarea imaginilor folosind CSS

Majoritatea browserelor vor afișa imagini centrate atunci când se utilizează Proprietăți HTML aliniere text . Dar nu ar trebui să te bazezi pe această metodă, deoarece nu este recomandată de W3C.

În schimb, ar trebui să spuneți în mod explicit browserului că imaginea este un element la nivel de bloc. Iată codul CSS pentru asta:

img.center ( afișare: bloc; margine-stânga: auto; margine-dreapta: automat; )

Iată codul HTML pentru imaginea care trebuie centrată:

De asemenea, este posibil să centrați obiecte folosind CSS inline:

Centrarea verticală a elementelor folosind CSS

HTML alinierea verticală a fost întotdeauna o problemă în designul web, dar odată cu lansarea specificației CSS Flexible Box Layout Module în CSS3, există o soluție la această problemă.

Alinierea verticală funcționează la fel ca alinierea orizontală descrisă mai sus. Proprietatea vertical-align cu valoarea middle :

Vcenter ( aliniere verticală: mijloc; )

Dezavantajul acestei abordări este că nu toate browserele acceptă CSS FlexBox. Dacă există probleme cu versiunile anterioare ale browserelor, W3C recomandă centrarea textului vertical într-un container utilizând următoarea metodă:

  • Plasați elementele pe care doriți să le centrați în interiorul unui element container, cum ar fi un div ;
  • Setați o înălțime minimă pentru elementul container;
  • Declararea unui element container;
  • Setați alinierea verticală HTML la mijloc.

De exemplu:

Vcenter (înălțime minimă: 12 em; afișare: celulă-tabel; aliniere verticală: mijloc; )

Cod HTML:

Acest text este centrat vertical în casetă.

Centrare verticală şi versiuni timpurii Internet Explorer

Există mai multe moduri de a face IE să centreze obiectele și apoi să le folosească comentarii condiționate. Vești bune este că, din cauza deciziei recente a Microsoft de a nu mai suporta versiuni mai vechi de IE, aceste browsere ar trebui să dispară în curând, făcându-le mai ușor pentru designeri web să folosească abordări moderne de marcare precum CSS FlexBox.

Traducerea articolului „Utilizați CSS pentru a centra imagini și alte obiecte HTML” a fost pregătită de echipa prietenoasă a proiectului.

Rău Bun

Sarcină

Aliniați fotografia și legenda pe orizontală pe pagina web.

Soluţie

Ilustrațiile care însoțesc textul sunt adesea centrate pe pagina web, textul apărând înainte și după imagine. Acest aranjament de elemente vă permite să rupeți text mare pe blocuri semantice și atrageți atenția asupra desenelor.

Mai întâi, să ne uităm la alinierea imaginii la centru. Pentru a face acest lucru, adăugați o proprietate de stil de aliniere a textului cu centrul valorii la selectorul P. În acest caz, eticheta trebuie să fie situat în interiorul unui paragraf (tag

). Pentru a preveni ca toate paragrafele de pe pagină să devină aliniate la centru, să introducem clasa noastră fig și să efectuăm 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

Aliniați fotografia la centru .fig ( text-align: center; /* Aliniați la centru */ )

Text înainte de imagine

Text după imagine

Rezultat acest exemplu prezentată în fig. 1.

Orez. 1. Imagine centrată pe pagina 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, să ne folosim din nou clasa, dar să o aplicăm etichetei. Pentru a face textul semnăturii diferit ca aspect față de paragrafele obișnuite, faceți-l în cursiv și evidențiați-l într-o culoare diferită (exemplul 2).

Exemplul 2. Legendă imagine

HTML5 CSS 2.1 IE Cr Op Sa Fx

Fotografie cu legenda .fig ( afișare: bloc; /* Element bloc (pentru browsere mai vechi) */ text-align: center; /* Center alignment */ font-style: italic; /* Italic */ margin-top: 0; /* Marja de sus */ margin-bottom: 5px; /* Marja de jos */ culoare: #666; /* Culoarea legendei */ ) document.createElement("figure"); document.createElement("figcaption"); Omul cavernelor face foc. Dar ce este acea suprafață lunară din fundal? Nu, nu este atât de simplu.

Rezultatul acestui exemplu este prezentat în Fig. 2.

Orez. 2. Semnătura sub imagine

Pentru un bloc cu o fotografie se folosește eticheta, iar pentru legendă se folosește eticheta. Versiunile mai vechi de IE nu înțeleg aceste etichete, așa că un mic script este adăugat special pentru ele.

Îmi place să rezolv probleme de aspect interesante și, având în vedere experiența mea în acest domeniu, puțin peste 5 ani, astfel de probleme nu apar des.
Recent, am întâlnit mai multe astfel de probleme simultan: 1. Centrarea imaginii în centrul paginii și comprimarea acesteia la redimensionarea browserului. În principiu, atât prima cât și cea de-a doua sarcină pot fi rezolvate folosind un javascript mic, dar am vrut să o fac cu înțelepciune folosind html+css.
Sarcina a fost ușurată și de faptul că site-ul pe care acesta va fi folosit a fost dezvoltat ca unul modern, iar suportul a fost limitat la ie9+, FF, Chrome, Safari, Opera. 2. Centrare absolută imagine indiferent de dimensiunea ferestrei browserului. Dar a trebuit să mă chinuiesc cu asta. Ideea inițială 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ă:

  • Un bloc exterior, .wrapper, întins pe toată lățimea și înălțimea liberă.
  • Blocul interior, .item, ia lățimea și înălțimea imaginii care se află în interior, deoarece este inline-block; și este plasat cu colțul din stânga sus în centrul blocului părinte.
  • Plasarea imaginii într-o margine în minus, care ar fi trebuit să o alinieze exact la centrul .wrapper-ului
Dar o idee complet logică a fost întreruptă de o dependență și mai logică. Umplutura de 50% se calculează pe jumătate din înălțimea sau lățimea părintelui. În cazul meu, lățimea și înălțimea părintelui s-au bazat pe lățimea și înălțimea imaginii, iar după ce imaginea a fost deplasată cu -50%, părintele, .item, a fost redus cu același 50% și cercul a fost redus. închis.

Am decis acest lucru amintindu-mi transformarea, sau mai exact funcția sa de translație, care pare să schimbe afișarea unui obiect, 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 a ieșit 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 potrivite pentru toată lumea.
Dar știu sigur că dacă s-au potrivit în cazul meu, atunci vor exista oameni pe care probabil le vor fi de mare ajutor în sarcinile lor. În plus, dacă adăugați puțin la 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.
PS2: 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

Caracteristici: Setări: Utilizare: Capturi de ecran: Unde să descărcați ELinks este o încercare de a crea un browser web modern bazat pe text. Proiectul a pornit din codul browserului Links. Scopul lui la început a fost să încerce să implementeze mai multe caracteristici care lipseau mai mult sau mai puțin/slabele în Link-uri. De unde vine „E” din „ELinks” - „Experimental” / „Experimental”. În urma succesului acestor eforturi, „E” a ajuns să fie înțeles ca „Extins” sau „Îmbunătățit”. Când browserul Link-uri a ajuns până la un punct completitudine, superioară în unele privințe celui mai avansat web de atunci browser Lynx, dezvoltarea sa ulterioară a fost la o răscruce: trecerea către afișarea grafică și mai departe dincolo de textul pur sau navigarea avansată pe web folosind interfață text utilizator dincolo de limitele atinse mai întâi de Lynx și apoi de Links - rămânând în același timp 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 rămâne un model foarte bine dezvoltat software de tip propriu. Autorii săi au conceput și implementat un concept foarte atent și amănunțit de navigare pe web bazată pe text, cu abstracții și convenții speciale care au ajutat la depășirea multor limitări și dezavantaje ale navigării pe web bazate pe 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 și s-a schimbat. Au apărut noi oportunități. Multe dintre aceste caracteristici au fost implementate în Links, dar următoarele modificări în reprezentare vizuala informații în documente web - de la mai mult HTML la mai multe CSS - au fost deschise drumuri noi; chiar dacă rămâneți în modul text. Și încearcă să implementeze acest lucru în ELinks: suport pentru afișarea culorii în emulatoarele de terminale care acceptă această caracteristică, puțină poziționare folosind CSS și chiar un fel de suport JavaScript / ECMAScript. Partea tehnică tehnologii de rețea(cum ar fi suportul SSL) și suport diferite codificări textul era deja destul de robust în browserul Link-uri, 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 își menține încă destul de bine poziția. Conceptul său de vizualizare a paginilor web în modul text, chiar dacă este o simplificare, o abordare specială pentru prezentarea și manipularea informațiilor, mai degrabă decât încercarea de a semăna cu mediul browserelor grafice, funcționează destul de bine. Documentele web devin din ce în ce mai sofisticate și (cu toate limitările inevitabile ale vizualizării paginilor web în modul text) urmează o anumită cale în manipularea lor într-un mod în care rivalii încearcă să fie ca browserele web mainstream, grafice, cu funcții complete. computere desktop. Aceasta este similară cu dilema browserelor pentru dispozitive mobile vis display-uri mari: Încercați să imitați computerele cu ecrane mari sau să transformați documentele web afișate pentru a se potrivi cu caracteristicile mediului. Browsere de text folosit mai ales pe computere cu mai mult sau mai puțin display-uri mari, așa că există mai puține restricții de dimensiune și mai multe tentații: Lynx pentru a rămâne discret, ELinks pentru a depăși limitele. Posibilitati Text web browser. Versiuni pentru Linux, alte sisteme *nix, Windows, DOS, OS/2, BeOS și altele. HTML (inclusiv tabele și cadre). CSS și JavaScript foarte limitat (Mai multe detalii). A sustine paleta de culoriîn 16, 88 sau 256 de culori pe emulatoare/console de terminale care acceptă această caracteristică. Suport pentru file, descărcări în fundal cu notificare când descărcarea este finalizată. Suport mouse. Editarea câmpurilor de text ale formularelor de pagini web într-un mod extern editor de text. Comenzi rapide pentru adrese URL. Suport pentru scripturi în Perl, Lua, Guile, Ruby.

Imapsync. Transfer mail

Transferați e-mailuri 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 anumite companii de hosting. Server IMAP: imap.this.com. Serverul IMAP acceptă SSL. — Site-ul web example.com este transferat către un alt hoster. În consecință, cutia poștală [email protected] cu tot continutul acestuia si mentinerea structurii folderelor. Serverul 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 pentru aceasta pe serverul companiei de găzduire unde are loc transferul. 2. Creați două fisier textîn folderul /home/user/imap/: passwordfile1 cu parola cutiei poștale 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 parametrii și datele adecvați Imapsync transferă e-mailuri menținând în același timp structura folderului din imap.this .com la imap.another.com. SSL este folosit pentru a cripta datele în tranzit, iar parolele sunt stocate în fișiere protejate prin setarea permisiunilor la chmod 600. Transferați e-mailuri între două servicii E-mail poate necesita utilizare parametri suplimentari[ 2 ] imapsync. De exemplu, când transferaț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 poștale de e-mail este transferat într-o alta, goală, situată pe un alt server. Dar pot exista situații mai complexe: Gmail la aplicatii Google Migrarea e-mailului ș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.

fundal Imagine HTML Lecția 10. CSS. Alinierea imaginii la centru

Imagine HTML, inserarea unei imagini în codul paginii

Etichetă HTML responsabilă pentru afișarea imaginii

  • O imagine HTML poate fi orice imagine în format PNG, JPEG și GIF.
  • Codul HTML al imaginii este determinat de etichetă.
  • O imagine HTML poate fi fundalul unei pagini web.
  • O 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 definesc
  • Plasați imaginea HTML în centrul paginii sau al blocului

    • În folderul sau în orice altul în care aveți fișierul, plasați o imagine cu o extensie, să spunem, numiți-o cum doriți, de exemplu, .

    Inserarea unei imagini în codul HTML al paginii:

    Etichetă - neîmperecheată. Atenție la modul în care este închis.

    Atribute și valori

    • - obligatoriu, indică sursa imaginii.
    • - definește text alternativ, un comentariu care citește robot de căutare atunci când se analizează conținutul unei pagini web. De asemenea, trebuie desemnat.
    • - definește lățimea imaginii în pixeli.
    • - definește înălțimea imaginii în pixeli.

    Indicați dimensiunile reale - în acest fel veți menține calitatea originală a imaginii.

    Pentru dezvoltare web Sunt aplicabile trei formate de imagine: 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 | Margini orizontale și verticale

    sau distanța orizontală și verticală dintre imagine și text

    Vedeți rezultatul într-o fereastră nouă: Imagine de fundalîn HTML

    Atributele sunt acoperite în tutorialele CSS.

    Inserarea unei imagini și ordinea acesteia → → vezi aici.

    Imagine HTML - link

    Exemplu de cod:

    Vizualizați rezultatul într-o fereastră nouă: imagine HTML centrată pe pagină

    La ce trebuie să fii atent aici? → În primul rând, faptul că dimensiunile sunt indicate - acest lucru accelerează încărcarea imaginii. În al doilea rând, sunt specificate atributele, ceea ce este, de asemenea, foarte de dorit, chiar dacă nu există un text alternativ. În primul caz, centrarea a fost determinată de un parametru HTML, iar în al doilea, de includerea liniară a foilor de stil în cascadă.

    Data publicării: octombrie 2009 | Actualizare: august 2014

    Lecția 9. Fundal HTML Imagine HTML Lecția 11. Imagine și text HTML

    Cum să aliniezi centrul unei imagini cu centrul unui div?

    Există de mult timp metode diferite centrarea imaginilor folosind CSS. Implementarea acestor metode a fost foarte influențată de Internet Explorer 5. Dar astăzi puțini oameni sunt interesați de această versiune a browserului, astfel încât să puteți scăpa de codurile inutile.

    Anterior, IE5 și IE5.5 dictau propriile reguli - pentru a centra un element de pagină, trebuie să utilizați o proprietate CSS. Și pentru a centra, de exemplu, o imagine, trebuie să o plasați în interior bloc suplimentar:

    Acestui bloc suplimentar i se atribuie proprietățile CSS corespunzătoare:

    Toate acestea au fost necesare deoarece versiunile a cincea de Internet Explorer nu acceptă o proprietate care exista deja și este acceptată de alte browsere marginile, care atribuie automat aceeași distanță la stânga și la dreapta elementului care este aliniat. Metoda de mai sus este încă în uz.

    Dar IE5 și IE5.5 sunt deja un lucru din 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 o caracteristică imaginii element bloc, care elimină necesitatea de a utiliza sau în jurul imaginii. Declarația atribuie apoi umpluturile de sus și de jos valoare nulă, iar umpluturile din stânga și din dreapta sunt automat egale cu aceeași valoare, ceea ce aliniază imaginea la centru.

    Trebuie să atribuiți diferite indentări sus si 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 posibilitate metode standardînfășurați textul în jurul unei imagini centrate. Desigur, dacă este foarte important, atunci este 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 descrisă mai sus este cea mai potrivită pentru site-urile care folosesc imagini în interiorul textului (știri, articole). Pentru galeriile foto, desigur, există modalități proprii, 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+
    Sarcină

    Aliniați fotografia și legenda pe orizontală pe pagina web.

    Soluţie

    Ilustrațiile care însoțesc textul sunt adesea centrate pe pagina web, textul apărând înainte și după imagine. Această aranjare a elementelor vă permite să împărțiți textul mare în blocuri semnificative și să atrageți atenția asupra imaginilor.

    Mai întâi, să ne uităm la alinierea imaginii la centru. Pentru a face acest lucru, adăugați o proprietate de stil de aliniere a textului cu centrul valorii la selectorul P. În acest caz, eticheta trebuie să fie situat în interiorul unui paragraf (tag

    ). Pentru a preveni centrarea tuturor paragrafelor de pe pagină, să introducem clasa noastră fig și să efectuăm 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. 1.

    Orez. 1. Imagine centrată pe pagina 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, să ne folosim din nou clasa, dar să o aplicăm etichetei. Pentru a face textul semnăturii diferit ca aspect față de paragrafele obișnuite, faceți-l în cursiv și evidențiați-l într-o culoare diferită (exemplul 2).

    Exemplul 2. Legendă imagine

    HTML5CSS 2.1IECrOpSaFx

    Rezultatul acestui exemplu este prezentat în Fig. 2.

    Cum să centrezi o fotografie pe o pagină web?

    2. Semnătura sub imagine

    Pentru un bloc cu o fotografie se folosește eticheta, iar pentru legendă se folosește eticheta. Versiunile mai vechi de IE nu înțeleg aceste etichete, așa că un mic script este adăugat special pentru ele.

    CSS centrat pe imagine

    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.

    Alinierea pe centru orizontal a unei imagini folosind CSS. Exemplu:

    HTML/XHTML. Cod:

    .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;)

    .example img (afișare: bloc; margine: 0 auto;)

    Proprietățile CSS ale containerului (în acest caz exemplu ) pot fi foarte diferite; centrarea imaginii este creată folosind stiluri legate direct de imagine: .example img (afișare: bloc; margine: 0 auto;).

    Aliosc subditos et theme

    CSS centrat pe imagine

    Alinierea pe centru orizontal a unei imagini folosind CSS. Exemplu: HTML/XHTML.

    Alinierea unei imagini la centrul HTML și CSS

    Cod: CSS. Cod: .exemplu (poziție: relativă; stânga: 0px; sus: 0px; înălțime: automat; lățime: 100%; float: stânga; padding: 10px; chenar: 1px #ccc solid; fundal: #fafafa;) .example img (afișare: bloc; margine: 0 auto;) Proprietățile CSS ale containerului (în acest caz, exemplu) pot fi foarte diferite; alinierea la centru a imaginii este creată folosind stiluri direct legate de imagine: .example img (afișare: bloc ; marja: 0 auto;).

    [ 1 ] Și, de asemenea, în Opera 4.0+, dacă scurt nu este folosit intrare CSS proprietăți. Adică dacă codul CSS este sub forma .example img (afișare: bloc; margin-left: auto; margin-right: auto;). [ 2 ] Și, de asemenea, în Netscape 6.01+, Mozilla 0.6+. [ 3 ] Și, de asemenea, în Netscape 6.01+, Mozilla 0.6+.

    ELink-uri. Utilizare

    Accesați paginile: ELinks - Text sau consola web browser. Descriere: caracteristici, capturi de ecran, unde se descarcă. ELink-uri. Configurare - Cum să configurați ELinks. Rularea ELinks vă permite să faceți aproape tot ce puteți prin utilizarea meniurilor sale. Deci, ceea ce urmează este doar despre cum să rulezi ELinks și, de exemplu, despre cum să faci alte câteva lucruri. 1) Cum să rulați ELinks - ELinks poate fi rulat într-un mediu GUI (X Windows, MS Windows etc.) sau într-o GUI Linie de comanda. În primul caz, trebuie lansat mai întâi emulatorul/consola de terminal: xterm, rxvt, consola Win32 și altele: ELinks (Linux) - Pentru a lansa ELinks, introduceți comanda: elinks - Pentru a lansa ELinks, care deschide un document web din Internet: elinks Web -adresa documentului web - Pentru a lansa accesarea ELinks hard disk pentru a vizualiza folderele locale: elinks file:/// sau: elinks / - Pentru a lansa ELinks, deschizând folderul local: elinks file:///home/user1/ sau: elinks /home/user1/ - Pentru a lansa ELinks, deschizând fișier local: elinks file:///home/user1/document1.htm sau: elinks /home/user1/document1.htm ELinks (Windows) - Pentru a lansa ELinks, introduceți comanda: elinks - Pentru a lansa ELinks, care deschide un document web din Internet: elinks Adresa web a documentului web - Pentru a lansa ELinks accesând hard disk pentru a vizualiza folderele locale: elinks file:/// - Pentru a lansa ELinks deschizând un folder local: elinks file://c/home/user1 / — Pentru lansați 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 în nou filă fundal: Shift - t sau Esc -> Link -> Deschide în filă nouă în fundal 6) Accesați fila următoare: Shift -> sau Esc -> View -> Next fila 7) Închideți o filă: apăsați c de pe tastatură sau Esc -> View -> Close fila 8) Treceți URI aplicație externă 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="".

    Alinierea imaginilor la centru în HTML

    Specificați stânga în valoarea sa dacă doriți să aliniați imaginea la marginea stângă a paginii sau dreapta dacă doriți să o aliniați la marginea dreaptă. În mod implicit, imaginea este întotdeauna aliniată la marginea din stânga a paginii:

    Alinierea verticală a imaginii

    Folosind același atribut align="", puteți controla poziția verticală a imaginii. Pentru a face acest lucru, trebuie să specificați partea de sus în valoarea sa pentru a se alinia de-a lungul marginii de sus, mijloc - în mijloc și de jos - de-a lungul marginii de jos:

    Notă: intrarea images/photo.jpg înseamnă că imaginea nu se află într-un singur director, ci în folderul imagini.

    Alinierea unei imagini la centrul paginii

    În plus, imaginea poate fi centrată. Pentru a face acest lucru, înfășurați eticheta de imagine într-o etichetă asociată:

    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 Wrap în HTML

    3.1 Lista numerotată html

    3.2 Lista cu marcatori

    3.3 Liste imbricate

    4.1 Evidențierea HTML text

    4.2 Font și dimensiunea fontului

    4.3 Schimbarea culorii textului în html

    4.4 Chenarele paginii și fundalul

    5.1 Inserarea unei imagini pe site

    Pe această pagină veți găsi răspunsul la întrebarea cum să centrați o imagine într-un bloc. Soluția prezentată va fi analizată și se vor lua în considerare toate efectele pozitive și negative.

    Așadar, astăzi vom vorbi despre cum puteți orienta o imagine spre centrul blocului, nu numai în raport cu axa orizontală, ci și pe cea verticală.

    Sarcini similare apar tot timpul, de exemplu, un catalog de produse într-un magazin online. Este postată o fotografie a produsului, mai jos sunt câteva informații despre acesta, iar pentru a face totul să pară prezentabil și frumos, pozele sunt centrate în raport cu ambalajul lor. Mai jos este un exemplu din practica reală

    Cel mai adesea, instalarea unei imagini pe o pagină este efectuată de utilizatorul site-ului care utilizează panoul administrativ utilizator. Această opțiune este cel mai probabil, mai ales în cazurile în care despre care vorbim despre magazinele online. Panoul de administrare vă permite să încărcați imagini de orice dimensiune și aproape orice format pe site. În plus, inițial sunt prescrise dimensiuni maxime blocuri și imagini. Astfel, după completarea imaginii, aceasta va fi scalată pentru a se potrivi marimea corecta sau tăiați fragmentele inutile. Când luați în considerare ultima opțiune, aceasta va fi cea mai optimă dacă imaginea este centrată vertical și orizontal.

    Soluție clasică

    Esența soluției general acceptate este efectul proprietăților text-align și vertical-align. La prima vedere, totul pare destul de simplu și logic, dar acest lucru nu este în întregime adevărat.

    Problemă semnificativă și complexitate aceasta metoda Problema este că Internet Explorer preferat al tuturor nu poate funcționa corect cu valoarea tabelului-celulă. Prin urmare, este necesar să scrieți o expresie suplimentară pentru a implementa metoda.

    Și, desigur, cel mai important lucru care ar fi trebuit spus mai întâi. Toate proprietățile specificate trebuie specificate pentru părintele în care va fi plasată imaginea noastră. În cursul raționamentului nostru, am ajuns la următorul cod

    HTML

    < div class = "block" > < div class = "img" > < img width= "200" src= "img4.jpg" > < div class = "text" >Bloc de text

    Bloc ( lățime: 250 px; înălțime: 220 px; margine: 50 px 100 px; text- align: center; fundal: #eee; display: table- cell; vertical- align: middle; html . block img ( /* hack for e6 */ display: block; z- index: expression( /* expresie optimizată care va funcționa numai când pagina se încarcă */ runtimeStyle. zIndex = 1 , this == ((200 / 2 ) - parseInt(offsetHeight) / 2 )< 0 ? style. marginTop= "0" : style. marginTop= (200 / 2 ) - (parseInt(offsetHeight) / 2 ) + "px" ) ; } : first- child+ html . block img { /* хак для ие7 */ display: block; z- index: expression( runtimeStyle. zIndex = 1 , this == ((200 / 2 ) - parseInt(offsetHeight) / 2 ) < 0 ? style. marginTop= "0" : style. marginTop= (200 / 2 ) - (parseInt(offsetHeight) / 2 ) + "px" ) ; } . text { color: c7c7c7; margin- left: 70px; }

    Vedeți captura de ecran de mai jos pentru rezultatul muncii efectuate.

    Solutie alternativa

    Există o altă modalitate de a implementa sarcina, dar această metodă nu îndeplinește cerințele semanticii. Puteți afișa o imagine folosind proprietatea de fundal CSS, în care specificați locația imaginii ca „centru centru”. Acest lucru contrazice regulile semantice, conform cărora o imagine semnificativă din punct de vedere logic ar trebui să fie afișată prin eticheta img.

    Mai jos este codul pentru soluția noastră alternativă

    Bloc ( lățime: 250 px; înălțime: 220 px; marjă: 50 px automat; fundal: url(img4. jpg) #eee centru centru fără repetare; dimensiune fundal: 200 px; afișare: bloc; )

    Ca urmare a utilizării primei sau a doua metode, vom obține același rezultat în browser

    Când se utilizează această din urmă metodă, programatorii experimentați scot codul din imagine de fundalîntr-un document HTML. Acest lucru vă permite să navigați în document și să găsiți rapid un bloc cu imagini. Și arată așa:

    HTML

    < div style= " background:url(img4.jpg) #eee no-repeat center center" >

    Avantajele și dezavantajele metodei

    În comparație cu versiunea clasică, Opțiune alternativă are urmatoarele avantaje:

    • orice restricții sunt eliminate de la părinte (adică un anumit efect de poziționare sau de înfășurare), care sunt necesare pentru funcționarea optimă a metodei;
    • utilizarea expresiei este exclusă;
    • nu este nevoie să setați proprietatea de overflow pentru blocul părinte cu valoarea corespunzătoare pentru a decupa imaginile mari;
    • minimizarea numărului de linii de cod.

    Cu toate acestea, în același timp, metoda are mai multe dezavantaje:

    • nerespectarea regulilor semantice;
    • problema nerezolvată a determinării dimensiunii imaginii.
    Rezumând