Poziționare în centru. Alinierea orizontală și verticală a elementelor în CSS

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).

Declarația 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 a fost cazul! Nu vom obține nicio aliniere centrală așteptată în acest fel. De ce? S-ar părea că totul este indicat corect. Se pare că aceasta este problema: proprietatea vertical-align poate fi folosit numai pentru a alinia conținutul celulelor tabelului sau pentru a alinia elemente în linie 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 inline

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 face ca conținutul să se încadreze într-o nouă linie.

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

este o etichetă de 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 o singură 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 textalign:

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 web 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 (atenție, tipul de comentariu condiționat trebuie să corespundă complet exemplului dat, până la un spațiu).

Instrucțiunile conținute într-un astfel de comentariu condiționat vor fi executate doar dacă browserul care 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 clasa de containere div textalign 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; înălțime: 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ă textalign. 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 toate etichetele div din interiorul unui bloc cu o clasă textalign aplicați proprietățile enumerate.

În consecință, stilurile specificate pentru bloc textalign 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 mutat într-adevăr cu 50% în jos, în raport cu blocul părinte (violet). Dar avem nevoie de 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 sa, față de 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ă jucăm puțin trucuri

Î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: există o înălțime suplimentară pentru derularea verticală.

Soluţie: trebuie să adăugați o proprietate debordare: ascuns bloc textalign.

Cunoașteți proprietatea în detaliu preaplin posibil în .

Instrucțiunile CSS finale pentru bloc textalign 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; )

Îmi pare rău, am uitat să menționez un punct important. Dacă încerci setați înălțimea blocului de clasă textalign ca 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ă textalign 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ă textalign se transformă exact într-o celulă de tabel, datorită proprietății display:table-cell).

În acest caz, trebuie să utilizați un bloc 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 textalign vom modifica valoarea proprietatii afişa Cu tabel-celula pe masăș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ă textalign 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ă textalign(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 textalign(bloc violet). Și nimic nu ne va împiedica să aliniem conținutul containerului div imbricat în centru cu proprietatea vertical-align: mijloc.

Obținem o altă listă suplimentară de proprietăți CSS pentru blocul div imbricat în container textalign.

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.

Pentru mai multe informații despre alinierea verticală a unui bloc de înălțime variabilă, consultați .

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 indentările negative. 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.

Să întrebăm mamă stiluri de tabel, celulă mamă Setați alinierea textului la centru. O bloc setăm modelul blocului de linii. Dezavantajele pe care le primim sunt barele de defilare care nu funcționează ș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 este setat 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ție: 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; ) )

Bonus

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:

Buna ziua! Continuăm să stăpânim elementele de bază ale limbajului HTML. Să vedem ce trebuie să scrieți pentru a alinia textul la centru, lățime sau margini.

Trecând la treabă, să vedem cum să centrați textul în HTML în trei moduri diferite. Ultimele două sunt legate direct la foaia de stil. Poate fi un fișier CSS care se conectează la paginile site-ului și le definește aspectul.

Metoda 1 - lucru direct cu HTML

De fapt, este destul de simplu. Vezi exemplul de mai jos.

Aliniați paragraful la centru.

Dacă trebuie să mutați fragmente de text într-un mod diferit, atunci în loc de parametrul „centru”, introduceți următoarele valori:

• justificare – alinierea textului la lățimea paginii;
• dreapta – pe marginea dreaptă;
• stânga - la stânga.

Prin analogie, puteți muta conținutul care se află în anteturi (h1, h2) și container (div).

Metoda 2 și 3 - folosirea stilurilor

Designul prezentat mai sus poate fi ușor transformat. Efectul va fi același. Pentru a face acest lucru, trebuie să scrieți codul de mai jos.

Bloc de text.

În această formă, codul este scris direct în HTML pentru a centra conținutul textului.

Există o altă modalitate alternativă de a obține rezultate. Va trebui să faceți câțiva pași.

Pasul 1. În codul principal scrieți

Material text.

Pasul 2. În fișierul CSS inclus, introduceți următorul cod:

Rovno (text-align:center;)

Observ că cuvântul „rovno” este doar numele unei clase care poate fi numită diferit. Acest lucru este lăsat la latitudinea programatorului.

Prin analogie, în HTML puteți face textul centrat, justificat și aliniat la marginea dreaptă sau stângă a paginii. După cum puteți vedea, există mult mai multe opțiuni pentru a vă atinge obiectivul.

Doar câteva întrebări:

• Faceți un proiect de informare non-profit?
• Vrei ca site-ul tău să se claseze bine în motoarele de căutare?
• Vrei să câștigi venituri online?

Dacă toate răspunsurile sunt pozitive, atunci priviți doar o abordare integrată a dezvoltării site-ului web. Informațiile vor fi deosebit de utile dacă rulează pe CMS-ul WordPress.

Aș dori să subliniez că propriile site-uri web sunt doar una dintre multele opțiuni pentru a genera venituri pasive sau active pe internet. Blogul meu este dedicat oportunităților financiare online.

Ați lucrat vreodată în domeniul arbitrajului de trafic, copywriting și alte domenii de activitate care generează venituri primare sau suplimentare prin colaborare la distanță? Puteți afla despre asta și multe altele chiar acum pe paginile blogului meu.

Voi publica o mulțime de informații cu adevărat utile în viitor. Rămâneți conectat. Dacă doriți, vă puteți abona la actualizările Workip prin e-mail. Formularul de abonare se găsește mai jos.

Aliniați textul vertical în CSS- o muncă foarte grea. 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ă" alinierea textului" 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 elemente div cu text, atunci 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).

Să trecem la treabă!

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ă trebuie să renunțați la unele browsere, 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 cu nisip Flexbox

Traducerea articolului „ Aliniere verticală CSS pentru toată lumea (manechine incluse)” a fost pregătit de echipa prietenoasă de proiect.

Când așezați o pagină, este adesea necesar să efectuați alinierea la centru folosind metoda CSS: de exemplu, centrarea blocului 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 alinierea 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 necesită alinierea textului folosind foi de stil. Spre deosebire de blocuri, pentru care trebuie să modificați marginile, în CSS, centrarea textului se face folosind o singură linie:

• text-align:center;

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ă):

• margine:0 auto;

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, alinierea la centru CSS nu este necesară, dar trebuie să plasați două blocuri unul lângă altul: unul pe marginea stângă, celălalt pe dreapta. În acest scop, există o proprietate float, 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:

• .left (float:left;)
• .right(float:right)

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:

• .left (float:left;)
• .right(float:right)
• subsol (clear:both)

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.

Alinierea verticală

Există momente în care nu este suficient să setați alinierea la centru folosind metode CSS, trebuie să schimbați și poziția verticală a blocului copil. 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ă:

• aliniere de sus - .child(vertical-align:top);
• aliniere la centru - .child(vertical-align:middle);
• aliniere de jos - .child(vertical-align:bottom);

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. Elementul cu clasa secundă este aliniat la stânga, iar ultimul bloc este aliniat la dreapta. După ce s-au echilibrat, 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:

• .second(float:left)
• .a treia (float:right)
• .clearfix(înălțime: 0; clar: ambele;)

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) :

• .left(float:left)
• .right(float:right)
• .container:după(conținut:""; afișare:tabel; clear:both;)

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 folosită mult mai des.

Alinierea blocurilor vă permite să creați pagini frumoase și funcționale: aceasta include aspectul aspectului general, aranjarea produselor în magazinele online și fotografii de pe un site web de cărți de vizită.