Elementele de bază ale structurii blocului pe exemplul de centrare verticală a elementelor de bloc a șablonului, utilizând proprietățile CSS: afișare: celulă-masă, înălțime linie sau poziție: absolută cu jumătate indentată.
Centrarea unui obiect pe verticală în aspectul blocului este oarecum mai complicată decât cea orizontală și are o serie de convenții. Dar totul este în ordine.
În primul rând, proprietatea CSS verticale aliniază poziționarea elementelor relative la "linia de bază" și nu poate fi aplicată poziționării în interiorul unui element de bloc. O excepție este așa-numita "celulă de tabel". Aveți posibilitatea să simulați proprietățile sale "unice" utilizând afișarea proprietății CSS cu celula tabelă de valori. De exemplu:
Rezultatul va arata astfel:
Cu toate acestea, acest lucru nu va funcționa în unele browsere mai vechi și contravine logicii aspectului blocului. În opinia mea, dacă doriți să utilizați proprietățile tabelelor, utilizați tabele.
Pentru a poziționa elementele în structura blocului, se utilizează un număr de trucuri. Varianta cea mai comună este utilizarea liniei de înălțime a liniei de proprietăți CSS. care stabilește spațierea liniei de la linia de bază a fonturilor. De exemplu:
Rezultatul va fi identic cu cel din exemplul anterior. Nuanța este numai că dacă linia este mutată, atunci când textul nu se încadrează în lățime, înălțimea va fi de două ori mai mare și așa mai departe. Pentru a evita acest lucru, puteți utiliza spațiul alb-proprietăți CSS cu valoarea acum - spațiile sunt ignorate, pauza de linie este ignorată.
Este ceva mai complicat atunci când este necesar să se centreze vertical, și anume un bloc, mai degrabă decât un element de linie. În acest caz, este destul de dificil să se obțină flexibilitate, deoarece Este necesar să cunoaștem dimensiunile blocului centrat. Poziționarea exactă se bazează pe utilizarea valorii jumătate a indentării elementului absolut. De exemplu:
Rezultatul va arata astfel:
Cu alte cuvinte, folosind poziția proprietății CSS. Am setat poziția absolută a elementului #block. relativă (elementul principal nu este static) element #parent. Apoi, setăm indentarea elementului #block de la marginea de sus a elementului #parent la 50% (jumătate); top: 50%. Cunoașterea înălțimii elementului #block. pentru centrarea verticală completă, putem seta offset-ul la jumătate din înălțimea sa folosind marginea proprietății CSS. și anume margin-top: -10px; cu condiția că înălțimea: 20px; .
Trimiteți-le prietenilor: