Centrarea siteului web in CSS

 

Astazi vom crea o pagina web foarte simpla si vom alinia continutul in centrul ecranului. Din punct de vedere HTML pagina este cat se poate de simpla. Vom afisa doar o eticheta H1 si un paragraf. Deci doar HTML:


Bun venit in site-ul meu!

Primul meu paragraf...

Pentru a afisa continutul site-ului in centrul ecranului este necesar sa-l incadram intr-un div. Acesta este identificat folosind selectorul CSS "class" dar la fel de usor putea fi folosit selectorul "id". Este o chestiune de preferinta personala alegerea tipului de selector dorit. Clasei site ii asociem cateva proprietati: latime, inaltime, o culoare de fundal pentru a deosebi diviziunea respectiva de fundalul elementului "body" si marginea pe care o setam la 0 si care este calculata automat fata de stanga si dreapta. Folosirea lui margin:0 auto; face ca div-ul care va contine site-ul nostru sa fie asezat in centrul ecranului, egal departat de stanga si de dreapta.

.site{
width:800px;
height:600px;
margin:0 auto;
background-color:#d0e4fe;
}

Am adaugat si cateva reguli pentru afisarea titlurilor h1 si a paragrafelor si am schimbat culoarea fundalului pentru elementul body. Acestea sunt:

body{
background-color:#ccc;
}
h1{
color:orange;
text-align:center;
}
p{
font-family:"Times New Roman";
font-size:20px;
}

Daca doriti sa testati tot codul nu trebuie decat sa-l copiati de mai jos:


Bun venit in site-ul meu!

Primul meu paragraf...

Daniel I.

0Comentarii la "Centrarea siteului web in CSS"

Adauga Comentariu

Mesaj

Trimite