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   -   Centrarea paginii cu CSS   -   Table in HTML   -   Cum sa inserezi un sunet/melodie intr-o pagina   -

Tutoriale aleatorii

  Meniu Slide-Out cu Jquery, Html si CSS   -   Cum sa faci un simplu web-site pe 3 coloane   -   Un simplu meniu in CSS si HTML   -   Validarea unui formular   -   Tutorial Jquery pentru incepatori   -   Afisarea datei cu Javascript   -   Efect "Tube" in PhotoShop   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul:

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

Comentarii:

Nume:

Email:

Comentariu:
 

*Intrebare de verificare : Raspunde la intrebarea din imaginea de mai jos ...
 
HINT : Raspunsul este din 6 litere, incepe cu r si se termina cu s
 


Important:
E-mailul nu va fi vizibil si NU va fi folosit de catre rotuts.com .
Nu sunt permise linkuri catre alte pagini.
Va rugam , comentariile sa ramana strict relationate cu topicul.
Comentariile considerate ofensive sau care nu au nici o legatura cu topicul vor fi sterse(trolling).

Folosirea codului HTML nu este permisa.
Puteti folosi BBcode pentru a va formata textul.