<< Înapoi

Cum creezi un div centrat vertical

publicat 2008-06-21 11:26:52 de admin


Probabil ca de multe ori ai avut probleme incercand sa creezi un <div> care sa apara centrat fix pe mijlocul paginii. Centrarea orizontala nu este o problema asa mare, pentru ca in principiu poti seta marginile pe auto (margin: auto).

Pentru a centra vertical totusi, este nevoie de o mica "smecherie". Primul lucru pe care trebuie sa il retii este ca pozitia trebuie setata ca absoluta (position: absolute). Precizand distantele fata de sus si stanga (top: 50%, left: 50%) putem gasi centrul dar asta inseamna ca coltul stanga sus al <div>-ului nostru va incepe din centru, deci el nu va fi practic centrat.

Mica "smecherie" consta in declararea explicita a latimii si a inaltimii, iar apoi declararea unor margini negative pentru <div> de dimensiune fix jumatate din dimensiunile declarate ale <div>-ului.

Iata si exemplul:

#div_centrat
{
background-color: #F2F2F2;
border: 1px solid #CCCCCC;
width: 28em;
height: 18em;
margin-left: -14em;
margin-top: -9em;
position: absolute;
top: 50%;
left: 50%;
}

Sper ca acest scurt articol te va ajuta sa obtii designul dorit!
Mult noroc!