Afla cum poti centra vertical contentul, cea mai mare problema existenta in CSS
44 years ago we put a man on the moon, yet we still can’t vertically centre things in CSS.”
— James Anderson
Centrarea unui element orizontal in CSS este foarte usor daca este un inline element, aplicam text-align: center; parintelui acestui element, dar daca este un block element, aplicam margin: auto;.
De-a lungul anilor , centrarea verticala a devenit Sfântul Graal al CSS , ca precum si o gluma populara intre profesionistii frontend . Motivul fiind ca are toate urmatoarele proprietati in acelasi timp:
■ Este frecvent necesara
■ Suna extrem de simplu si usor in teorie
In acest articol, vom explora unele dintre cele mai bune tehnici moderne pentru a invata cum sa rezolvi aceasta problema in orice situatie.
Solutia pozitionarii absolute
Una dintre cele mai vechi tehnici de centrare pe verticala a fost urmatoarea , care necesita o latime fixa si inaltime :
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Solutia “Flexbox“
Aceasta este , fără îndoială, cea mai bună soluție disponibilă , astfel cum a fost flexbox conceput tocmai pentru a ajuta cu probleme de acest gen . Pentru aceasta introducem :
main {
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
}
Acum deja stiti cum sa centrezi un content vertical, deci poti incepe a crea ceea ce ai dorit inainte de citirea articolului dat.
Daca ti-a placut articolul alatura-te la pagina noastra de Facebook:
