Centrare div. Cum se face o legătură dintr-un strat. Alinierea cu un element suplimentar în linie
Există mai multe moduri fundamental diferite de a centra un obiect pe verticală folosind CSS, cu toate acestea, dificultatea poate fi în alegerea celui potrivit. Ne vom uita la unele dintre ele și, de asemenea, vom face un mic site web folosind cunoștințele acumulate.
Alinierea pe centru vertical nu este ușor de realizat folosind CSS. Există multe moduri și nu toate funcționează în toate browserele. Să ne uităm la 5 diverse metode, precum și avantajele și dezavantajele fiecăruia dintre ele. Exemplu.
1a metoda
Această metodă presupune că setăm un element
pro
- Conținutul se poate schimba dinamic înălțimea (înălțimea nu este definită în CSS).
- Conținutul nu este întrerupt dacă nu există spațiu suficient pentru el.
Minusuri
- Nu funcționează în IE 7 sau mai puțin
- O mulțime de etichete imbricate
a 2-a metoda
Această metodă folosește poziționarea absolută a div-ului, cu partea superioară setată la 50% și margine-top minus jumătate din înălțimea conținutului. Aceasta implică faptul că obiectul trebuie să aibă o înălțime fixă, care este definită în stilurile CSS.
Deoarece înălțimea este fixă, puteți seta overflow:auto; pentru un div care conține conținut, astfel, dacă conținutul nu se potrivește, vor apărea bare de defilare.
pro
- Funcționează în toate browserele.
- Nu există cuibări inutile.
Minusuri
- Când nu este suficient spațiu, conținutul dispare (de exemplu, div-ul este în interiorul corpului și utilizatorul a făcut ferestrele mai mici, caz în care barele de defilare nu vor apărea.
a 3-a metoda
În această metodă, vom încheia conținutul div cu un alt div. Să-i setăm înălțimea la 50% (înălțime: 50%;) și marginea de jos la jumătate din înălțime (margin-bottom:-contentheight;). Conținutul va pluti și va fi centrat.
pro
- Funcționează în toate browserele.
- Când nu există suficient spațiu (de exemplu, când fereastra este redusă), conținutul nu este decupat, vor apărea bare de defilare.
Minusuri
- Nu mă pot gândi decât la un singur lucru: că se folosește un element gol suplimentar.
a 4-a metoda.
Această metodă utilizează proprietatea position:absolute;. pentru un div cu dimensiuni fixe (lățime și înălțime). Apoi îi setăm coordonatele de sus:0; jos:0; , dar din moment ce are o înălțime fixă, nu se poate întinde și este aliniată la centru. Aceasta este foarte asemănătoare cu metoda binecunoscută aliniere orizontala centrat pe un element bloc cu lățime fixă (marja: 0 auto;).
pro
- Foarte simplu.
Minusuri
- Nu funcționează în Internet Explorer
- Conținutul va fi tăiat fără bare de defilare dacă nu există suficient spațiu în container.
a 5-a metoda
Folosind această metodă, puteți alinia centrat o linie de text. Pur și simplu setăm înălțimea textului (linie-înălțime) egală cu înălțimea elementului (înălțimea). După aceasta, linia va fi afișată în centru.
pro
- Funcționează în toate browserele.
- Nu taie textul dacă nu se potrivește.
Minusuri
- Funcționează numai cu text (nu funcționează cu elemente de bloc).
- Dacă există mai multe rânduri de text, arată foarte rău.
Această metodă este foarte utilă pentru elementele mici, cum ar fi centrarea textului într-un buton sau câmp de text.
Acum știi cum să obții aliniere verticală centrat, haideți să creăm un site web simplu, care în cele din urmă va arăta astfel:
Pasul 1
Este întotdeauna bine să începeți cu marcajul semantic. Pagina noastră va fi structurată după cum urmează:
- #floater (pentru a centra conținutul)
- #centrat (element central)
- #latură
- #siglă
- #nav (lista
- #conţinut
- #bottom (pentru drepturi de autor și toate astea)
Să scriem următorul marcaj html:
O companie centrată O companieTitlul paginii
Reproiectează holistic externalizarea cu valoare adăugată după colaborarea centrată pe proces și partajarea ideilor. Simplificați din punct de vedere energetic piețele de nișă cu impact prin imperativele activate. Predominați holistic inovația premium după scenarii convingătoare. Recaptiualizați fără probleme standardele înalte în capitalul uman cu produse fabricate de ultimă generație. Distribuiți în mod distinct schemele conforme cu standardele înaintea vortalurilor robuste. Recaptiualizați în mod unic gradul de pregătire pentru web în raport cu informațiile disponibile.
Titlul 2
Îmbrățișați eficient pregătirea personalizată pentru web, mai degrabă decât procesele direcționate către client. Creșteți în mod asertiv imperativele multiplatforme față de tehnologiile proactive. Îmbunătățiți în mod convenabil meta-servicii multidisciplinare fără interfețe la nivel de întreprindere. Simplificați convenabil domeniile tematice strategice competitive cu piețe electronice concentrate. Sindicați fosfluorescent comunități de clasă mondială față de piețele cu valoare adăugată. Reinventează în mod corespunzător serviciile holistice înaintea serviciilor electronice robuste.
Notificarea privind drepturile de autor ajunge aici
Pasul 2
Acum vom scrie cel mai simplu CSS pentru a plasa elemente pe pagină. Ar trebui să salvați acest cod într-un fișier style.css. În acest sens este scris linkul în fișierul html.
Html, corp ( margine: 0; umplutură: 0; înălțime: 100%; ) corp ( fundal: url("page_bg.jpg") 50% 50% no-repeat #FC3; font-family: Georgia, Times, serif; ) #floater ( poziție: relativă; float: stânga; înălțime: 50%; margine-jos: -200px; lățime: 1px; ) #centrat (poziția: relativ; clar: stânga; înălțime: 400px; lățime: 80%; max. -lățime: 800px; lățime minimă: 400px; marjă: 0 automat; fundal: #fff; chenar: 4px solid #666; ) #jos (poziția: absolut; jos: 0; dreapta: 0; ) #nav (poziția: absolut; stânga: 0; sus: 0; jos: 0; dreapta: 70%; umplutură: 20px; marjă: 10px; ) #conținut (poziția: absolut; stânga: 30%; dreapta: 0; sus: 0; jos: 0; overflow: automat; înălțime: 340px; umplutură: 20px; margine: 10px; )
Înainte de a ne alinia centrul de conținut, trebuie să setăm înălțimea corpului și html la 100%. Deoarece înălțimea este considerată fără interior și marginile(padding și margin), apoi le setăm (padding) la 0, astfel încât să nu existe bare de defilare.
Marja de jos pentru un element „plutitor” este egală cu minus jumătate din înălțimea conținutului (400px), și anume -200px ;
Pagina ta ar trebui să arate acum cam așa:
#latime element centrat 80%. Acest lucru face site-ul nostru mai restrâns pe ecranele mici și mai larg pe cele mai mari. majoritatea site-urilor arată indecent pe noile monitoare largi din colțul din stânga sus. Proprietățile min-width și max-width limitează, de asemenea, pagina noastră, astfel încât să nu pară prea lată sau prea îngustă. Internet Explorer nu acceptă aceste proprietăți. Trebuie să-l setați la o lățime fixă.
Deoarece elementul #centrated are poziție:setul relativ, putem folosi poziționarea absolută a elementelor din el. Apoi setați overflow:auto; pentru elementul #content, astfel încât să apară bare de defilare dacă conținutul nu se potrivește.
Pasul 3
Ultimul lucru pe care îl vom face este să adăugăm ceva stil pentru a face pagina să arate puțin mai atractivă. Să începem cu meniul.
#nav ul ( list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( display: block; culoare de fundal: #e8e8e8; umplutură: 7px; margine: 0; text-decor: niciunul; culoare: #000; chenar-jos: 1px solid #bbb; text-align: right; ) #nav li a::after ( conținut: """; culoare: #aaa; greutate font: bold; afișare: inline; float: dreapta; margine: 0 2px 0 5px; ) #nav li a:hover, #nav li a:focus ( fundal: # f8f8f8; border-bottom-color: #777; ) #nav li a:hover::after ( marja: 0 0 0 7px; culoare: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )
Primul lucru pe care l-am făcut pentru a face meniul să arate mai bine a fost să eliminăm marcatorii prin setarea atributului list-style:none și, de asemenea, să setăm umplutura și umplutura, deoarece acestea variază foarte mult în mod implicit în diferite browsere.
Vă rugăm să rețineți că am specificat apoi că linkurile ar trebui să apară ca elemente de bloc. Acum, când sunt afișate, acestea sunt întinse pe toată lățimea elementului în care se află.
Alte lucru interesant, pe care le-am folosit pentru meniu sunt pseudo-clasele:before și:after . Ele vă permit să adăugați ceva înainte și după un element. Acest mod bun adăugați pictograme sau simboluri, cum ar fi o săgeată, la sfârșitul fiecărui link. Acest truc nu funcționează în Internet Explorer 7 și mai jos.
Pasul 4
Și nu în ultimul rând, vom adăuga câteva șuruburi designului nostru pentru și mai multă frumusețe.
#centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 (familie de fonturi: Helvetica, Arial, sans- serif; greutate font: normal; culoare: #666; ) h1 (culoare: #f93; margine de jos: 1px solid #ddd; spațiere între litere: -0,05em; greutate font: bold; margine de sus: 0; padding-top: 0; ) #bottom ( padding: 10px; font-size: 0.7em; culoare: #f03; ) #logo (font-size: 2em; text-align: center; culoare: #999; ) #logo puternic (greutate font: normal; ) #logo span (afișare: bloc; dimensiune font: 4em; înălțime linie: 0,7 em; culoare: #666; ) p, h2, h3 ( înălțime linie: 1,6 em; ) a (culoare: #f03; )
În aceste stiluri setăm colțuri rotunjite pentru elementul #centrat. În CSS3, acesta va fi responsabil pentru proprietate frontier-radius. Acest lucru nu este încă implementat de unele browsere, cu excepția utilizării prefixelor -moz și -webkit pentru Mozilla Firefoxși Safari/Webkit.
Compatibilitate
După cum probabil ați ghicit deja, principala sursă de probleme de compatibilitate este Internet Explorer:
- Elementul #floater trebuie să aibă un set de lățime
- IE 6 are umplutură suplimentară în jurul meniurilor
235881 vizualizări
Cred că mulți dintre voi care ați avut de-a face cu aspectul ați întâmpinat nevoia de a alinia elementele pe verticală și de a cunoaște dificultățile care apar la alinierea unui element la centru.
Da, există o proprietate specială de aliniere verticală cu mai multe valori în CSS pentru alinierea verticală. Cu toate acestea, în practică, nu funcționează deloc așa cum era de așteptat. Să încercăm să ne dăm seama.
Să comparăm următoarele abordări. Aliniați folosind:- Mese,
- indentare,
- inaltimea liniei
- întindere,
- marja negativa,
- transforma
- pseudo element
- flexbox.
Există două elemente div, unul dintre ele imbricat în celălalt. Să le dăm clasele corespunzătoare - exterioare și interioare.
Provocarea este de a alinia elementul interior cu centrul elementului exterior.În primul rând, să luăm în considerare cazul când dimensiunile exteriorului și Unitate interioară cunoscut. Să adăugăm afișarea regulii: bloc inline la elementul interior și text-align: centru și vertical-align: mijloc la elementul exterior.
Amintiți-vă că alinierea se aplică numai elementelor care au un mod de afișare în linie sau bloc în linie.
Să setăm dimensiunile blocurilor, precum și culorile de fundal, astfel încât să le vedem marginile.
Exterior ( lățime: 200 px; înălțime: 200 px; aliniere text: centru; aliniere verticală: mijloc; culoare de fundal: #ffc; ) . interior ( afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoare de fundal : #fcc; )
După aplicarea stilurilor, vom vedea că blocul interior este aliniat orizontal, dar nu vertical:
http://jsfiddle.net/c1bgfffq/De ce s-a întâmplat? Chestia este că proprietatea de aliniere verticală afectează alinierea elementul în sine, nu conținutul său(cu excepția cazului în care este aplicat celulelor tabelului). Prin urmare, cererea a acestei proprietati nu a dat nimic elementului exterior. Mai mult, aplicarea acestei proprietăți elementului interior nu va face nimic, din moment ce blocuri de linii(inline-block) sunt aliniate vertical în raport cu blocurile adiacente, iar în cazul nostru avem un bloc inline.
Există mai multe tehnici pentru a rezolva această problemă. Mai jos vom arunca o privire mai atentă asupra fiecăruia dintre ele.
Alinierea folosind un tabel
Prima soluție care îmi vine în minte este înlocuirea blocului exterior cu un tabel dintr-o celulă. În acest caz, alinierea va fi aplicată conținutului celulei, adică blocului interior.
http://jsfiddle.net/c1bgfffq/1/Minus evident această decizie– din punct de vedere semantic, este incorect folosirea tabelelor pentru aliniere. Al doilea dezavantaj este că crearea unui tabel necesită adăugarea unui alt element în jurul blocului exterior.
Primul minus poate fi eliminat parțial prin înlocuirea etichetelor table și td cu div și setarea modului de afișare a tabelului în CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Cu toate acestea, blocul exterior va rămâne în continuare un tabel cu toate consecințele care decurg.Alinierea folosind indentarea
Dacă înălțimile blocurilor interioare și exterioare sunt cunoscute, atunci alinierea poate fi stabilită folosind indentările verticale ale blocului interior folosind formula: (H exterior – H interior) / 2.Exterior ( înălțime: 200px; ) .interior (înălțime: 100px; margine: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/Dezavantajul soluției este că este aplicabilă doar într-un număr limitat de cazuri când se cunosc înălțimile ambelor blocuri.
Alinierea folosind înălțimea liniei
Dacă știți că blocul interior nu trebuie să ocupe mai mult de un rând de text, atunci puteți utiliza proprietatea line-height și o setați egală cu înălțimea bloc extern. Deoarece conținutul blocului interior nu trebuie să se încadreze la a doua linie, se recomandă să adăugați și spațiul alb: nowrap și overflow: reguli ascunse.Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( spațiu alb: nowrap; overflow: ascuns; )
http://jsfiddle.net/c1bgfffq/12/Această tehnică poate fi folosită și pentru a alinia textul cu mai multe linii dacă redefiniți valoarea înălțimii liniei pentru blocul interior și, de asemenea, adăugați afișajul: inline-block și vertical-align: middle rules.
Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( înălțime linie: normal; afișare: bloc în linie; aliniere verticală: mijloc; )
http://jsfiddle.net/c1bgfffq/15/Minus aceasta metoda este că trebuie cunoscută înălțimea blocului exterior.
Alinierea folosind „stretch”
Această metodă poate fi utilizată atunci când înălțimea blocului extern este necunoscută, dar este cunoscută înălțimea blocului intern.Pentru a face acest lucru aveți nevoie de:
- setată pe unitate externă poziționare relativă, iar la interior – absolut;
- adăugați regulile de sus: 0 și de jos: 0 la blocul interior, drept urmare se va întinde pe toată înălțimea blocului exterior;
- setați umplutura verticală a blocului interior la automat.
http://jsfiddle.net/c1bgfffq/4/Ideea din spatele acestei tehnici este că setarea unei înălțimi pentru un bloc întins și poziționat absolut face ca browserul să calculeze umplutura verticală într-un raport egal dacă este setat la automat.
Aliniere cu marginea negativă-sus
Această metodă a devenit cunoscută pe scară largă și este folosită foarte des. Ca și precedentul, se folosește atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea celui interior.Trebuie să setați blocul extern la poziționare relativă, iar blocul intern la poziționare absolută. Apoi trebuie să mutați blocul interior în jos cu jumătate din înălțimea superioară a blocului exterior: 50% și să-l ridicați cu jumătate de înălțime margine-top: -H interior / 2.
Exterior (poziție: relativă; ) .interior (înălțime: 100px; poziție: absolut; sus: 50%; margine-sus: -50px; )
http://jsfiddle.net/c1bgfffq/13/Dezavantajul acestei metode este că trebuie cunoscută înălțimea unității interioare.
Alinierea cu transformarea
Această metodă este similară cu cea anterioară, dar poate fi folosită atunci când înălțimea unității interioare este necunoscută. În acest caz, în loc să setați o umplutură negativă de pixeli, puteți utiliza proprietatea de transformare și puteți muta blocul interior în sus folosind funcția translateY și o valoare de -50% .Exterior ( poziție: relativ; ) .intern ( poziție: absolut; sus: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/De ce în metoda anterioară Nu ai putea seta valoarea ca procent? Deoarece valorile procentuale ale proprietății marjei sunt calculate în raport cu element părinte, o valoare de 50% ar fi egală cu jumătate din înălțimea blocului exterior și trebuia să ridicăm blocul interior la jumătate din înălțimea proprie. Proprietatea de transformare este perfectă pentru aceasta.
Dezavantajul acestei metode este că nu poate fi folosită dacă unitatea interioară are poziționare absolută.
Aliniere cu Flexbox
Cel mai mod modern alinierea verticală este de a utiliza Flexible Box Layout (cunoscut în mod popular sub numele de Flexbox). Acest modul vă permite să controlați în mod flexibil poziționarea elementelor pe pagină, aranjandu-le aproape oriunde. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.Blocul exterior trebuie setat să afișeze: flex și blocul interior la margine: auto . Și este tot! Frumos, nu-i așa?
Exterior ( afișaj: flex; lățime: 200 px; înălțime: 200 px; ) . interior ( lățime: 100 px; margine: automat; )
http://jsfiddle.net/c1bgfffq/14/Dezavantajul acestei metode este că Flexbox este acceptat doar de browserele moderne.
Ce metodă ar trebui să aleg?
Trebuie să începeți de la declarația problemei:- Pentru a alinia textul pe verticală, este mai bine să utilizați indentări verticale sau proprietatea line-height.
- Pentru elementele poziționate absolut cu o înălțime cunoscută (de exemplu, pictograme), metoda cu o proprietate negativă margin-top este ideală.
- Pentru cazuri mai complexe, când înălțimea blocului este necunoscută, trebuie să utilizați un pseudo element sau proprietatea transform.
- Ei bine, dacă sunteți atât de norocos încât nu aveți nevoie să susțineți versiuni mai vechi ale browserului IE, atunci, desigur, este mai bine să utilizați Flexbox.
Etichete: Adăugați etichete
- #latură
- CSS
- HTML
- Mese,
- indentare,
- inaltimea liniei
- întindere,
- marja negativa,
- transforma
- pseudo element
- flexbox.
- setați poziționarea relativă față de blocul extern și poziționarea absolută față de blocul intern;
- adăugați regulile de sus: 0 și de jos: 0 la blocul interior, drept urmare se va întinde pe toată înălțimea blocului exterior;
- setați umplutura verticală a blocului interior la automat.
- Pentru a alinia textul pe verticală, este mai bine să utilizați indentări verticale sau proprietatea line-height.
- Pentru elementele poziționate absolut cu o înălțime cunoscută (de exemplu, pictograme), metoda cu o proprietate negativă margin-top este ideală.
- Pentru cazuri mai complexe, când înălțimea blocului este necunoscută, trebuie să utilizați un pseudo element sau proprietatea transform.
- Ei bine, dacă sunteți atât de norocos încât nu aveți nevoie să susțineți versiuni mai vechi ale browserului IE, atunci, desigur, este mai bine să utilizați Flexbox.
- text-align:center;
- margine:0 auto;
- .left (float:left;)
- .right(float:right)
- .left (float:left;)
- .right(float:right)
- subsol (clear:both)
- aliniere de sus - .child(vertical-align:top);
- aliniere la centru - .child(vertical-align:middle);
- alinierea prin limita inferioara- .copil(vertical-align:bottom);
- .second(float:left)
- .a treia (float:right)
- .clearfix(înălțime: 0; clar: ambele;)
- .left(float:left)
- .right(float:right)
- .container:după(conținut:""; afișare:tabel; clear:both;)
Cred că mulți dintre voi care ați avut de-a face cu aspectul ați întâmpinat nevoia de a alinia elementele pe verticală și de a cunoaște dificultățile care apar la alinierea unui element la centru.
Da, există o proprietate specială de aliniere verticală cu mai multe valori în CSS pentru alinierea verticală. Cu toate acestea, în practică, nu funcționează deloc așa cum era de așteptat. Să încercăm să ne dăm seama.
Să comparăm următoarele abordări. Aliniați folosind:
Există două elemente div, unul dintre ele imbricat în celălalt. Să le dăm clasele corespunzătoare - exterioare și interioare.
Provocarea este de a alinia elementul interior cu centrul elementului exterior.
În primul rând, să luăm în considerare cazul când dimensiunile blocurilor externe și interne cunoscut. Să adăugăm afișarea regulii: bloc inline la elementul interior și text-align: centru și vertical-align: mijloc la elementul exterior.
Amintiți-vă că alinierea se aplică numai elementelor care au un mod de afișare în linie sau bloc în linie.
Să setăm dimensiunile blocurilor, precum și culorile de fundal, astfel încât să le vedem marginile.
Exterior ( lățime: 200 px; înălțime: 200 px; aliniere text: centru; aliniere verticală: mijloc; culoare de fundal: #ffc; ) . interior ( afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoare de fundal : #fcc; )
După aplicarea stilurilor, vom vedea că blocul interior este aliniat orizontal, dar nu vertical:
http://jsfiddle.net/c1bgfffq/
De ce s-a întâmplat? Chestia este că proprietatea de aliniere verticală afectează alinierea elementul în sine, nu conținutul său(cu excepția cazului în care este aplicat celulelor tabelului). Prin urmare, aplicarea acestei proprietăți elementului exterior nu a produs nimic. Mai mult, aplicarea acestei proprietăți unui element interior nu va face nimic, deoarece blocurile inline sunt aliniate vertical față de blocurile adiacente, iar în cazul nostru avem un bloc inline.
Există mai multe tehnici pentru a rezolva această problemă. Mai jos vom arunca o privire mai atentă asupra fiecăruia dintre ele.
Alinierea folosind un tabel
Prima soluție care îmi vine în minte este înlocuirea blocului exterior cu un tabel dintr-o celulă. În acest caz, alinierea va fi aplicată conținutului celulei, adică blocului interior.
http://jsfiddle.net/c1bgfffq/1/
Dezavantajul evident al acestei soluții este că, din punct de vedere semantic, este incorect folosirea tabelelor pentru aliniere. Al doilea dezavantaj este că crearea unui tabel necesită adăugarea unui alt element în jurul blocului exterior.
Primul minus poate fi eliminat parțial prin înlocuirea etichetelor table și td cu div și setarea modului de afișare a tabelului în CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Cu toate acestea, blocul exterior va rămâne în continuare un tabel cu toate consecințele care decurg.
Alinierea folosind indentarea
Dacă înălțimile blocurilor interioare și exterioare sunt cunoscute, atunci alinierea poate fi stabilită folosind indentările verticale ale blocului interior folosind formula: (H exterior – H interior) / 2.Exterior ( înălțime: 200px; ) .interior (înălțime: 100px; margine: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
Dezavantajul soluției este că este aplicabilă doar într-un număr limitat de cazuri când se cunosc înălțimile ambelor blocuri.
Alinierea folosind înălțimea liniei
Dacă știți că blocul interior nu trebuie să ocupe mai mult de un rând de text, atunci puteți utiliza proprietatea line-height și o puteți seta egală cu înălțimea blocului exterior. Deoarece conținutul blocului interior nu trebuie să se încadreze la a doua linie, se recomandă să adăugați și spațiul alb: nowrap și overflow: reguli ascunse.Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( spațiu alb: nowrap; overflow: ascuns; )
http://jsfiddle.net/c1bgfffq/12/
Această tehnică poate fi folosită și pentru a alinia textul cu mai multe linii dacă redefiniți valoarea înălțimii liniei pentru blocul interior și, de asemenea, adăugați afișajul: inline-block și vertical-align: middle rules.
Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( înălțime linie: normal; afișare: bloc în linie; aliniere verticală: mijloc; )
http://jsfiddle.net/c1bgfffq/15/
Dezavantajul acestei metode este că trebuie cunoscută înălțimea blocului exterior.
Alinierea folosind „stretch”
Această metodă poate fi utilizată atunci când înălțimea blocului extern este necunoscută, dar este cunoscută înălțimea blocului intern.Pentru a face acest lucru aveți nevoie de:
http://jsfiddle.net/c1bgfffq/4/
Ideea din spatele acestei tehnici este că setarea unei înălțimi pentru un bloc întins și poziționat absolut face ca browserul să calculeze umplutura verticală într-un raport egal dacă este setat la automat.
Aliniere cu marginea negativă-sus
Această metodă a devenit cunoscută pe scară largă și este folosită foarte des. Ca și precedentul, se folosește atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea celui interior.Trebuie să setați blocul extern la poziționare relativă, iar blocul intern la poziționare absolută. Apoi trebuie să mutați blocul interior în jos cu jumătate din înălțimea superioară a blocului exterior: 50% și să-l ridicați cu jumătate de înălțime margine-top: -H interior / 2.
Exterior (poziție: relativă; ) .interior (înălțime: 100px; poziție: absolut; sus: 50%; margine-sus: -50px; )
http://jsfiddle.net/c1bgfffq/13/
Dezavantajul acestei metode este că trebuie cunoscută înălțimea unității interioare.
Alinierea cu transformarea
Această metodă este similară cu cea anterioară, dar poate fi folosită atunci când înălțimea unității interioare este necunoscută. În acest caz, în loc să setați o umplutură negativă de pixeli, puteți utiliza proprietatea de transformare și puteți muta blocul interior în sus folosind funcția translateY și o valoare de -50% .Exterior ( poziție: relativ; ) .intern ( poziție: absolut; sus: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
De ce a fost imposibil să setați valoarea ca procent în metoda anterioară? Deoarece valorile procentuale ale marjei sunt calculate în raport cu elementul părinte, o valoare de 50% ar fi jumătate din înălțimea cutiei exterioare și ar trebui să ridicăm cutia interioară la jumătate din înălțimea proprie. Proprietatea de transformare este perfectă pentru aceasta.
Dezavantajul acestei metode este că nu poate fi folosită dacă unitatea interioară are poziționare absolută.
Aliniere cu Flexbox
Cel mai modern mod de aliniere verticală este utilizarea Flexible Box Layout (cunoscută în mod popular sub numele de Flexbox). Acest modul vă permite să controlați în mod flexibil poziționarea elementelor pe pagină, aranjandu-le aproape oriunde. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.Blocul exterior trebuie setat să afișeze: flex și blocul interior la margine: auto . Și este tot! Frumos, nu-i așa?
Exterior ( afișaj: flex; lățime: 200 px; înălțime: 200 px; ) . interior ( lățime: 100 px; margine: automat; )
http://jsfiddle.net/c1bgfffq/14/
Dezavantajul acestei metode este că Flexbox este acceptat doar de browserele moderne.
Ce metodă ar trebui să aleg?
Trebuie să începeți de la declarația problemei:Când așezați o pagină, este adesea necesară alinierea Centru CSS-mod: de exemplu, centrați blocul principal. Există mai multe opțiuni pentru rezolvarea acestei probleme, fiecare dintre acestea, mai devreme sau mai târziu, trebuie să fie folosită de orice designer de layout.
Centrare alinierea textului
Adesea, în scopuri decorative, este necesar să setați textul la aliniere la centru; CSS în acest caz vă permite să reduceți timpul de aspect. Anterior, acest lucru se făcea folosind atribute HTML, dar acum standardul cere ca textul să fie aliniat folosind foi de stil. Spre deosebire de blocuri, pentru care trebuie să modificați marginile, în Alinierea CSS Centrarea textului se face folosind o singură linie:
Această proprietate este moștenită și transmisă de la părinte către toți descendenții. Afectează nu numai textul, ci și alte elemente. Pentru a face acest lucru, acestea trebuie să fie inline (de exemplu, span) sau inline-block (orice blocuri care au setată proprietatea display: block). Această ultimă opțiune vă permite, de asemenea, să modificați lățimea și înălțimea elementului și să reglați indentările mai flexibil.
Adesea, pe pagini, alinierea este atribuită etichetei în sine. Acest lucru invalidează imediat codul, deoarece W3C a depreciat atributul align. Utilizarea acestuia pe o pagină nu este recomandată.
Alinierea unui bloc la centru
Dacă trebuie să centrați un div, CSS oferă o modalitate destul de convenabilă: utilizarea marginilor. Indentațiile pot fi setate atât pentru elementele bloc, cât și pentru elementele bloc inline. Valoarea proprietății ar trebui să fie 0 (căptușeală verticală) și automată (căptușeală orizontală automată):
Acum această opțiune este recunoscută ca fiind absolut valabilă. Folosirea padding-ului extern vă permite și să setați imaginea să fie centrată: vă permite să rezolvați multe probleme legate de poziționarea unui element pe pagină.
Aliniați un bloc la stânga sau la dreapta
Uneori nu este necesară alinierea centrului CSS, dar trebuie să plasați două blocuri unul lângă altul: unul pe marginea stângă, celălalt pe dreapta. Pentru asta există proprietate de plutire, care poate lua una dintre cele trei valori: stânga, dreapta sau niciunul. Să presupunem că aveți două blocuri care trebuie așezate unul lângă altul. Atunci codul va fi astfel:
Dacă există și un al treilea bloc, care ar trebui să fie situat sub primele două blocuri (de exemplu, un subsol), atunci trebuie să i se atribuie proprietatea clear:
Cert este că blocurile cu clasele stânga și dreapta cad din fluxul general, adică toate celelalte elemente ignoră însăși existența elementelor aliniate. Proprietatea clear:both permite subsolului sau oricărui alt bloc să vadă elementele care au căzut din flux și interzice plutirea atât în stânga, cât și în dreapta. Prin urmare, în exemplul nostru, subsolul se va deplasa în jos.
Aliniere verticală
Există cazuri în care nu este suficient să setați alinierea la centru folosind metode CSS; de asemenea, trebuie să schimbați pozitie verticala bloc de copii. Orice element în linie sau în bloc poate fi imbricat la marginea de sus sau de jos, în mijlocul unui element părinte sau în orice locație. Cel mai adesea, blocul trebuie aliniat la centru; pentru aceasta, se folosește atributul vertical-align. Să presupunem că există două blocuri, unul imbricat în celălalt. În acest caz, blocul interior este un element inline-block (afișare: inline-block). Trebuie să aliniați blocul copil pe verticală:
Nici alinierea textului, nici alinierea verticală nu afectează elementele blocului.
Posibile probleme cu blocurile aliniate
Uneori, centrarea unui div folosind CSS poate cauza mici probleme. De exemplu, când folosiți float: să presupunem că există trei blocuri: .first, .second și .third. Al doilea și al treilea bloc se află în primul. Un element cu clasa secundă este aliniat la stânga și ultimul bloc- pe dreapta. După stabilizare, ambele au căzut din flux. Dacă elementul părinte nu are un set de înălțime (de exemplu, 30em), atunci nu se va mai întinde la înălțimea blocurilor sale copil. Pentru a evita această eroare, utilizați un „spacer” - un bloc special care vede .second și .third. Cod CSS:
Pseudo-clasa:after este adesea folosită, ceea ce vă permite, de asemenea, să returnați blocurile la locul lor prin crearea unui pseudo-spacer (în exemplu, un div cu clasa container se află în interior.first și conține.stânga și.dreapta) :
Opțiunile de mai sus sunt cele mai comune, deși există mai multe variante. Puteți găsi întotdeauna cel mai simplu și mai convenabil mod de a crea un pseudo-distanțier prin experimentare.
O altă problemă pe care o întâmpină adesea designerii de layout este alinierea elementelor în bloc. Un spațiu este adăugat automat după fiecare dintre ele. Proprietatea marjei, care este setată la o liniuță negativă, ajută la rezolvarea acestui lucru. Există și alte metode care sunt folosite mult mai rar: de exemplu, zeroing.În acest caz, font-size: 0 este scris în proprietățile elementului părinte. Dacă există text în interiorul blocurilor, atunci dimensiunea necesară a fontului este deja returnată în proprietățile elementelor de bloc inline. De exemplu, font-size:1em. Această metodă nu este întotdeauna convenabilă, așa că opțiunea cu indentări externe este mult mai des folosită.
Alinierea blocurilor vă permite să creați frumos și pagini funcționale: aceasta include aspectul aspectului general, aranjarea mărfurilor în magazinele online și fotografiile de pe site-ul cărților de vizită.
Articolul de astăzi își propune să vă arate cum să centrați un div, atât pe orizontală, cât și pe verticală, folosind câteva trucuri CSS. De asemenea, vă vom spune cum să centrați întreaga pagină sau într-un element div individual.
Centrați cu ușurință un element DIV pe pagină
Această metodă va funcționa perfect în toate browserele.
CSS
Center-div (marja: 0 automat; lățime: 100px; )
Exemplu
Valoarea auto din proprietatea margine setează marginile din stânga și din dreapta la întregul spațiu disponibil pe pagină. Lucrul important de reținut aici este că elementul div centrat trebuie să aibă setată o valoare a lățimii.
Centrarea unui DIV în interiorul unui element DIV în mod vechi
Această metodă div de aliniere centrală va funcționa în toate browserele.
CSS
Outer-div ( umplutură: 30 px; ) . inner-div ( marjă: 0 automat; lățime: 100 px; )
HTML
Exemplu
Div-ul exterior poate fi plasat oriunde, dar div-ul interior trebuie să aibă o lățime specificată ( lăţime).
Centrarea unui DIV în interiorul unui element DIV folosind inline-block
În această metodă centrare divîn interiorul unui div nu este necesar să specificați lățimea elementului interior. Va funcționa în toate browsere moderne, inclusiv IE8.
CSS
Outer-div ( padding: 30px; text-align: center; ) .inner-div ( display: inline-block; padding: 50px; )
HTML
Exemplu
proprietatea text-align funcționează numai pe elementele inline. Valoarea inline-block permite ca div-ul interior să fie afișat ca element inline și, de asemenea, ca bloc ( inline-block). Proprietatea text-align pe elementul div exterior ne va permite să centrem div-ul interior.
Centrați un DIV în interiorul unui element DIV orizontal și vertical
Aici margin: auto este folosit pentru a centra div-ul în centrul paginii. Exemplul va funcționa în toate browserele moderne.
CSS
Outer-div ( umplutură: 30 px; ) . inner-div ( margine: automată; lățime: 100 px; înălțime: 100 px; )
HTML
Exemplu
Elementul div interior trebuie să aibă o lățime specificată ( lăţime) și înălțimea ( înălţime). Metoda nu va funcționa dacă elementul div exterior are o înălțime fixă.
Centrați DIV în partea de jos a paginii
Aici pentru locații div centrat vertical folosește marginea: poziționarea automată și absolută pentru elementul exterior. Metoda va funcționa în toate browserele moderne.
CSS
Div-exterior (poziție: absolut; jos: 30 px; lățime: 100%; ) .div-interior (marja: 0 automat; lățime: 100 px; înălțime: 100 px; culoare de fundal: #ccc; )
HTML
Exemplu
Div-ul interior trebuie să aibă o lățime setată. Spațiul din partea de jos a paginii este ajustat folosind proprietatea de jos a div-ului exterior. De asemenea, puteți centra un div în partea de sus a paginii, înlocuind proprietatea de jos cu proprietatea de sus.
Centrați DIV-urile pe pagină vertical și orizontal
Aici, pentru a centra div-ul, folosim din nou margin: poziționarea automată și absolută a div-ului exterior. Metoda va funcționa în toate browserele moderne.
CSS
Center-div (poziție: absolut; margine: automat; sus: 0; dreapta: 0; jos: 0; stânga: 0; lățime: 100px; înălțime: 100px; )
Exemplu
Elementul div trebuie să aibă un set de lățime ( lăţime) și înălțimea ( înălţime).
Realizarea de centrare adaptivă a unui element DIV pe pagină
Aici pentru alinierea div in centru folosind CSS Facem ca lățimea elementului div să răspundă, astfel încât să reacționeze la modificările dimensiunii ferestrei. Această metodă funcționează în toate browserele.
CSS
Center-div (marja: 0 automat; lățime maximă: 700px; )
Exemplu
Un element div centrat trebuie să aibă proprietatea de lățime maximă setată.
Centrarea unui DIV în interiorul unui element folosind proprietățile blocului interior
Elementul interior div aici este receptiv. Această metodă de centrare a unui div în interiorul unui div va funcționa în toate browserele.
CSS
Div-exterior (padding: 30px; ) .inner-div (marja: 0 automat; lățime maximă: 700px; )
HTML
Exemplu
Div-ul interior trebuie să aibă proprietatea de lățime maximă setată.
Centrarea a două div-uri receptive una lângă alta
Aici avem două elemente div receptive una lângă alta. Această metodă de a plasa un div în centrul ecranului va funcționa în toate browserele moderne.
CSS
Container ( text-align: center; ) .left-div ( display: inline-block; max-width: 300px; vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) ecran și (lățime maximă: 600 px) ( .left-div, .right-div ( lățime maximă stânga: 100%; ) )
HTML
Exemplu
Aici avem mai multe elemente cu proprietatea inline-block aplicată, situate în interiorul unui container centrat. Acest exemplu folosește și interogări media CSS; adică, dacă dimensiunea ecranului este mai mică de 600 de pixeli, atunci proprietatea max-width atât pentru div-ul din stânga cât și din dreapta este setată la 100%.
Element DIV centrat folosind Flexbox
Aici centrem div-ul CSS folosind Flexbox. Este destinat să faciliteze procesul de dezvoltare a designului interfețe cu utilizatorul. Acest modul este acceptat de Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ și Android Browser 40+.
CSS
Container ( display: flex; align-items: center; justify-content: center; înălțime: 100vh; ) .item (culoare fundal: #f3f2ef; chenar-radius: 3px; lățime: 200px; înălțime: 100px; )
