Alinierea orizontală Css a blocurilor. Centrarea unui bloc cu CSS

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

Această metodă funcționează în toate browserele, dar nu uitați să o utilizați pentru o linie de text. Dacă textul dvs. se întinde pe mai mult de un rând, utilizați o metodă diferită. Valoarea proprietății line-height poate fi orice, dar nu mai mică decât înălțimea fontului. În practică, această metodă este excelentă pentru centrarea meniurilor orizontale.

Metoda CSS folosind proprietățile tabelului

După cum am scris mai devreme, conținutul celulei poate fi centrat folosind proprietatea CSS de aliniere verticală. Elementul părinte trebuie reprezentat ca un tabel, elementul fiu trebuie desemnat ca o celulă și îi aplicăm proprietatea vertical-align cu valoarea middle. În acest fel, orice conținut din elementul copil va fi centrat vertical. Codul css este dat mai jos.

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

Din păcate, această metodă nu funcționează în versiunile mai vechi de IE. Dacă aveți nevoie de suport pentru browser pentru IE6 și mai jos, adăugați o declarație display: inline-block la elementul copil.

#copil (afișare: bloc inline;)

Poziționare absolută și marjă negativă

Această metodă este pentru elemente la nivel de bloc și funcționează în toate browserele. Este necesar să setați înălțimea elementului de centrat.

Mai jos este codul în care copilul este centrat folosind metoda dată.

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

În primul rând, trebuie să poziționați părintele și copilul. Apoi setăm offset-ul copilului să fie de 50% față de partea de sus (sus) și stânga (stânga) a elementului părinte, centrând astfel copilul față de părinte. Cu toate acestea, manipulările noastre vor plasa colțul din dreapta sus al copilului în centrul părintelui, ceea ce desigur nu ni se potrivește.

Sarcina noastră este să mutăm copilul în sus și la stânga, în raport cu părintele, astfel încât copilul să fie centrat vizual pe verticală și pe orizontală. Acesta este motivul pentru care trebuie să cunoașteți înălțimea și lățimea copilului.

Deci, ar trebui să dăm copilului o marjă de sus și stânga negativă egală cu jumătate, respectiv, lățimea și înălțimea copilului.

Spre deosebire de primele două metode, această metodă este destinată elementelor la nivel de bloc. Metoda funcționează în toate browserele, cu toate acestea, conținutul poate depăși înălțimea elementului părinte și poate depăși aceasta. Această metodă funcționează cel mai bine atunci când înălțimea și lățimea elementelor sunt fixe.

Poziționarea absolută a copilului

Ca și în metoda anterioară, părintele și copilul sunt poziționați relativ, respectiv absolut.

În codul CSS, centrez copilul atât pe verticală, cât și pe orizontală, totuși puteți folosi doar centrarea verticală.

#părinte (poziție: relativ;) #copil (poziție: 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 că puteți poziționa elementul copil folosind valorile proprietăților de sus, stânga, dreapta, jos egale cu 0. Deoarece elementul nostru copil este mai mic decât elementul părinte, nu se poate „lipi” de element părinte.

Valorile marjei pentru toate cele patru laturi ale copilului sunt zero, astfel încât elementul să fie centrat vertical în raport cu părintele. Din păcate, această metodă are aceleași dezavantaje ca metoda anterioară: este necesar să se stabilească înălțimea și lățimea copilului, lipsa suportului pentru browserele IE mai vechi.

Căptușeala de jos și de sus sunt egale

În această metodă, dăm în mod explicit elementului părinte o umplutură egală (de jos și de sus), astfel încât copilul să fie centrat vizual pe verticală.

#părinte (padding: 5% 0;) #child (padding: 10% 0;)

Folosesc dimensiuni relative. Dacă dimensiunile blocurilor sunt fixe, atunci vor trebui făcute unele calcule matematice.

De exemplu, dacă un element părinte are o înălțime de 400 px și un element secundar este de 100 px, atunci ar trebui să setați umplutura de sus și de jos la 150 px.

