De la autor: Vă urez bun venit din nou pe paginile blogului nostru. În articolul de astăzi aș dori să vorbesc despre diverse tehnici de aliniere care pot fi aplicate atât la blocuri, cât și la conținutul acestora. În special, cum să aliniați blocurile în css, precum și alinierea textului.
Alinierea blocurilor la centru
În CSS, centrarea unui bloc este ușoară. Aceasta este cea mai cunoscută tehnică pentru mulți, dar aș vrea să vorbesc despre ea chiar acum, în primul rând. Aceasta înseamnă alinierea centrată orizontal în raport cu elementul părinte. Cum se face? Să presupunem că avem un container și subiectul nostru experimental este în el:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Să presupunem că acesta este antetul site-ului. Nu se întinde pe toată lățimea ferestrei și trebuie să o centram. Scriem astfel:
#antet( latime / max - latime : 800px ; marja: 0 auto; |
Trebuie să specificăm lățimea exactă sau maximă, apoi notăm proprietatea cheii - margine: 0 auto. Setează marginile exterioare ale antetului nostru, prima valoare determină marginile de sus și de jos, iar a doua determină marginile din dreapta și din stânga. Valoarea auto îi spune browserului să calculeze automat umplutura pe ambele părți, astfel încât elementul să fie exact centrat în părinte. Confortabil!
Alinierea textului
Aceasta este, de asemenea, o tehnică foarte simplă. Pentru a alinia toate elementele inline, puteți utiliza proprietatea text-align și valorile acesteia: stânga, dreapta, centru. Acesta din urmă centrează textul, care este ceea ce avem nevoie. Puteți chiar să aliniați o imagine în același mod, deoarece este, de asemenea, un element inline în mod implicit.
Aliniați textul pe verticală
Dar acest lucru este mai complicat. În mod implicit, nu există nicio proprietate simplă, binecunoscută, care să centreze cu ușurință textul pe verticală într-un container bloc. Cu toate acestea, există mai multe tehnici cu care designerii de layout au venit de-a lungul anilor.
Setați înălțimea blocului folosind căptușeală. Modul nu este să setați o înălțime explicită folosind înălțimea, ci să o creați artificial folosind căptușeli în partea de sus și de jos, care ar trebui să fie aceleași. Să creăm orice bloc și să îi scriem următoarele proprietăți:
div( fundal: #ccc; umplutură: 30px 0; )
div( fundal: #ccc; umplutură: 30px 0; |
Fundalul este doar pentru a arăta vizual marginile, precum și umplutura. Acum, înălțimea blocului este formată din aceste două liniuțe și linia în sine și totul arată astfel:
Definiți înălțimea liniei pentru bloc. Cred că acesta este un mod mai corect dacă trebuie să aliniați o linie de text. Cu acesta, puteți scrie înălțimea conform normalului, folosind proprietatea înălțime. După aceasta, trebuie să seteze și înălțimea liniei, la fel ca înălțimea blocului în ansamblu.
div( înălțime: 60px; înălțime linie: 60px; )
div( înălțime: 60px; înălțimea liniei: 60px; |
Rezultatul va fi similar cu imaginea de mai sus. Totul va funcționa chiar dacă adăugați umplutură. Cu toate acestea, doar pentru o linie. Dacă aveți nevoie de mai mult text în element, atunci această metodă nu va funcționa.
Convertiți un bloc într-o celulă de tabel. Esența acestei metode este că celula tabelului are proprietatea vertical-align: middle, care centrează elementul pe verticală. Prin urmare, în acest caz, blocul trebuie setat la următoarele:
div( afișare: celulă-tabel; aliniere verticală: mijloc; )
div( afișare: tabel - celulă; vertical - aliniere : mijloc ; |
Această metodă este bună deoarece puteți alinia cât de mult text doriți în centru. Dar este mai bine să scrieți display: table în blocul în care este imbricat div-ul nostru, altfel s-ar putea să nu funcționeze.
Ei bine, aici ajungem la ultima tehnică pentru astăzi - aceasta este alinierea verticală a blocurilor în sine. Trebuie spus că, din nou, nu există nicio proprietate care ar fi destinată special pentru aceasta, dar există câteva trucuri despre care ar trebui să știți.
Setați indentări ca procent. Dacă cunoașteți înălțimea unui element părinte și plasați un alt element bloc în interiorul acestuia, îl puteți centra folosind umplutura procentuală. De exemplu, părintele are o înălțime de 600 de pixeli. Puneți un bloc în el care are 300 de pixeli înălțime. Cât de mult ai nevoie să dai înapoi în partea de sus și de jos pentru a-l centra? 150 de pixeli fiecare, ceea ce reprezintă 25% din înălțimea părintelui.
Această metodă permite alinierea numai atunci când dimensiunile permit calcule. Și dacă părintele tău are 887 de pixeli în înălțime, atunci nu vei putea înregistra nimic cu precizie, acest lucru este deja clar.
Inserați un element într-o celulă de tabel. Din nou, dacă transformăm elementul părinte într-o celulă de tabel, atunci blocul inserat în acesta va fi centrat automat pe verticală. Pentru a face acest lucru, părintele trebuie doar să seteze vertical-align: middle.
Și dacă, pe lângă aceasta, scriem și margine: 0 auto, atunci elementul va deveni centrat orizontal!
Vlad Merjevici
Datorită faptului că conținutul celulelor tabelului poate fi aliniat simultan pe orizontală și pe verticală, posibilitățile de control al poziției elementelor unul față de celălalt sunt extinse. Tabelele vă permit să setați alinierea imaginilor, textului, câmpurilor de formular și a altor elemente unul față de celălalt și cu pagina web în ansamblu. În general, alinierea este necesară în principal pentru a stabili conexiuni vizuale între diferite elemente, precum și pentru a le grupa.
Centrare pe verticală
O modalitate de a arăta vizitatorului focalizarea și numele site-ului este să folosești o pagină de introducere. Aceasta este prima pagină pe care, de regulă, există un ecran de splash flash sau o imagine care exprimă ideea principală a site-ului. Imaginea este și un link către alte secțiuni ale site-ului. Trebuie să plasați această imagine în centrul ferestrei browserului, indiferent de rezoluția monitorului. În acest scop, puteți utiliza un tabel cu lățime și înălțime de 100% (exemplul 1).
Exemplul 1: Centrarea desenului
|
În acest exemplu, alinierea orizontală este setată utilizând parametrul etichetei align="center".
Pentru a seta înălțimea mesei la 100%, trebuie să eliminați, codul își încetează valabilitatea.
Utilizarea lățimii și înălțimii pentru a acoperi întreaga zonă disponibilă a paginii web asigură că conținutul tabelului va fi aliniat exact în centrul ferestrei browserului, indiferent de dimensiunea acestuia.
Aliniere orizontala
Prin combinarea atributelor align (aliniere orizontală) și valign (aliniere verticală) ale etichetei
Să ne uităm la câteva exemple de aliniere a textului conform figurii de mai jos.
Alinierea de sus
Pentru a specifica alinierea superioară a conținutului celulei, pentru o etichetă
Exemplul 2: Utilizarea valign
| Coloana 1 | Coloana 2 |
În acest exemplu, caracteristicile celulei sunt controlate folosind parametrii etichetei
Exemplul 3: aplicarea stilurilor pentru aliniere
| Coloana 1 | Coloana 2 |
Pentru a scurta codul, acest exemplu folosește gruparea selectoarelor, deoarece proprietățile de aliniere verticală și de umplutură sunt aplicate la două celule în același timp.
Alinierea de jos se face în același mod, dar în loc de valoarea de sus, se folosește partea de jos.
Alinierea la centru
În mod implicit, conținutul celulei este aliniat la centrul liniei lor verticale, așa că dacă coloanele au înălțimi diferite, trebuie să setați alinierea la marginea de sus. Uneori mai trebuie să părăsiți metoda de aliniere inițială, de exemplu, când plasați formule, așa cum se arată în Fig. 2.
În acest caz, formula este situată strict în centrul ferestrei browserului, iar numărul acesteia este situat pe marginea dreaptă. Pentru a aranja elementele în acest fel, veți avea nevoie de un tabel cu trei celule. Celulele cele mai exterioare ar trebui să aibă aceleași dimensiuni, în celula din mijloc alinierea se face în centru, iar în cea dreaptă - de-a lungul marginii din dreapta (exemplul 4). Acest număr de celule este necesar pentru a vă asigura că formula este poziționată în centru.
Exemplul 4: Alinierea formulei
 |
(18.6) |
În acest exemplu, prima celulă a tabelului este lăsată goală, servește doar pentru a crea o indentare, care, apropo, poate fi setată și folosind stiluri.
Alinierea elementelor de formular
Folosind tabele, este convenabil să determinați poziția câmpurilor de formular, mai ales atunci când acestea sunt intercalate cu text. Una dintre opțiunile de proiectare pentru formular, care este destinată introducerii unui comentariu, este prezentată în Fig. 3.
Pentru a vă asigura că textul de lângă câmpurile formularului este aliniat la dreapta și elementele formularului în sine sunt aliniate la stânga, veți avea nevoie de un tabel cu un chenar invizibil și două coloane. Coloana din stânga va conține textul în sine, iar coloana din dreapta va conține câmpuri de text (exemplul 5).
Exemplul 5: Alinierea câmpurilor de formular
În acest exemplu, pentru acele celule în care este necesară alinierea corectă, este adăugat atributul align="right". Pentru a vă asigura că eticheta Comentariu este poziționată în partea de sus a textului cu mai multe linii, celula corespunzătoare este setată la alinierea sus folosind atributul valign.
Centrarea elementelor pe verticală folosind CSS este o sarcină care prezintă o anumită dificultate pentru dezvoltatori. Cu toate acestea, există mai multe metode de rezolvare, care sunt destul de simple. Această lecție prezintă 6 opțiuni pentru centrarea verticală a conținutului.
Să începem cu o descriere generală a problemei.
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 setarea automată a marginilor din stânga și din dreapta.
Majoritatea oamenilor, când folosesc proprietatea text-align:, se referă la proprietatea vertical-align pentru centrarea verticală. Totul pare destul de logic. Dacă ați folosit șabloane de tabel, probabil că ați folosit pe scară largă atributul valign, ceea ce întărește credința că vertical-align este modalitatea corectă de a rezolva problema.
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ă se 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
Această metodă funcționează atunci când doriți să centrați o linie de text pe verticală. Tot ce trebuie să faceți este să setați înălțimea liniei să fie mai mare decât dimensiunea fontului.
În mod implicit, spațiul alb va fi distribuit uniform în partea de sus și de jos a textului. Și linia va fi centrată vertical. Adesea, înălțimea liniei este egală cu înălțimea elementului.
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. Puteți utiliza orice valoare mai mare decât dimensiunea fontului textului.
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; )
Valoarea proprietății line-height 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ă: Un 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; )
Setăm ieșirea tabelului la elementul div părinte și ieșim 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 este necesară cunoașterea înălțimii elementului în acest caz. 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ă, umplutura egală este setată în mod explicit deasupra și sub elementul părinte.
HTML:
CSS:
#părinte ( umplutură: 5% 0; ) #copil ( umplutură: 10% 0; )
Exemplul de cod CSS setează umplutura de sus și de jos 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.
Unitățile de măsură relative sunt utilizate pentru a redimensiona dinamic elementele. 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 clear: both , dar este suficient să folosiți aceeași direcție ca decalajul elementului 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ă analizați proiectul și să alegeți pe cel care se potrivește cel mai bine cerințelor.
Foarte des sarcina este de a alinia un bloc în centrul paginii/ecranului și chiar și așa, fără un script Java, fără a seta dimensiuni rigide sau indentări negative și astfel încât barele de defilare să funcționeze 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ă.
Poziționare bloc folosind atributele de sus și din stânga cu 50% și cunoscând înălțimea și lățimea blocului în avans, setați o marjă negativă, care este egală cu jumătate din dimensiune bloc. Un mare dezavantaj al acestei opțiuni este că trebuie să numărați indenturile negative. De asemenea bloc nu se comportă corect atunci când este înconjurat de bare de defilare - este pur și simplu tăiat deoarece are margini negative.
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ă.
Mai puțin obișnuit, dar similar cu primul. Pentru bloc setăm lățimea și înălțimea, poziționăm atributele sus dreapta jos stânga la 0 și setăm marginea automată. Avantajul acestei opțiuni este utilizarea barelor de defilare mamă, dacă acesta din urmă are 100% lățime și înălțime. Dezavantajul acestei metode este setarea rigidă a dimensiunilor.
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.
Sa intrebam mamă stiluri de tabel, celulă mamă Setați alinierea textului la centru. A bloc setăm modelul blocului de linii. Dezavantajele pe care le primim sunt că nu funcționează barele de defilare și, în general, estetica „emulației” mesei nu este.
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.
Această opțiune este lipsită de toate problemele enumerate în metodele anterioare și, de asemenea, rezolvă problemele originale. Ideea este că mamă setați stiluri pseudo elementînainte, și anume 100% înălțime, aliniere la centru și model de bloc inline. Este la fel cu bloc se plasează un model de bloc de linii, centrat. La bloc nu a „căzut” sub pseudo element, când dimensiunile primului sunt mai mari decât mamă, indicați mamă spații albe: nowrap și font-size: 0, după care bloc anulați aceste stiluri cu următoarele - spații albe: normal. În acest exemplu, font-size: 0 este necesar pentru a elimina spațiul rezultat dintre mamăȘi bloc datorită formatării codului. Spațiul poate fi îndepărtat în alte moduri, dar este considerat cel mai bine să îl evitați pur și simplu.
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.
Una dintre cele mai simple și mai elegante moduri este utilizarea flexbox. Nu necesită mișcări inutile ale corpului, descrie destul de clar esența a ceea ce se întâmplă și este foarte flexibil. Singurul lucru care merită reținut atunci când alegeți această metodă este suportul pentru IE de la versiunea 10 inclusiv. caniuse.com/#feat=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; ) .bloc ( fundal: #60a839; img ( afișare: bloc; chenar: niciunul; ) )
Opțiunea 6. Transform.
Potrivit dacă suntem limitați de structură și nu există nicio modalitate de a manipula elementul părinte, dar blocul trebuie aliniat cumva. Funcția css translate() va veni în ajutor. O valoare de 50% poziționare absolută va poziționa colțul din stânga sus al blocului exact în centru, apoi o valoare de translație negativă va muta blocul în raport cu propriile dimensiuni. Vă rugăm să rețineți că efectele negative pot apărea sub formă de margini neclare sau stil de font. De asemenea, această metodă poate duce la probleme cu calcularea poziției blocului folosind java-script Uneori, pentru a compensa pierderea de 50% din lățimea din cauza utilizării proprietății CSS stânga, regula specificată pentru bloc. ajutor: margine-dreapta: -50% .
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.
Opțiunea utilizator azproduction unde blocîncadrat într-o etichetă de buton. Butonul are proprietatea de a centra tot ce se afla in interiorul lui, si anume elementele modelului inline si block-line (inline-block). În practică, nu recomand să-l folosești.
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ă
Folosind ideea celei de-a patra opțiuni, puteți seta marje externe pentru bloc, iar acesta din urmă va fi afișat corespunzător, înconjurat de bare de defilare.Exemplu: jsfiddle.net/serdidg/nfqg9rza/2.
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:
Aliniați textul vertical în CSS- o muncă foarte dificilă. Am văzut destui oameni care se luptă cu asta încât să găsesc în mod constant erori „critice” atunci când vine vorba de design responsive real.
Dar nu vă temeți: dacă vă luptați deja cu alinierea verticală CSS, ați ajuns la locul potrivit.
Să vorbim despre proprietatea de aliniere verticală CSS
Când am început să lucrez în dezvoltarea web, m-am luptat puțin cu această proprietate. M-am gândit că ar trebui să funcționeze ca o proprietate clasică" aliniere text" Oh, dacă totul ar fi atât de simplu...
proprietate CSS vertical-align funcționează excelent cu tabele, dar nu cu div-uri sau alte elemente. Când îl utilizați pe un div, acesta aliniază elementul în raport cu alte div-uri, dar nu și conținutul său. În acest caz, proprietatea funcționează numai cu afișarea: inline-block; .
Vezi exemplul
Vrem să concentrăm conținutul, nu div-ul în sine!
Aveți două opțiuni. Dacă aveți doar div-uri text, puteți utiliza proprietatea line-height. Aceasta înseamnă că trebuie să cunoașteți înălțimea elementului, dar nu o puteți seta. În acest fel, textul tău va fi întotdeauna în centru.
Adevărul despre această abordare Alinierea verticală CSS exista un dezavantaj. Dacă textul are mai multe linii, atunci înălțimea liniei va fi înmulțită cu numărul de linii. Cel mai probabil, în acest caz, vei ajunge cu o pagină teribil de aranjată.
Aruncă o privire la acest exemplu
Dacă conținutul pe care doriți să îl centrați constă din mai multe rânduri, atunci este mai bine să utilizați div-urile de tabel. Puteți folosi și tabele, dar acest lucru nu este corect din punct de vedere semantic. Dacă aveți nevoie de pauze în scopuri receptive, este mai bine să utilizați elemente div.
Pentru ca acest lucru să funcționeze, trebuie să existe un container părinte cu display: table și în interiorul acestuia numărul dorit de coloane pe care doriți să le centrați folosind display: table-cell și vertical-align: middle .
Vezi exemplul
De ce funcționează acest lucru cu marcajul tabelului, dar nu cu elementele div? Pentru că rândurile din tabel au aceeași înălțime. Atunci când conținutul unei celule de tabel nu folosește tot spațiul disponibil în înălțime, browserul adaugă automat umplutură verticală pentru a centra conținutul.
proprietatea poziției
Să începem cu elementele de bază ale alinierii verticale CSS div:
- poziție: static este implicit. Elementul este redat conform ordinii HTML;
- poziție: absolută - folosită pentru a determina poziția exactă a unui element. Această poziție este întotdeauna legată de elementul părinte poziționat relativ cel mai apropiat (nu static). Dacă nu determinați poziția exactă a unui element, veți pierde controlul asupra acestuia. Va apărea aleatoriu, ignorând complet fluxul documentului. Implicit, elementul apare în colțul din stânga sus;
- poziție: relativă - folosită pentru a poziționa un element față de poziția sa normală (statică). Această valoare păstrează ordinea fluxului de documente;
- poziție: fixă - folosită pentru a poziționa elementul în raport cu fereastra browserului, astfel încât să fie întotdeauna vizibil în fereastra de vizualizare.
Notă: unele proprietăți ( top și z-index) funcționează numai dacă elementul este setat pe poziție (nu static).
Sa trecem la treaba!
Doriți să implementați Alinierea centrală verticală CSS? Mai întâi creați un element cu poziție și dimensiuni relative. De exemplu: 100% în lățime și înălțime.
Al doilea pas poate varia în funcție de browserele țintă, dar puteți utiliza una dintre cele două opțiuni:
- Proprietate veche: trebuie să cunoașteți dimensiunea exactă a ferestrei pentru a elimina jumătate din lățime și jumătate din înălțime. Vezi exemplul;
- Noua proprietate CSS3: Puteți adăuga o proprietate de transformare cu o valoare de translație de 50% și blocul va fi întotdeauna în centru. Vezi exemplu.
Practic, dacă doriți să centrați conținutul, nu utilizați niciodată top: 40% sau stânga: 300px . Acest lucru funcționează bine pe ecranele de testare, dar nu este centrat.
Amintiți-vă poziția: fix? Puteți face același lucru cu el ca și cu o poziție absolută, dar nu aveți nevoie de o poziție relativă pentru elementul părinte - acesta va fi întotdeauna poziționat relativ la fereastra browserului.
Ați auzit de specificația flexbox?
Puteți folosi flexbox. Aceasta este mult mai bună decât orice altă opțiune centrați alinierea textului CSS pe verticală. Cu flexbox, gestionarea elementelor este ca o joacă de copii. Problema este că unele browsere trebuie să fie eliminate, cum ar fi IE9 și versiunile de mai jos. Iată un exemplu despre cum să centrați vertical un bloc:
Vezi exemplu
Folosind un aspect flexbox, puteți centra mai multe blocuri.
Dacă aplici ceea ce înveți din aceste exemple, poți stăpâni Alinierea blocului vertical CSS cât mai repede posibil.
Link-uri și lecturi suplimentare
Învățarea de marcare CSS
FlexBox Froggy
Cutie de nisip Flexbox
Traducerea articolului „ Aliniere verticală CSS pentru toată lumea (manechine incluse)” a fost pregătit de echipa prietenoasă de proiect.
