Aliniați blocul la centrul paginii. Alinierea verticală în div. Bonus: comentarii condiționate

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, pentru alinierea verticală există o proprietate specială de aliniere verticală în CSS cu mai multe valori. 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. Alinierea cu:

• mese,
• indentare,
• înălțimea liniei
• întindere,
• marja negativa,
• transforma
• pseudo element
• flexbox.

Pentru a ilustra, luați în considerare următorul exemplu.

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șajul regulii: bloc inline la elementul interior și aliniere text: centru și aliniere verticală: mijloc la elementul exterior.

Rețineți că alinierea se aplică numai elementelor care au un mod de afișare în linie sau în bloc.

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; 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 sa întâmplat asta? 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 indentări

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, de asemenea, utilizată 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șarea: inline-block și vertical-align: reguli de mijloc.

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:

1. setați poziționarea relativă față de blocul extern și poziționarea absolută față de blocul intern;
2. 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;
3. setați umplutura verticală a blocului interior la automat.

.exterior (poziție: relativă; ) .interior (înălțime: 100px; poziție: absolut; sus: 0; jos: 0; margine: auto 0; )
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 utilizată 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 asta-i 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 vertical textul, 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

În procesul de aspect al paginii web, sarcina de a centra blocurile este destul de comună. Aceasta poate fi centrare verticală sau orizontală.

De exemplu, dacă site-ul are o lățime fixă, atunci ar fi rațional să-l aliniem în centrul ferestrei browserului, deoarece acest lucru face textul mai ușor de citit (mai ales dacă monitorul este mare). Unele modele implică în general plasarea blocului în centrul ferestrei browserului, adică atât centrarea verticală, cât și orizontală.

Mai întâi, să vorbim despre centrarea orizontală. Cea mai populară tehnică este atunci când blocul este centrat prin setarea dimensiunilor din dreapta și din stânga marja la "auto". Să presupunem că vrem să centrem un bloc cu id = „container” și o lățime de 860px. În acest caz, în fișierul CSS trebuie să scrieți:

#container (
culoare de fundal:#EEE;
lățime: 860px;
margine: 0px automat;
}

Cu toate acestea, I.E. versiunile mai vechi (5.0 de exemplu) nu vor alinia acest bloc centrat. Desigur, nimeni nu mai folosește browsere atât de vechi (din 1800 dintre vizitatorii mei zilnici - doar 1), dar pentru orice eventualitate, este mai bine să funcționeze și acolo :)

Pentru a face acest lucru, elementul părinte, adică cel în care ne concentrăm blocul (de obicei, elementul părinte este eticheta BODY), trebuie să seteze parametrul text-align:center. În acest caz, blocul va fi aliniat la centru, dar tot conținutul său va fi, de asemenea, aliniat la centru, dar nu avem nevoie de asta. Prin urmare, în interiorul acestui bloc setăm alinierea implicită - text-align:stânga .

corp (text-align:center)

#container (
culoare de fundal:#EEE;
lățime: 860px;
margine: 0px automat;
text-align:stânga;
}

Există, de asemenea, o altă modalitate de a alinia orizontal un bloc, pe baza . După cum probabil știți, în mod implicit, orice element bloc este apăsat pe marginea din stânga a elementului părinte. Prin urmare, pentru a-l alinia la centru aveți nevoie de:

2. Mutați-l la dreapta cu 50% din lățimea ferestrei browserului

3. Folosind umplutura negativă, mutați-l spre stânga cu o distanță egală cu jumătate din lățimea blocului.

Astfel blocul va fi centrat. Pentru mai multă claritate, urmăriți videoclipul de mai jos:

Exemplu de cod CSS:

#container (
culoare de fundal:#559964;
poziție: absolut;
stânga:50%;
margine-stânga:-430px;
lățime: 860px;
}

Trebuie remarcat faptul că, dacă doriți să poziționați un bloc nu în raport cu fereastra browserului, ci, de exemplu, în raport cu un alt bloc, atunci pentru acest alt bloc trebuie să setați poziție:relativă;

Să presupunem că blocul nostru #container, care trebuie să fie centrat, se află în interiorul blocului #wrap. Apoi codul va arăta astfel:

#wrap(poziție:relativ)

#container (
culoare de fundal:#559964;
poziție: absolut;
stânga:50%;
margine-stânga:-430px;
lățime: 860px;
}

Acum să ne uităm la cazul în care trebuie să aliniați un bloc la centrul paginii, de exemplu. Aplicați centrarea orizontală și verticală simultan. Poziționarea intră din nou în joc aici. Deci avem nevoie de:

1. Setați blocul la poziționare absolută

2. Mutați-l la dreapta cu 50% și în jos cu 50%, plasând astfel colțul din stânga sus în centrul ferestrei browserului.

3. Folosind căptușeală negativă, deplasați-l în sus cu o distanță egală cu jumătate din înălțimea blocului și spre stânga cu o distanță egală cu jumătate din lățimea blocului.

Acest lucru va plasa blocul în centrul paginii web.

Să presupunem că înălțimea blocului nostru este de 600 px, iar lățimea este de 860 px. Apoi codul CSS va arăta astfel:

#container (
culoare de fundal:#559964;
poziție: absolut;
sus:50%;
stânga:50%;
margin-top:-300px;
margine-stânga:-430px;
înălțime: 600px;
lățime: 860px;
}

Sper că principiul în sine vă este clar.

Evaluează această lecție: 1 2 3 4 5

Comentarii:

Voi fi primul care urmărește lecția!!!

Eh... În al doilea rând =) Am întâlnit recent această problemă în IE, am suferit mult timp)) Mulțumesc =)

Mulțumesc, pagină marcată)))

Mulțumesc foarte mult, Andrey, pentru noile lecții!

Doar mulțumesc, nu cred că este ceva de adăugat aici))

Mulțumesc pentru lecție, am încercat să fac asta acum câteva zile, am suferit puțin și am lăsat-o temporar deoparte

Dar am o problemă: site-ul din Mozille Firefox nu vrea să fie aliniat, este lipit de marginea din stânga și gata, nimic din cele de mai sus nu ajută (la fel și în Opera).

de ce nu merge asta? - „dacă doriți să poziționați un bloc nu relativ la fereastra browserului, ci, de exemplu, relativ la un alt bloc, pentru acest celălalt bloc trebuie să setați poziția: relativă;”

Multumesc mult!! doar un GIGANT multumesc!

Totul este în regulă, dar din anumite motive toate imaginile intră la locul lor numai după actualizarea browserului. Te rog spune-mi de ce se întâmplă asta?

Andrey, te rog să adaugi o căutare pe site.

Adaugă un comentariu.

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:

#header( latime / max - latime : 800px ; marja: 0 auto;

Trebuie să specificăm lățimea exactă sau maximă și apoi să 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 pe părintele său. 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 de a seta o înălțime explicită folosind înălțimea, ci de a o crea 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 înregistra înălțimea ca de obicei folosind proprietatea înălțime. După aceea, trebuie să seteze și înălțimea rândului, la fel ca înălțimea blocului în ansamblu.

div( înălțime: 60px; înălțime linie: 60px; )

div( inaltime: 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ă. În consecință, î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 la 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 să fie concepută special pentru asta, dar există câteva trucuri de care ar trebui să fii conștient.

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ă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 utilizarea unei pagini de start. 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ă folosind parametrul etichetei align="center". , iar conținutul celulei poate să nu fie centrat vertical, deoarece aceasta este poziția implicită.

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.

Alinierea orizontală

Prin combinarea atributelor align (aliniere orizontală) și valign (aliniere verticală) ale etichetei , este permisă setarea mai multor tipuri de poziții ale elementelor unul față de celălalt. În fig. Figura 1 prezintă modalități de aliniere orizontală a elementelor.

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ă trebuie să setați atributul valign cu valoarea de sus (exemplul 2).

Exemplul 2: Utilizarea valign

Coloana 1

Coloana 2

În acest exemplu, caracteristicile celulei sunt controlate folosind parametrii etichetei , dar este și mai convenabil să schimbați prin stiluri.

În special, alinierea în celule este specificată de proprietățile vertical-align și text-align (exemplul 3).

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

(18.6)

Exemplul 4: Alinierea formulei

În acest exemplu, prima celulă a tabelului este lăsată goală, servește doar la crearea unei indentări, 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
Nume
E-mail

Adaugă un comentariu

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

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

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 doar 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 pe 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 aceeași linie.

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

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

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

Linia de text rezultată va arăta astfel:

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

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

Alinierea verticală în containerul div

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

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

Ha, se dovedește a fi foarte simplu.

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

Să presupunem că avem o clasă div 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 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 complicat 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 alte proprietăți CSS special pentru browserele din familia 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 numai 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 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.Şi span):

Referitor la etichetă 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.î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 deplasat î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ă trișăm puțin

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

Există o mică problemă. Dacă conținutul centrat este prea mare, atunci aceasta 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 .