In acest tutorial o sa invatam cum sa centram layout-ul pe ecran.
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>
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
Comenturi
1 comenturi pana acum... (posteaza si tu)Doamne, ce misto , eu adaugam margin left si right :) pana mi se parea mie ca este pe mijloc , SUNT incepator . Sanatate
Postat de Vlad pe data de: Thursday, 12.30.10 @ 09:19am