150 + 150 + 100 = 400

Div. plutitor

Această metodă folosește un bloc flotant gol care controlează poziția verticală a copilului. Div-ul plutitor trebuie plasat în fața copilului, vezi codul HTML de mai jos.

#parent (înălțime: 250px;) #floater (float: stânga; înălțime: 50%; lățime: 100%; margin-bottom: -50px;) #copil (clar: ambele; înălțime: 100px;)

În primul rând, deplasăm cutia plutitoare la stânga (sau la dreapta) și îi dăm o înălțime de 50% din părintele ei. În acest fel, caseta plutitoare va umple jumătatea superioară a părintelui.

Deoarece blocul este plutitor, este eliminat din fluxul general al documentului, prin urmare, proprietatea clear ar trebui să fie atribuită blocului copil cu o valoare a ambelor. Am setat valoarea la ambele, cu toate acestea, puteți folosi valoarea care se potrivește cu direcția de poziționare a elementului plutitor.

Marginea superioară a copilului se află acum direct sub marginea inferioară a elementului plutit. Vrem să creștem copilul la jumătate din înălțimea plutitorului. Pentru a face acest lucru, este suficient să setați marja inferioară negativă egală cu 50% pentru blocul plutitor.

Funcționează în toate browserele. Dezavantajul acestei metode este că aveți nevoie de un bloc gol și trebuie să cunoașteți înălțimea elementului copil.

Cred că mulți dintre voi care ați făcut layout au dat peste nevoia de a alinia elementele pe verticală și știți ce dificultăți apar atunci când aliniați un element la centru.

Da, pentru alinierea verticală, CSS are o proprietate specială de aliniere verticală cu mai multe valori. În practică, însă, 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 cu:

• Mese,
• liniuțe,
• inaltimea liniei,
• întindere,
• marja negativa,
• transforma,
• pseudo-element,
• flexbox.

Ca o ilustrare, luați în considerare următorul exemplu.

Există două div-uri, cu una imbricată în cealaltă. 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, luați în considerare cazul când dimensiunile unităților exterioare și interioare cunoscut... Să adăugăm display: inline-block la elementul interior și text-align: center și vertical-align: mijloc la cel exterior.

Îmi amintesc că alinierea se aplică numai elementelor care au modul de afișare în linie sau bloc în linie.

Să dăm blocurilor dimensiuni și culori de fundal pentru a le vedea marginile.

Exterior (lățime: 200 px; înălțime: 200 px; aliniere text: centru; aliniere verticală: mijloc; culoarea fundalului: #ffc;) .intern (afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoarea fundalului : #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? Ideea este că proprietatea de aliniere verticală afectează alinierea. elementul în sine, nu conținutul său(cu excepția cazului în care se aplică celulelor tabelului). Prin urmare, aplicarea acestei proprietăți unui element extern nu a făcut nimic. Mai mult decât atât, aplicarea acestei proprietăți unui element interior nu va face nimic, deoarece blocurile inline 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.

Aliniați-vă cu o masă

Prima soluție care îmi vine în minte este înlocuirea blocului exterior cu o masă cu o singură 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 punctul de vedere al semanticii, este greșit să folosiți tabele pentru aliniere. Al doilea dezavantaj este că pentru a crea tabelul, trebuie să adăugați un 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 (afișare: table;) .outer (afișare: table-cell;)
Cu toate acestea, blocul exterior va rămâne în continuare un tabel cu toate consecințele care decurg.

Aliniați cu indentări

Dacă înălțimile casetelor interioare și exterioare sunt cunoscute, atunci alinierea poate fi setată folosind căptușeala verticală a casetei interioare 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 cu î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 ar trebui 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: 200px; înălțime linie: 200px;) .interior (spațiu alb: nowrap; overflow: ascuns;)
http://jsfiddle.net/c1bgfffq/12/

De asemenea, puteți utiliza această tehnică pentru a alinia textul cu mai multe linii prin redefinirea valorii înălțimii liniei pentru blocul interior și adăugând afișaj: bloc în linie și aliniere verticală: reguli de mijloc.

Exterior (înălțime: 200px; înălțime linie: 200px;) .intern (înălțime linie: normal; afișare: bloc inline; aliniere verticală: mijloc;)
http://jsfiddle.net/c1bgfffq/15/

Dezavantajul acestei metode este că trebuie cunoscută înălțimea blocului exterior.

Alinierea întindere

Această metodă poate fi utilizată atunci când înălțimea unității exterioare este necunoscută, dar este cunoscută înălțimea unității interioare.

Pentru asta ai nevoie de:

1. setați poziționarea relativă a blocului exterior, iar cea interioară - absolută;
2. adăugați regulile de sus: 0 și de jos: 0 la blocul interior, drept urmare se întinde pe toată înălțimea blocului exterior;
3. setat la automat pentru umplutura verticală a blocului interior.

.exterior (poziție: relativ;) .interior (înălțime: 100px; poziție: absolut; sus: 0; jos: 0; margine: auto 0;)
http://jsfiddle.net/c1bgfffq/4/

Esența acestei tehnici este că specificarea înălțimii pentru o casetă întinsă și poziționată absolut obligă browserul să calculeze marginile verticale în proporții egale atunci când este setată la automat.

Alinierea cu marginea negativă-top

Această metodă a devenit cunoscută pe scară largă și este folosită foarte des. Ca și precedentul, se aplică atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea blocului interior.

Trebuie să setați poziționarea relativă a blocului exterior, iar cea interioară - absolută. Apoi trebuie să împingeți cutia interioară în jos jumătate din înălțimea superioară a cutiei exterioare: 50% și să o ridicați până la jumătate din propria înălțime margine-sus: -H interioară / 2.

Exterior (poziție: relativ;) .interior (înălțime: 100px; poziție: absolut; sus: 50%; margin-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 aplicată 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;) .interior (poziție: absolut; vârf: 50%; transform: translateY (-50%);)
http://jsfiddle.net/c1bgfffq/9/

De ce nu a putut fi setat un procent în metoda anterioară? Deoarece valorile procentuale ale proprietății marjei sunt calculate în raport cu elementul părinte, o valoare de 50% ar fi jumătate din înălțimea cutiei exterioare și trebuia să ridicăm cutia interioară la jumătate din înălțimea proprie. Proprietatea de transformare este potrivită pentru asta.

Dezavantajul acestei metode este că nu poate fi aplicată dacă blocul intern are poziționare absolută.

Aliniați cu Flexbox

Cel mai modern mod de a alinia 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ă, plasându-le aproape după cum doriți. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.

Caseta exterioară trebuie setată să afișeze: flex, iar caseta interioară trebuie setată la margine: auto. Și e tot! Frumos, nu-i așa?

Exterior (afișare: flex; lățime: 200px; înălțime: 200px;) .intern (lățime: 100px; margine: automat;)
http://jsfiddle.net/c1bgfffq/14/

Dezavantajul acestei metode este că Flexbox este acceptat doar de browserele moderne.

Ce modalitate de a alege?

Este necesar să pornim de la enunțul problemei:

• Pentru alinierea verticală a textului, este mai bine să utilizați padding vertical sau proprietatea line-height.
• Pentru elementele poziționate absolut cu o înălțime cunoscută (cum ar fi pictogramele), proprietatea 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 de transformare.
• Ei bine, dacă ești atât de norocos încât nu trebuie să suporti versiuni mai vechi de IE, atunci bineînțeles că este mai bine să folosești Flexbox.

Etichete: Adăugați etichete

Când creați blocuri div, probabil că ați întâlnit situații în care trebuie să vă centrați div-ul orizontal și vertical folosind CSS pur. De exemplu, când creați ferestre pop-up cu. Există mai multe moduri de a implementa centrarea, iar în acest articol voi împărtăși modurile mele preferate și ușoare folosind CSS sau jQuery.

Pentru început, elementele de bază:

Centrare orizontală cu CSS

Este ușor, folosim marginea pentru noi div bloc.

ClassName (marja: 0 auto; lățime: 200px; înălțime: 200px;)

Pentru a centra blocul div numai pe orizontală, trebuie să definiți lățimea blocului (lățimea), utilizați proprietatea auto pentru marje stânga și dreapta... Această metodă va funcționa pentru toate elementele blocului (div, p, h1 și așa mai departe ...). Pentru a aplica centrarea orizontală pentru elementele inline (linkuri, imagini ...), trebuie să aplicați parametrul afişa:bloc;

Centrare orizontală și verticală cu CSS

Centrarea blocului div pe orizontală și pe verticală în același timp este puțin mai complicată. Trebuie să cunoașteți dimensiunile blocului div din timp.

ClassName (lățime: 300px; înălțime: 200px; poziție: absolut; stânga: 50%; sus: 50%; margine: -100px 0 0 -150px;)

Prin intermediul absolut poziționând blocul, îl putem detașa de elementele din jur și putem determina poziția acestuia în raport cu dimensiunea ferestrei browserului. Mutați blocul div la 50% stânga și sus a ferestrei. Colțul din stânga sus al blocului se află acum în centrul ferestrei browserului. Rămâne să setați blocul div în centrul paginii mutându-l la jumătate din lățimea sa stânga şi jumătate din înălțimea lui sus. Ura! Rezultatul este centrarea excelentă a blocului în cod CSS pur.

Centrare orizontală și verticală cu jQuery

După cum am menționat mai devreme - metoda de centrare CSS funcționează numai cu dimensiuni fixe. Dacă dimensiunile nu sunt specificate, metoda jQuery vine în ajutor:

$ (fereastră) .resize (funcție () ($ (". className")). css ((poziție: "absolut", stânga: ($ (fereastră) .width () - $ (". className"). outerWidth ( )) / 2, sus: ($ (fereastra) .height () - $ ("". ClassName"). OuterHeight ()) / 2));)); // Pentru a rula funcția când fereastra este încărcată: $ (window) .resize ();

Funcționarea acestei metode este de a rula funcția de redimensionare () folosind linia $ (fereastră) .resize ()... Această caracteristică funcționează ori de câte ori fereastra browserului este redimensionată. Folosim outerWidth ()și înălțime exterioară () deoarece spre deosebire de latime ()și inaltime (), acestea includ umplutura și lățimea chenarelor în dimensiunea pe care o returnează. Ultima linie începe procesul de centrare a blocului div la încărcarea paginii.

Avantajul utilizării acestei metode este că este posibil să nu știți ce dimensiune are blocul div. Principalul dezavantaj este performanța numai cu JavaScript activat. Prin urmare, această metodă este acceptabilă pentru interfețele multifuncționale precum Vkontakte, Facebook etc.

Ca întotdeauna, puteți sugera metoda preferată de centrare a blocurilor scriind într-un comentariu.

Fiecare designer de layout se confruntă în mod constant cu nevoia de a alinia conținutul într-un bloc: orizontal sau vertical. Există câteva articole bune pe acest subiect, dar toate oferă multe opțiuni interesante, dar puține practice, motiv pentru care trebuie să aloci timp suplimentar pentru a evidenția principalul lucru. Am decis să trimit aceste informații în formularul care îmi este convenabil pentru a nu le mai căuta pe google.

Alinierea blocurilor cu dimensiuni cunoscute

Cel mai simplu mod de a utiliza CSS este alinierea blocurilor care au o înălțime predeterminată (pentru alinierea verticală) sau lățime (pentru alinierea orizontală).

Alinierea cu căptușeală

Uneori nu puteți centra un element, ci îi puteți adăuga margini cu „ căptușeală".

De exemplu, aveți o imagine de 200x200px și doriți să o centrați într-un bloc de 240x300. Putem seta înălțimea și lățimea casetei exterioare = 200px și adăugați 20px în partea de sus și de jos și 50 de fiecare în stânga și în dreapta .

.example-wrapper1 (fond: # 535E73; lățime: 200px; înălțime: 200px; umplutură: 20px 50px;)

Alinierea cutiilor poziționate absolut

Dacă blocul este setat la " poziție: absolută", apoi poate fi poziționat relativ la cel mai apropiat părinte cu" poziție: relativ ". Pentru a face acest lucru, toate proprietățile au nevoie de (" top","dreapta","fund","stânga„) atribuie aceeași valoare unității interioare, precum și „marjă: auto”.

* Există o nuanță: lățimea (înălțimea) blocului interior + valoarea stânga (dreapta, jos, sus) nu trebuie să depășească dimensiunea blocului părinte. Este mai sigur să setați proprietățile din stânga (dreapta, jos, sus) la 0 (zero).

.example-wrapper2 (poziție: relativă; înălțime: 250px; fundal: url (spațiu.jpg);) .cat-king (lățime: 200px; înălțime: 200px; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; margine: automat; fundal: url (king.png);)

Aliniere orizontala

Aliniați cu „text-align: center”

Există o proprietate specială pentru alinierea textului într-un bloc " aliniere text". Când valoarea este setată" centru„fiecare linie de text va fi aliniată orizontal. Pentru textul cu mai multe linii, această soluție este rar folosită, mai des această opțiune poate fi găsită pentru alinierea intervalelor, link-urilor sau imaginilor.

Odată a trebuit să vin cu text pentru a arăta cum funcționează alinierea textului cu CSS, dar nu mi-a venit nimic interesant în minte. La început m-am hotărât să copiez undeva o cântă de creșă, dar mi-am amintit că acest lucru ar putea strica unicitatea articolului, iar dragii noștri cititori nu o vor putea găsi pe Google. Și apoi am decis să scriu acest paragraf aici - la urma urmei, punctul nu este cu el, dar punctul este în aliniere.

.example-text (text-align: center; padding: 10px; background: # FF90B8;)

Trebuie remarcat faptul că această proprietate va funcționa nu numai pentru text, ci și pentru orice elemente inline ("display: inline").

Dar acest text este aliniat la stânga, dar este în bloc, care este aliniat în centru față de înveliș.

.example-wrapper3 (text-align: center; fundal: # FF90B8;) .inline-text (afișare: inline-block; lățime: 40%; padding: 10px; text-align: stânga; fundal: # FFEfee;)

Alinierea casetelor cu marginile

Elementele bloc cu o lățime cunoscută sunt ușor aliniate pe orizontală dacă sunt setate la „margin-left: auto; margin-right: auto”. Se folosește de obicei notația prescurtată: „ marja: 0 auto„(orice valoare poate fi folosită în loc de zero). Dar această metodă nu va funcționa pentru alinierea verticală.

.lama-wrapper (înălțime: 200px; fundal: # F1BF88;) .lama1 (înălțime: 200px; lățime: 200px; fundal: url (lama.jpg); margine: 0 auto;)

Așa merită să aliniați toate blocurile acolo unde este posibil (unde nu este necesară poziționarea fixă ​​sau absolută) - este cel mai logic și adecvat. Deși pare evident, am văzut uneori exemple înspăimântătoare cu marje negative, așa că am decis să clarific.

Aliniere verticală

Există mult mai multe probleme cu alinierea verticală - aparent, acest lucru nu a fost prevăzut în CSS. Există mai multe modalități de a obține rezultatul dorit, dar nu sunt toate foarte frumoase.

Alinierea cu proprietatea line-height

În cazul în care există o singură linie în bloc, puteți obține alinierea verticală a acesteia prin aplicarea " inaltimea liniei"și setați-l la înălțimea dorită. Pentru a fi în siguranță, ar trebui să setați și" înălțime ", a cărei valoare va fi egală cu valoarea "line-height", deoarece aceasta din urmă nu este acceptată în toate browserele.

.example-wrapper4 (linie-înălțime: 100px; culoare: # DC09C0; fundal: # E5DAE1; înălțime: 100px; text-align: center;)

De asemenea, este posibil să se realizeze alinierea blocului cu mai multe linii. Pentru a face acest lucru, va trebui să utilizați un bloc suplimentar de înveliș și să setați înălțimea liniei la acesta. Blocul interior poate fi cu mai multe linii, dar este necesar „inline”. Trebuie să-i aplicați „vertical-align: middle”.

.example-wrapper5 (înălțimea liniei: 160px; înălțimea: 160px; dimensiunea fontului: 0; fundal: # FF9B00;) .example-wrapper5 .text1 (afișaj: bloc inline; dimensiunea fontului: 14px; înălțimea liniei: 1.5; aliniere verticală: mijloc; fundal: # FFFAF2; culoare: # FF9B00; aliniere text: centru;)

Blocul de ambalare trebuie să aibă setat „dimensiunea fontului: 0”. Dacă nu setați dimensiunea fontului la zero, browserul va adăuga câțiva pixeli suplimentari de la sine. De asemenea, va trebui să specificați dimensiunea fontului și înălțimea liniei pentru blocul interior, deoarece aceste proprietăți sunt moștenite de la părinte.

Alinierea verticală în tabele

proprietate " vertical-align"afectează și celulele tabelului. Cu valoarea" middle "setată, conținutul din interiorul celulei este centrat. Desigur, aspectul tabelului este considerat arhaic în zilele noastre, dar în cazuri excepționale îl puteți simula prin specificarea" afișare: tabel-celulă".

De obicei folosesc această opțiune pentru alinierea verticală. Mai jos este un exemplu de layout luat dintr-un proiect gata făcut. Interesantă este imaginea, care este centrată vertical în acest fel.

.one_product .img_wrapper (afișare: table-cell; înălțime: 169 px; vertical-align: middle; overflow: hidden; fundal: #fff; lățime: 255px;) .one_product img (max-height: 169px; max-width: 100) %; lățime minimă: 140 px; afișare: bloc; marjă: 0 automat;)

Trebuie reținut că, dacă un element are „float” altul decât „none”, atunci va fi în orice caz bloc (afișare: bloc) - atunci va trebui să utilizați un bloc suplimentar de înveliș.

Alinierea cu un element suplimentar în linie

Și pentru elementele inline puteți aplica " vertical-align: mijloc". În acest caz, toate elementele cu" display: inline„care sunt pe aceeași linie se vor alinia cu linia centrală comună.

Trebuie să creați un bloc auxiliar cu o înălțime egală cu înălțimea blocului părinte, apoi blocul dorit va fi centrat. Este convenabil să folosiți pseudo-elementele: înainte sau: după.

.example-wrapper6 (înălțime: 300px; text-align: center; fundal: # 70DAF1;) .pudge (afișare: inline-block; vertical-align: middle; fundal: url (pudge.png); culoare de fundal: # fff; lățime: 200 px; înălțime: 200 px;) .riki (afișare: bloc inline; înălțime: 100%; aliniere verticală: mijloc;)

Afișare: flexați și aliniați

Dacă nu vă pasă prea mult de utilizatorii Explorer 8 sau vă pasă atât de mult încât sunteți dispus să introduceți ceva javascript suplimentar de dragul lor, atunci puteți folosi „display: flex”. Cutiile flexibile fac o treabă grozavă în rezolvarea problemelor de aliniere și scrieți doar „margin: auto” pentru a centra conținutul în interior.

Până acum, această metodă nu mi-a venit practic, dar nu există restricții speciale pentru ea.

.example-wrapper7 (afișare: flex; înălțime: 300px; fundal: # AEB96A;) .example-wrapper7 img (marja: auto;)

Ei bine, asta este tot ce am vrut să scriu despre alinierea CSS. Acum centrarea conținutului nu va fi o problemă!