home > tutoriale > html-css > centrare-layout-folosind-css.php

Centrarea layout folosind CSS

2 Septembrie 2010 de Stoica Marius

In acest tutorial o sa invatam cum sa centram layout-ul pe ecran.

Tutorial : autor
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
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Tutoriale din Categoria HTML & CSS

  CSS3 border-radius si -moz-boder-radius   -   Cum sa faci un simplu web-site pe 3 coloane   -   Un simplu meniu in CSS si HTML   -   Centrarea paginii cu CSS   -   Table in HTML   -

Tutoriale aleatorii

  Cum sa creezi litere capitale/majuscule cu CSS   -   CSS3 border-radius si -moz-boder-radius   -   Cum sa faci un simplu web-site pe 3 coloane   -   Table in HTML   -   Cum sa inserezi un sunet/melodie intr-o pagina   -   Trimiterea datelor din formular la adresa de e-mail   -   Validarea unui formular   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul: