6 trucuri CSS pentru alinierea conținutului vertical
Să vorbim despre alinierea verticală în CSS sau pentru a fi mai precis cum nu este posibil. CSS nu a oferit încă o metodă oficială de centralizare a conținutului pe verticală în containerul său. Este o problemă care probabil a afectat dezvoltatorii web de pretutindeni. Dar să nu vă temeți, în acest post, vom conduce câteva chestii care vă pot ajuta imita efectul.
Aceste trucuri pot avea totuși limitări și este posibil să fie necesar utilizați mai mult de un truc pentru a finaliza iluzia. Dacă știți despre orice alt truc, anunțați-ne în comentarii.
1. Utilizați poziția absolută
Primul truc pe care îl vom vedea aici îl folosește Vom plasa mai întâi poziția elementului container pe relativă, apoi vom seta poziția elementului copil la Pentru alinierea acesteia în poziție verticală, deplasați poziția elementului copil din partea superioară, la jumătatea înălțimii recipientului și trageți-o în sus cu jumătate din lățimea elementului copil. Aici este rezultatul: Acest truc este perfect atunci când există doar un singur element copil, în caz contrar Transformarea CSS3 a facilitat introducerea conținutului în centru. Transformarea CSS3, spre deosebire de Presupunând că avem aceeași structură HTML ca metoda precedentă - un element parental, un element copil - Rețineți însă că transformările CSS3 nu vor funcționa în Internet Explorer 8 și mai jos. Poate doriți să utilizați oricare din celelalte metode aici ca rezervă. Putem de asemenea folosi Acest truc este potrivit pentru situația în care nu setați recipientul la o lățime fixă, setați lățimea la Dacă aveți doar o singură linie de conținut textual într-un container, puteți alinia textul vertical folosind Amintiți-vă că acest truc funcționează numai cu o singură linie de text. Dacă conținutul se încadrează în două sau mai multe linii, spațiul dintre fiecare linie va fi așa cum am specificat în Personal, folosind Tabelul CSS este trucul meu preferat pentru aplicarea aliniamentului vertical. Funcționează în browsere vechi, cum ar fi Internet Explorer 8. Această metodă se face prin setarea afișajului elementului container la Ultima metodă de centrare verticală este prin utilizarea Flexbox. Flexbox este un nou modul în CSS3. Oferă o metodă mai simplă pentru alinierea conținutului. Pentru a centra conținutul vertical în flex box, pur și simplu adăugați Rețineți că unele browsere Flexbox acceptă numai caracteristica paralelă a modulului Flexbox, cum ar fi Internet Explorer 10, Safari, 6 și Chrome 27 și mai jos. Prin urmare, similar cu truc cu CSS3 Transform, asigurați-vă că efectul se încadrează frumos în aceste browser-ul.poziţie proprietate. Aveți două absolut. Acest lucru ne permite să plasăm în mod liber pe container. absolut poziția va afecta celălalt element din același container.2. Folosiți Transformarea CSS3
poziţie proprietate, nu va afecta poziția altor elemente din același container.50% din partea de sus și folosind transformarea CSS oferă o traducere de -50%. Și acolo aveți.3. Folosiți garnitura
umplutură pentru a crea o iluzie a alinierii verticale. Pentru a face acest lucru, setați pur și simplu căptușelile de sus și de jos, după cum urmează:auto.4. Utilizați înălțimea liniei
inaltimea liniei proprietate. Seteaza inaltimea liniei valoare aproximativ la fel ca înălțimea recipientului și veți vedea următoarea ieșire.inaltimea liniei, oferindu-ne prea multe spații.5. Utilizați tabelul CSS
masa, în timp ce elementul copil trebuie să fie afișat ca masă de celule apoi utilizați vertical-align proprietate pentru a centra text pe verticală.6. Utilizați Flexbox
align-items: center; după cum urmează, și asta este.
