Centrarea layout folosind CSS
2 Septembrie 2010 de Stoica MariusIn acest tutorial o sa invatam cum sa centram layout-ul pe ecran.
Autor : Stoica Marius
Codul HTML
Primul pas este crearea div-ului care va cuprinde tot design-ul paginii.
<html> <head> <title>Cum sa centrezi pagina</title> </head> <body> <div id="wrap"> <p>Continut</p> </div> </body> </html>
CSS
Pentru a centra acest div vom folosi margini auto, retineti , pentru a functiona trebuie sa se specifice latimea(width) a acestuia fie in pixeli , em sau procentaj.
#wrap{
width:400px;
margin:0 auto 0 auto; /* sau "0 auto;" nu este nici o diferenta */
}
Ar fi prea frumos daca ar merge in toate navigatoarele nu ? Bineinteles, din nou IE ne face probleme , asa ca va trebui sa folosim un mic "hack" pentru a ajunge la rezultatul dorit.
body{
text-align:center;
}
Probabil stiti ca prin defect continutul "copil" mosteneste aceste stiluri.Cu alte cuvinte , tot continutul o sa fie centrat , asa ca va trebui sa
apelam din nou la text-align.Acum il vom include in #wrap.
#wrap{
text-align:left;
}
Codul complet : am mai adaugat cateva stiluri pentru a imbunatati vizibilitatea si prezentarea .
body{
text-align:center;
font:12px Verdana, Arial, Helvetica, sans-serif;
}
#wrap{
width:400px;
margin:0 auto 0 auto;
text-align:left;
border:1px solid #FF0000;
padding:4px;
}
Da si tu un like
Tweet
Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta