Alinierea Css3. Alinierea blocurilor la centru. Să vorbim despre proprietatea de aliniere verticală CSS

Acest tippermite trecerea elementelor interzise.

Acum să trecem la atribut alinia. Setează alinierea orizontală a obiectelor și se potrivește după declararea etichetei. De obicei, poate fi folosit pentru a alinia conținutul la stânga ( stânga), de-a lungul marginii din dreapta ( dreapta), centrat ( centru) și după lățimea textului ( justifica).

Mai jos voi da un exemplu în care voi plasa în centru poza și paragraful.

Acest conținut va fi centrat.

Vă rugăm să rețineți că pentru imagine, atributul pe care îl analizăm are semnificații ușor diferite.

În exemplul pe care l-am folosit aliniază="mijloc". Datorită acestui fapt, imaginea a fost aliniată astfel încât propoziția să fie situată clar în mijlocul imaginii.

Instrumente de centrare în css

Proprietățile CSS concepute pentru a alinia blocurile, textul și conținutul grafic sunt folosite mult mai des. Acest lucru se datorează în primul rând confortului și flexibilității implementării stilurilor.

Deci, să începem cu prima proprietate a centrarii textului - aceasta este text-alinia.

Funcționează în același mod ca align in . Dintre cuvintele cheie puteți alege unul dintre lista generala sau moștenesc caracteristicile unui strămoș ( moşteni).

Aș dori să notez că în css3 puteți seta încă 2 parametri: start– în funcție de regulile de scriere a textului (de la dreapta la stânga sau invers), setează alinierea la stânga sau la dreapta (asemănător lucrării la stânga sau la dreapta) și Sfârşit– opusul startului (la scrierea textului de la stânga la dreapta acţionează ca la dreapta, la scrierea de la dreapta la stânga – stânga).

O să vă povestesc despre cip mic. La selectarea unei valori justifica ultima linie poate atârna neatrăgător de jos. Pentru a-l poziționa, de exemplu, în centru, puteți folosi proprietatea text-align-last.

Pentru a alinia vertical conținutul site-ului sau celulele tabelului, utilizați proprietatea vertical-align. Mai jos am descris principalul Cuvinte cheie element.

Indentări

Și, în sfârșit, ajungem la liniuțele de paragraf. ÎN limbajul css folosit proprietate specială intitulat text-indentare.

Cu ajutorul acestuia puteți face atât o linie roșie, cât și o proeminență (trebuie să specificați o valoare negativă).

Îi laud pe cei care au încercat fiecare exemplu în practică. Trimite link-uri către blogul meu prietenilor tăi și nu uita să te abonezi. Noroc! Pa! Pa!

Cu stima, Roman Chueshov

Citit: de 675 de ori

Centrarea elementelor pe verticală cu folosind CSS este o sarcină care prezintă unele dificultăți pentru dezvoltatori. Cu toate acestea, există mai multe metode de rezolvare, care sunt destul de simple. ÎN această lecție 6 variante prezentate centrare verticală conţinut.

Sa incepem cu descriere generala sarcini.

Problemă de centrare verticală

Centrarea orizontală este foarte simplă și ușoară. Când elementul centrat este inline, folosim proprietatea de aliniere relativă la elementul părinte. Când elementul este la nivel de bloc, îi setăm lățimea și instalare automată marginile din stânga și din dreapta.

Majoritatea oamenilor folosesc proprietatea text-align: , accesați proprietatea vertical-align pentru a centra vertical. Totul pare destul de logic. Dacă ați folosit șabloane de tabel, probabil că ați folosit pe scară largă atributul valign, care întărește credința că alinierea verticală calea cea buna la rezolvarea problemei.

Dar atributul valign funcționează numai pe celulele tabelului. Și proprietatea de aliniere verticală este foarte asemănătoare cu aceasta. De asemenea, afectează celulele tabelului și unele elemente inline.

Valoarea proprietății de aliniere verticală este relativă la elementul inline părinte.

• Într-o linie de text, alinierea este relativă la înălțimea liniei.
• Celula tabelului folosește alinierea în raport cu o valoare calculată printr-un algoritm special (de obicei, înălțimea rândului).

Dar, din păcate, proprietatea vertical-align nu funcționează pe elementele la nivel de bloc (de exemplu, paragrafele din interiorul unui element div). Această situație poate face să creadă că nu există o soluție la problema alinierii verticale.

Dar există și alte metode de centrare a elementelor bloc, a căror alegere depinde de ceea ce este centrat în raport cu containerul exterior.

Metoda linie-înălțime

Aceasta metoda funcționează atunci când doriți să centrați vertical o linie de text. Tot ce trebuie să faceți este să setați înălțimea liniei să fie mai mare decât dimensiunea fontului.

Mod implicit spatiu liber vor fi distribuite uniform deasupra și dedesubtul textului. Și linia va fi centrată vertical. Adesea se face înălțimea liniei înălțime egală element .

HTML:

CSS:

#copil (înălțimea liniei: 200px; )

Această metodă funcționează în toate browserele, deși poate fi folosită doar pentru o singură linie. Valoarea 200 px din exemplu a fost aleasă în mod arbitrar. Orice valoare poate fi folosită marime mai mare font text.

Centrarea unei imagini folosind Line-Height

Ce se întâmplă dacă conținutul este o imagine? Va funcționa metoda de mai sus? Răspunsul se află într-o altă linie de cod CSS.

HTML:

CSS:

#parent ( line-height: 200px; ) #parent img ( vertical-align: middle; )

Sens proprietățile înălțimii liniei trebuie să fie mai mare decât înălțimea imaginii.

Metoda tabelului CSS

S-a menționat mai sus că proprietatea vertical-align este folosită pentru celulele tabelului, unde funcționează excelent. Putem afișa elementul nostru ca o celulă de tabel și putem folosi proprietatea de aliniere verticală pentru a centra vertical conținutul.

Notă: Tabel CSS nu este același lucru cu un tabel HTML.

HTML:

CSS:

#părinte (afișare: tabel;) #copil (afișare: tabel-celulă; vertical-align: mijloc; )

Instalăm ieșire tabelară pentru elementul div părinte și afișați elementul div imbricat ca o celulă de tabel. Acum puteți utiliza proprietatea de aliniere verticală pe containerul interior. Totul din el va fi centrat vertical.

Spre deosebire de metoda de mai sus, în acest caz conținutul poate fi dinamic deoarece elementul div își va schimba dimensiunea în funcție de conținutul său.

Dezavantajul acestei metode este că nu funcționează în versiunile mai vechi de IE. Trebuie să utilizați proprietatea display: inline-block pentru containerul imbricat.

Poziționare absolută și marje negative

Această metodă funcționează și în toate browserele. Dar necesită ca elementului centrat să i se acorde o înălțime.

Exemplul de cod efectuează centrarea orizontală și verticală în același timp:

HTML:

CSS:

#părinte (poziție: relativ;) #copil (poziția: absolut; sus: 50%; stânga: 50%; înălțime: 30%; lățime: 50%; marjă: -15% 0 0 -25%; )

Mai întâi, setăm tipul de poziționare a elementului. Apoi, setăm proprietățile de sus și stânga ale elementului div imbricat la 50%, ceea ce corespunde centrului elementului părinte. Dar centrul este colțul din stânga sus al elementului imbricat. Prin urmare, trebuie să îl ridicați (jumătate din înălțime) și să îl mutați la stânga (jumătate din lățime), iar apoi centrul va coincide cu centrul elementului părinte. Deci, cunoașterea înălțimii elementului în acest caz este necesară. Apoi setăm elementul cu margini negative de sus și stânga egale cu jumătate din înălțime și, respectiv, lățime.

Această metodă nu funcționează în toate browserele.

Poziționare și întindere absolută

Exemplul de cod efectuează centrarea verticală și orizontală.

HTML:

CSS:

#părinte (poziție: relativă;) #copil (poziția: absolut; sus: 0; jos: 0; stânga: 0; dreapta: 0; lățime: 50%; înălțime: 30%; margine: auto; )

Ideea din spatele acestei metode este de a întinde elementul imbricat la toate cele 4 margini ale elementului părinte prin setarea proprietăților de sus, jos, dreapta și stânga la 0.

Setarea marginilor pentru a se genera automat pe toate părțile va seta valori egale pe toate cele 4 laturi și va centra elementul nostru div imbricat pe elementul său părinte.

Din păcate, această metodă nu funcționează în IE7 și mai jos.

Spații egale deasupra și dedesubt

În această metodă, setați în mod explicit liniuțe egale deasupra și sub elementul părinte.

HTML:

CSS:

#părinte ( umplutură: 5% 0; ) #copil ( umplutură: 10% 0; )

În cod Exemplu CSS Marginile de sus și de jos sunt setate pentru ambele elemente. Pentru un element imbricat, setarea căptușelii va servi pentru a-l centra vertical. Și umplutura elementului părinte va centra elementul imbricat în el.

Pentru a redimensiona dinamic elementele, utilizați unități relative măsurători. Iar pentru unitățile de măsură absolute va trebui să faci calcule.

De exemplu, dacă elementul părinte are o înălțime de 400 px, iar elementul imbricat este de 100 px, atunci este nevoie de 150 px de umplutură în partea de sus și de jos.

150 + 150 + 100 = 400

Utilizarea % vă permite să lăsați calculele în seama browserului.

Această metodă funcționează peste tot. Dezavantajul este nevoia de calcule.

Notă: Această metodă funcționează prin setarea căptușelii exterioare a unui element. De asemenea, puteți utiliza margini în cadrul unui element. Decizia de a folosi margini sau umplutură trebuie luată în funcție de specificul proiectului.

div plutitor

Această metodă folosește un element div gol care plutește și ajută la controlul poziției elementului nostru imbricat în document. Rețineți că div-ul plutitor este plasat înaintea elementului nostru imbricat în codul HTML.

HTML:

CSS:

#părinte (înălțime: 250px;) #floater ( plutitor: stânga; înălțime: 50%; lățime: 100%; margine-jos: -50px; ) #copil (clar: ambele; înălțime: 100px; )

Compensam div-ul gol la stânga sau la dreapta și îi setăm înălțimea la 50% din elementul părinte. În acest fel, va umple jumătatea superioară a elementului părinte.

Deoarece acest div plutește, este eliminat din fluxul normal al documentului și trebuie să desfacem textul pe elementul imbricat. Exemplul folosește clar: ambele , dar este suficient să folosiți aceeași direcție ca decalajul unui element div vid plutitor.

Marginea de sus a unui element div imbricat este direct sub marginea de jos a unui element div gol. Trebuie să mutăm elementul imbricat în sus cu jumătate din înălțimea elementului gol plutitor. Pentru a rezolva problema, utilizați o valoare negativă a proprietății marginii de jos pentru un element div vid plutitor.

Această metodă funcționează și în toate browserele. Cu toate acestea, utilizarea acestuia necesită un element div gol suplimentar și cunoașterea înălțimii elementului imbricat.

Concluzie

Toate metodele descrise sunt ușor de utilizat. Dificultatea este că niciuna dintre ele nu este potrivită pentru toate cazurile. Trebuie să analizezi proiectul și să-l alegi pe cel care se potrivește cel mai bun mod conform cerinţelor.

Astăzi, dragă cititor, ne vom ocupa de problema alinierii verticale într-un bloc div.

Cel mai probabil știți deja despre existența unei minunate proprietăți CSS vertical-align.Și Dumnezeu însuși ne-a ordonat să folosim tocmai această proprietate pentru alinierea verticală (nu degeaba are un nume atât de explicit).

Formularea problemei: Trebuie să centrați conținutul unui bloc de înălțime variabilă față de verticală.

Acum să începem să rezolvăm problema.

Și așa, avem un bloc, înălțimea lui se poate schimba:

Primul lucru care vă vine în minte este să faceți următoarea simulare:

Există toate motivele să credem că fraza Blocați conținutul va fi aliniat la înălțimea centrală a containerului div.

Dar nu era acolo! Nu vom obține nicio aliniere centrală așteptată în acest fel. Și de ce? S-ar părea că totul este indicat corect. Se pare că aceasta este problema: proprietatea vertical-align poate fi folosit doar pentru a alinia conținutul celulelor tabelului sau pentru a alinia elemente inline unul față de celălalt.

În ceea ce privește alinierea în interiorul unei celule de tabel, cred că totul este clar. Dar voi explica un alt caz cu elemente inline.

Alinierea verticală a elementelor în linie

Să presupunem că aveți o linie de text care este împărțită de etichete de linie în părți:

Tu salută bucată text!

O etichetă inline este un container al cărui aspect nu are ca rezultat transferul conținutului linie nouă.

Acțiunea unei etichete de bloc face ca conținutul containerului să se înfășoare la o nouă linie.

- Acest eticheta bloc. Dacă închidem bucăți de text în blocuri

, atunci fiecare dintre ei va fi pe o linie nouă. Folosind eticheta , care, spre deosebire de

, este litere mici, containerele nu vor fi mutate pe o linie nouă, toate containerele va rămâne pe aceeași linie.

Container convenabil de utilizat atunci când specificați o parte a textului cu formatare specială (evidențierea acesteia cu o culoare, un font diferit etc.)

Pentru containere Aplicați următoarele proprietăți CSS:

#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

Linia de text rezultată va arăta astfel:

Aceasta nu este altceva decât alinierea verticală a elementelor inline și proprietatea CSS vertical-align face față perfect acestei sarcini.

Ne-am distras puțin, acum ne întoarcem la sarcina noastră principală.

Alinierea verticală în containerul div

Indiferent de ce, pentru alinierea în containerul div vom folosi proprietatea vertical-align. După cum am spus deja, această proprietate poate fi folosit în cazul alinierii elementelor inline (am discutat acest caz în detaliu mai sus și nu este potrivit pentru noi pentru alinierea într-un container div); tot ce rămâne este să folosim faptul că vertical-align funcționează pentru celulele de tabel.

Cum putem folosi asta? Nu avem o masă, lucrăm cu un container div.

Ha, se dovedește a fi foarte simplu.

proprietate CSS afişa vă permite să transformați blocul nostru div într-o celulă de tabel, acest lucru se poate face ușor și natural:

Să presupunem că avem o clasă div aliniere text:

Pentru acest bloc specificăm următoarea proprietate CSS:

Textalign(afisare: tabel-celula; )

Această instrucțiune CSS va transforma în mod miraculos div-ul nostru într-o celulă de tabel, fără a o schimba vizual în vreun fel. Și pentru o celulă de tabel putem aplica proprietatea vertical-align complet și alinierea verticală dorită va funcționa.

Totuși, totul nu se poate termina atât de simplu. Avem un browser IE minunat. Nu știe să lucreze cu proprietatea afișare: tabel-celulă(Sugerez să citiți tabelul care ilustrează funcționalitatea acestei proprietăți CSS în diferite browsere de pe site-ul htmlbook.ru). Prin urmare, va trebui să recurgem la diverse trucuri.

Există multe modalități de a realiza alinierea într-un container div pentru toate browserele:

• Metodă folosind un container auxiliar suplimentar div
• Metoda folosind expresia. Este legat de un calcul dificil al înălțimii blocurilor. Nu puteți face acest lucru fără cunoștințe de JavaScript.
• Folosind proprietatea line-height. Această metodă este potrivită numai pentru alinierea verticală într-un bloc de înălțime cunoscută și, prin urmare, nu este aplicabilă în cazul general.
• Utilizarea decalajului de conținut absolut și relativ în cazul browserului IE. Această metodă mi se pare cea mai înțeleasă și simplă. În plus, este implementabil pentru un container div cu înălțime variabilă. Ne vom opri asupra ei mai detaliat.

După cum înțelegeți, trebuie doar să rezolvăm problema alinierii verticale în IE asociată cu înțelegerea greșită a proprietății. afișare: tabel-celulă(nici IE6, nici IE7, nici IE8 nu este familiarizat cu această proprietate). Prin urmare, folosind comentariu condiționat Vom specifica diferite proprietăți CSS special pentru browserele IE.

Comentariu condiționat

Tip constructie:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

se numește comentariu condiționat (ai grijă, tipul comentariu condiționat trebuie să corespundă în totalitate exemplului dat, până la un spațiu).

Instrucțiunile conținute într-un astfel de comentariu condiționat vor fi executate numai dacă browserul interpretează acest cod, aparține familiei IE.

Astfel, folosind un comentariu condiționat, putem ascunde o bucată de cod din toate browserele, cu excepția IE.

Rezolvarea problemei

Din cauza acestui pătrunjel, va trebui să furnizăm codului nostru HTML două containere suplimentare. Iată cum va arăta blocul nostru de text:

Pentru containerul div de clasă aliniere text Proprietățile CSS sunt setate care își aliniază conținutul vertical pentru toate browserele normale (cu excepția IE, desigur):

Display: tabel-celula; vertical-align: mijloc;

Și încă două proprietăți care stabilesc lățimea și înălțimea blocului:

Latime: 500px; inaltime: 500px;

Acest lucru este suficient pentru a alinia conținutul containerului centrat față de verticală, în toate browserele cu excepția IE.

Acum începem să adăugăm proprietăți legate de aliniere pentru browsere din familia IE(pentru ei am folosit blocuri suplimentare divȘi span):

Referitor la etichetă divîn interiorul unui bloc de clasă aliniere text. Pentru a face acest lucru, trebuie să indicați mai întâi numele clasei și apoi, separate printr-un spațiu, eticheta la care accesăm.

Textalign div( poziție: absolut; sus: 50%; )

Acest design înseamnă: pentru toată lumea etichete divîn interiorul unui bloc cu o clasă aliniere text aplicați proprietățile enumerate.

În consecință, stilurile specificate pentru bloc aliniere text sunt modificate:

Aliniere text(afișare: tabel-celulă; aliniere verticală: mijloc; lățime: 500px; înălțime: 500px; poziție: relativă; )

Acum, punctul din stânga sus al blocului de text este mutat în jos cu 50%.

Pentru a explica ce se întâmplă, am desenat o ilustrație:

După cum puteți vedea din imagine, am făcut unele progrese. Dar asta nu este tot! Punctul din stânga sus al blocului galben sa deplasat într-adevăr cu 50% în jos, în raport cu blocul părinte (violet). Dar trebuie să fie la cincizeci la sută din înălțimea blocului violet. centrul blocului galben, nu punctul său din stânga sus.

Acum eticheta va intra în joc spanși poziționarea sa relativă:

Textalign span( poziție: relativă; sus: -50%; )

Astfel, am deplasat blocul galben în sus cu 50% din înălțimea lui, în raport cu poziția inițială. După cum înțelegeți, înălțimea blocului galben este egală cu înălțimea conținutului centrat. Iar ultima operațiune asupra containerului span a plasat conținutul nostru în mijlocul blocului violet. Ura!

Hai să trișăm puțin

În primul rând, trebuie să ascundem pătrunjelul din toate browserele normale și să-l deschidem pentru IE. Acest lucru se poate face, desigur, folosind un comentariu condiționat, nu degeaba ne-am familiarizat cu el:

Există o mică problemă. Dacă conținutul centrat este prea mare, atunci acest lucru duce la consecințe neplăcute: înălțime suplimentară defilare verticală.

Soluție pentru problemă: trebuie să adăugați o proprietate debordare: ascuns bloc aliniere text.

Cunoașteți proprietatea în detaliu revărsare posibil în .

Instrucțiunile CSS finale pentru bloc aliniere text are forma:

Textalign( afișare: tabel-celulă; aliniere verticală: mijloc; lățime: 500px; înălțime: 500px; poziție: relativă; depășire: ascuns; chenar: 1px negru; )

Scuze, am uitat să menționez unul punct important. Daca incerci setați înălțimea blocului de clasă aliniere text V procent , atunci ai nimic nu va funcționa.

Centrare în bloc de înălțime variabilă

Foarte des este nevoie de a seta înălțimea unui bloc de clasă aliniere text nu în pixeli, ci ca procent din înălțimea blocului părinte și aliniați conținutul containerului div în mijloc.

Problema este că este imposibil să faci acest lucru pentru o celulă de tabel (dar blocul de clasă aliniere text se transformă exact într-o celulă de tabel, datorită proprietății display:table-cell).

În acest caz, trebuie să utilizați unitate externă, pentru care este specificată proprietatea CSS display:tabelși setați deja valoarea procentuală a înălțimii pentru aceasta. Apoi blocul s-a imbricat în el, cu directiva CSS display:table-cell, va moșteni cu plăcere înălțimea blocului părinte.

Pentru a implementa un bloc de înălțime variabilă în exemplul nostru, vom edita puțin CSS-ul:

La clasa aliniere text vom modifica valoarea proprietatii afişa Cu tabel-celula pe masași eliminați directiva de aliniere vertical-align: mijloc. Acum putem schimba în siguranță valoarea înălțimii de la 500 de pixeli la, de exemplu, 100%.

Deci proprietățile CSS pentru blocul de clasă aliniere text va arata asa:

Textalign( afișare: tabel; lățime: 500px; înălțime: 100%; poziție: relativă; depășire: ascuns; chenar: 1px negru; )

Tot ce rămâne este să implementezi centrarea conținutului. Pentru a face acest lucru, un container div imbricat într-un bloc de clasă aliniere text(acesta este același bloc galben din imagine), trebuie să setați proprietatea CSS display:table-cell, atunci va moșteni înălțimea de 100% din blocul părinte aliniere text(bloc violet). Și nimic nu ne va împiedica să aliniem conținutul containerului div imbricat în centru cu proprietatea vertical-align: mijloc.

Mai primim unul lista suplimentara Proprietăți CSS pentru bloc div cuibărit într-un container aliniere text.

Textalign div( afișare: celulă-tabel; aliniere verticală: mijloc; )

Acesta este tot trucul. Dacă doriți, puteți avea o înălțime variabilă cu conținutul centrat.

Informații suplimentare despre aliniere verticală se poate obține bloc de înălțime variabilă.

În CSS, unele lucruri aparent simple nu sunt atât de ușor de făcut. Unul dintre aceste lucruri este alinierea, adică. când un element trebuie poziționat într-un anumit mod față de altul.

Acest articol prezintă câteva soluții gata făcute care vor ajuta la simplificarea activității de centrare a elementelor pe orizontală și/sau verticală.

Notă: Sub fiecare soluție este o listă de browsere care indică versiunile în care funcționează codul CSS specificat.

CSS - Center Align Block

1. Alinierea unui bloc la centrul altuia. În acest caz, primul și al doilea bloc au dimensiuni dinamice.

Părinte ( poziție: relativ; ) .copil ( poziție: absolut; stânga: 50%; sus: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50% , -50%); -ms-transform (-50%, -50%);

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Alinierea unui bloc la centrul altuia. În acest caz, al doilea bloc are dimensiuni fixe.

Părinte (poziție: relativă; ) .copil (poziția: absolut; stânga: 50%; sus: 50%; /* lățime și înălțime a 2 blocuri */ lățime: 500px; înălțime: 250px; /* Valorile sunt determinate în funcție de pe dimensiunea sa */ /* margin-left = - lățime / 2 */ margin-left: -250px /* margin-top = - înălțime / 2 */ margin-top: -125px )

Browsere care acceptă această soluție:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Alinierea unui bloc la centrul altuia. În acest caz, al doilea bloc are dimensiuni specificate în procente.

Părinte ( poziție: relativ; ) .copil (poziția: absolut; /* lățime și înălțime a 2 blocuri în % */ înălțime: 50%; lățime: 50%; /* Valorile se determină în funcție de mărimea acestuia în % * / stânga: 25% /* (100% - lățime) / 2 */ sus: 25% /* (100% - înălțime) / 2 */ ;

Browsere care acceptă această soluție:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

CSS - Aliniere orizontală

1. Aliniați unul element bloc(afișare: bloc) față de celălalt (în care se află) orizontal:

Blocare ( margine-stânga: automat; margine-dreapta: automat; )

Browsere care acceptă această soluție:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Aliniați un element de linie (afișare: inline) sau de linie (afișare: inline-block) pe orizontală:

Părinte ( text-align: center; ) .child (afișare: inline-block; )

Browsere care acceptă această soluție:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Aliniere verticală

1. Centrați un element (display: inline, display: inline-block) față de celălalt (în care se află) în centru. Blocul părinteîn acest exemplu, are o înălțime fixă, care este setată folosind proprietatea CSS line-height.

Părinte ( line-height: 500px; ) .child (afișare: inline-block; vertical-align: middle; )

Browsere care acceptă această soluție:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Centrarea unui bloc față de altul pe verticală prin reprezentarea părintelui ca tabel, iar copilul ca o celulă a acestui tabel.

Părinte ( display: table; ) .child ( display: table-cell; vertical-align: middle; )

Browsere care acceptă această soluție:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

Dacă cunoașteți alte trucuri interesante sau soluții utile de aliniere gata făcute, atunci împărtășiți-le în comentarii.

Foarte des sarcina este de a alinia un bloc la centrul paginii / ecranului și chiar și așa fără un script Java, fără o sarcină dimensiuni rigide sau indentări negative, astfel încât barele de defilare să funcționeze și pentru părinte dacă blocul își depășește dimensiunea. Există destul de multe exemple monotone pe Internet despre cum să aliniați un bloc la centrul ecranului. De regulă, majoritatea se bazează pe aceleași principii.

Mai jos sunt principalele modalități de a rezolva problema, avantajele și dezavantajele lor. Pentru a înțelege esența exemplelor, vă recomand să reduceți înălțimea/lățimea ferestrei Rezultate în exemplele de la linkurile furnizate.

Opțiunea 1: indentare negativă.

Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; ) .block ( lățime: 250px; înălțime: 250px; poziție: absolut; sus: 50%; stânga : 50%; margine: -125px 0 0 -125px img (lățime maximă: 100%; înălțime: automată; afișare: bloc; margine: 0 auto; margine: niciuna; ) )

Opțiunea 2. Indentare automată.

Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; ) .block ( lățime: 250px; înălțime: 250px; poziție: absolut; sus: 0; dreapta: 0; jos: 0; margine: auto; înălțime: auto; margine: auto;

Opțiunea 3. Tabel.

Părinte ( lățime: 100%; înălțime: 100%; afișare: tabel; poziție: absolut; sus: 0; stânga: 0; > .interior ( afișare: tabel-celulă; text-align: center; vertical-align: middle; ) ) .bloc ( display: inline-block; img ( display: block; border: none; ) )

Pentru a adăuga un scroll la acest exemplu, va trebui să adăugați încă un element la design.
Exemplu: jsfiddle.net/serdidg/fk5nqh52/3.

Opțiunea 4. Pseudo-element.

Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; spații albe: nowrap; text-align: center; font-size: 0; &:before ( înălțime: 100%;

Sau, dacă aveți nevoie ca părintele să ocupe doar înălțimea și lățimea ferestrei, și nu întreaga pagină:

Părinte ( poziție: fix; sus: 0; dreapta: 0; jos: 0; stânga: 0; overflow: automat; spații albe: nowrap; text-align: center; font-size: 0; &:before (înălțime: 100%;

Opțiunea 5. Flexbox.

Părinte ( lățime: 100%; înălțime: 100%; poziție: fix; sus: 0; stânga: 0; afișare: flex; align-items: center; align-content: centru; justify-content: centru; overflow: automat; ) .block ( fundal: #60a839; img ( afișare: bloc; chenar: niciunul; ) )

Opțiunea 6. Transform.

Părinte ( lățime: 100%; înălțime: 100%; poziție: fix; sus: 0; stânga: 0; overflow: automat; ) .block (poziția: absolut; sus: 50%; stânga: 50%; transform: translate( -50%, -50%) img (afișare: bloc; ) )

Opțiunea 7. Buton.

Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; fundal: niciunul; chenar: niciunul; contur: niciunul; ) .block ( afișare: bloc inline; img (afișare: bloc;; chenar: niciunul; ) )

Primă

De asemenea, puteți alinia imaginea la centru și dacă imaginea este mai mare mamă, scalați-l la dimensiune mamă.
Exemplu: jsfiddle.net/serdidg/nfqg9rza/3.
Exemplu cu o imagine mare: