În acest articol vom aborda problema alinierii la centru a diverselor elemente html folosind proprietăți css.

Destul de des este nevoie să centrați un div sau să-i aliniați conținutul. Există mai multe moduri de a face acest lucru. Unele metode sunt potrivite pentru alinierea textului, imaginilor etc., dar nu sunt potrivite pentru alinierea blocurilor.

Mai întâi, să ne uităm la opțiunile pentru alinierea conținutului blocului, cum ar fi imagini și text. Această metodă se aplică aproape tuturor elementelor.

În acest caz, totul este simplu - pentru elementul părinte setăm proprietatea text-align cu centrul valorii . Această metodă de centrare a textului folosind CSS este cea mai simplă și mai convenabilă. Pentru o înțelegere mai profundă, voi da un exemplu. Este important de realizat că în acest caz doar conținutul este aliniat la centru.

Cod HTML:

Un text aliniat la centru pentru elementul corpului părinte

Cod CSS:

body (text-align:center;) /*aliniază conținutul corpului la centru*/

Am descoperit cel mai simplu lucru - alinierea textului și imaginilor folosind CSS în centrul paginii.

Acum să trecem la modalități de a alinia elemente precum tipul de bloc (div , table ). În acest caz, vom alinia centrat nu conținutul, ci tabelele, blocurile și paragrafele în sine.

În total, sugerez două opțiuni folosind CSS: utilizarea proprietății margine și utilizarea proprietății poziției c stânga. Este important să rețineți că niciuna dintre aceste metode nu va funcționa decât dacă aveți o lățime fixă ​​pentru element, fie în px, % sau orice altceva.

Astfel, primul pas este să decidem în ce unități și care va fi lățimea elementului pe care dorim să-l aliniem la centru.

Alinierea la centru folosind marginea

Pentru metoda marginii, nu contează dacă setați această lățime în procente sau pixeli. Pentru a centra folosind această metodă, trebuie să setați următoarele valori ale proprietății marginii la 0 auto. Mai precis, pentru umplutura laterală valoarea ar trebui să fie auto, iar pentru partea de sus și de jos puteți seta orice umplutură. Acestea. versiunea extinsă a valorii arată astfel: 0 auto 0 auto sau astfel: 10px auto 5% auto.

Astfel, puteți seta marginile externe pentru partea de sus și de jos a elementului, dar marginile laterale trebuie setate la auto .

Acesta este poate cel mai versatil și convenabil mod de a avea un div sau orice alt element centrat.

Cod HTML:

Cod CSS:

body (text-align:center;) div (padding:10px; color:#FFFFFF;) div.centr ( background:#003300; width:300px; /*lățime fixă ​​în pixeli*/ margin:10px auto 0 auto; / *margini externe, aliniind blocul la centru și indentând partea de sus cu 10 px*/ ) div.centrall ( background:#990000; width:30%; /*fixed width using percentages*/ margin:2% auto 0 auto; /*padding extern care aliniază blocul la centru și indentează partea de sus cu 2%*/ text-align:center; )

Alinierea la centru folosind poziția și stânga

Această opțiune nu este potrivită pentru fiecare element.

În primul rând, lățimea trebuie specificată doar ca procent; acest lucru nu va funcționa cu pixeli. În curând vei înțelege de ce este așa.

În al doilea rând, eticheta părinte trebuie să aibă o proprietate de poziție setată la relativ/absolut/fixed , oricare dintre următoarele.

Acum trebuie să setați oricare dintre aceste valori pentru proprietatea de poziție pentru elementul care este aliniat. Apoi luați 100, scădeți lățimea acestui element și împărțiți numărul rezultat la 2. Valoarea rezultată va fi cea care trebuie specificată pentru stânga (merită remarcat faptul că această proprietate poate fi înlocuită cu right , ca de obicei, aceasta este neesențial). Datorită acestor proprietăți, div-ul sau tabelul dorit va fi plasat în centrul elementului părinte.

Cum funcţionează asta? Proprietatea de poziție de aici este necesară pentru ca proprietatea stângă să fie numărată de la marginea din stânga a elementului părinte al ecranului, deși uneori este potrivită opțiunea de a nu avea o proprietate de poziție specificată pentru părinte. Apoi pur și simplu setăm valoarea proprietății din stânga, astfel încât marginea din stânga să fie plasată la jumătate din lățimea întregii lățimi a elementului părinte minus lățimea blocului în sine.

Vedeți singur cum funcționează.

Cod HTML:

Cod CSS:

body (poziție:relativ;) div (padding:10px; color:#FFFFFF; position:relative;) div.centrall ( background:#990000; width:20%; /*lățime fixă ​​prin procente*/ text-align:center ; stânga:40%; /*indentare din marginea stângă a elementului părinte*/ )

NetSurf 2.6+, Hv3.

Aliniați pe orizontală imaginea la centru cu 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;)

.exemplu img(afișare: bloc; marjă: 0 auto;)

Proprietăți CSSși containerul (în acest caz exemplu) poate fi foarte diferită, alinierea centrată a imaginii este creată folosind stiluri legate direct de imagine: .exemplu img(afisare: bloc; margine: 0 auto;).

Și, de asemenea, în Opera 4.0+, dacă proprietățile CSS prescurtate nu sunt folosite. Adică dacă codul CSS este în formă. exemplu img(afișare: bloc; margine-stânga: auto; margine-dreapta: auto;).

Și, de asemenea, în Netscape 6.01+, Mozilla 0.6+.

Aliosc subditos et theme

1) Alinierea centrului orizontal și vertical folosind CSS - 1 Aliniați conținutul paginii la centru în zona vizibilă a ferestrei browserului folosind CSS. Containerul în care se află tot conținutul paginii web este aliniat în centru - în lățime și înălțime. Pentru mai mult browsere moderne: [Mai multe detalii] : [Deschideți pagina de exemplu] 2) Alinierea centrului orizontal și vertical folosind CSS - 2 Alinierea conținutului paginii la centru în zona vizibilă a ferestrei browser folosind CSS. Containerul în care se află tot conținutul paginii web este aliniat în centru - în lățime și înălțime. Mai conservatoare decât varianta anterioară. Potrivit nu numai pentru browserele moderne, ci și pentru cele mai vechi. Ca Internet Explorer 6 sau versiuni timpurii Maxthon. Dacă trebuie să schimbați ceva, este nevoie de mai mult efort decât prima metodă: [Mai multe detalii]: [Deschideți pagina exemplu] 3) Alinierea orizontală a unui bloc de lățime necunoscută Alinierea orizontală a unui bloc de lățime necunoscută folosind CSS: [ Mai multe detalii ] : [ Deschide pagina exemplu ] 4) Poziție: centrat absolut Alinierea orizontală a unui element poziționat absolut la centru folosind CSS: [ Mai multe detalii ] 5) Imagine de Centru CSS Alinierea centrală orizontală a unei imagini utilizând CSS: [ Mai mult ] 6) Alinierea CSS verticală Alinierea CSS verticală a unui element bloc care conține text și imagini: [ Mai mult ] 7) Alinierea la centru cu folosind JavaScriptși CSS Aliniați conținutul paginii centrat în zona vizibilă a ferestrei browserului folosind JavaScript și CSS. Containerul în care se află tot conținutul paginii web este aliniat centrat - vertical și orizontal: [ Mai multe detalii ]: Două cazuri: 1. Containerul este aliniat centrat dacă rezoluția ecranului monitorului este egală sau mai mare de 1024x768: [ Deschideți pagina de exemplu ] 2 Containerul este centrat dacă rezoluția ecranului monitorului este egală sau mai mare de 1024x768 + cursorul mouse-ului trece cu mouse-ul peste un link din unul dintre elementele de conținut ale paginii: [ Deschideți pagina de exemplu ]

MPlayer: Playerele FFmpeg Media au apărut cu mult timp în urmă, dar perioada lor de glorie a început cu distribuția masivă a computerelor suficient de puternice pentru a reda fișiere video. Acest lucru a coincis cu răspândirea masivă sisteme de operareși în general software cu interfață grafică. Cu toate acestea, există o dualitate în natura unui program GUI: există un set de cod care este responsabil pentru GUI, pentru aspectși există – pentru faptul că sarcina pentru care aceasta aplicație a fost creat deloc. Ambele complexe consumă resurse de sistem, răspunsul lor la acțiunile utilizatorului creează un anumit timp de așteptare. Iar în cazurile sau conceptele în care aspectul este considerat mai puțin important – mai puțin important până la abandon sau aproape abandon – apar, printre altele, aplicațiile de consolă. În plus, separarea interfeței grafice și a motorului facilitează schimbarea interfeței grafice sau efectuarea unui set de acțiuni automate. Această schemă este implementată și în legătură cu playerele media pentru Windows. MPlayer, de exemplu, în forma sa obișnuită este o aplicație de consolă care se lansează rapid, are un răspuns rapid la acțiunile utilizatorului și consumă aproape în întregime resursele sistemului pentru sarcina sa imediată. Și pe această bază, dacă se dorește, se adaugă una sau alta interfață grafică pentru a crea, în general, o nouă aplicație. MPlayer - / pagina de pornire / player media consolă pentru Windows. Baza pentru SMPlayer și UMPlayer. Există versiuni pentru Linux, FreeBSD, NetBSD, OpenBSD, Apple Darwin, Mac OS X, QNX, OpenSolaris/Solaris, Irix, HP-UX, AIX, alte sisteme *nix, BeOS, Syllaba, AmigaOS, AROS, MorphOS, DOS , Windows. Formate acceptate: video, audio, imagini statice, subtitrare etc. (Mai mult lista plina codecuri video și audio) MPlayer: „Dead Man” MPlayer: „Sky Căpitanul și lumea de mâine” MPlayer: „10.000 BC” MPlayer: „13 Tzameti” MPlayer: „Contractul congresului” MPlayer: „Căsătoria lui Balzaminov” FFmpeg - / pagina principală / Un set de utilități și biblioteci pentru lucrul cu fișiere video și audio. Creat în și pentru Linux, dar există și o opțiune pentru Windows. Este posibilă compilarea pentru alte sisteme de operare. Formate de fișiere și codecuri acceptate: (Lista De asemenea, VLC media player poate fi lansat cu o interfață text folosind ncurses.

Caracteristici de interacțiune dintre imaginile HTML și text

Să vedem cum se plasează text în stânga sau în dreapta imaginii.

În lecția anterioară ne-am uitat la metoda de ieșire Imagini HTML cu extensia .jpg pe o pagină web și cum să setați spațiu suplimentar între aceasta și text. Să continuăm cunoștințele noastre cu eticheta și caracteristicile interacțiunii sale cu elementele textului.

Navigare în pagină

Text în partea de sus, de jos, în centrul imaginii

Text în partea de sus a imaginii Text în centrul imaginii Text în partea de jos a imaginii

Rezultat:

Atribute și valori

• align="top" - aliniază imagine și text de-a lungul vârfului.
• align="middle" - aliniază imagine și textîn centru, pe verticală.
• align="bottom" - aliniază imagine și text de-a lungul fundului.

Permiteți-mi să vă reamintesc că trei formate de imagine sunt aplicabile pentru web: PNG (.png), JPEG (.jpg) și GIF (.gif).

Atenție la metoda de încărcare a imaginii: ../images/2121.png. În primul rând, folosit format PNG(.png). În al doilea rând, imaginea este într-un folder separat, adică am documentul într-un folder, iar imaginea în altul. În astfel de situații, este foarte important să indicați corect calea de la document la imaginea încărcată, ceea ce s-a făcut: primele două puncte... determină ieșirea din folderul în care se află documentul (toate lecțiile, acestea sunt de asemenea pagini, sunt și documente de curs despre HTML Le am în același folder, CSS- în altul, imagini - într-o a treia, și așa mai departe); /images/ nu este altceva decât numele folderului cu imagini, iar 2121.png este numele complet al fișierului imaginii în sine.

Imagine HTML stânga - text dreapta

Rezultat:

Imaginea se înfășoară în jurul textului din dreapta Imaginea se înfășoară în jurul textului din dreapta, iar imaginea se înfășoară în jurul textului din dreapta. Imaginea se înfășoară în jurul textului din dreapta. Imaginea se înfășoară în jurul textului din dreapta. Imaginea se înfășoară în jurul textului din dreapta. Imaginea se înfășoară în jurul textului din dreapta

Cutie cu nisip

autoritate 11 octombrie 2013 la 17:17

Centrarea imaginilor pe o pagină

Introducere

Î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.
Am întâlnit recent câteva dintre aceste probleme:

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. Centrarea absolută a imaginii, 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ă:

• bloc exterior, .î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 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 în centru .înveliș

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 au fost construite pe lățimea și înălțimea imaginii, iar după ce imaginea a fost deplasată cu -50%, apoi părintele, .articol, a scăzut cu același 50% și cercul s-a î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 un mic cod la cod, puteți adăuga cârje pentru IE mai vechi, nu l-am adăugat pentru că nu am vrut de dragul browsere învechite strica codul curat.
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

Acest articol nu este supus comentariilor, deoarece autorul său nu este încă un membru cu drepturi depline al comunității. Veți putea contacta autorul numai după ce acesta va primi o invitație de la cineva din comunitate. Până în acest moment, numele lui de utilizator va fi ascuns de un alias.