Foi de Stil Web
Indrumari si Trucuri CSS

Centrarea lucrurilor

O activitate uzuala pentru CSS este sa centreze text sau imagini. In fapt, exista trei tipuri de centrare:

• Centrarea liniilor de text
• Centrarea unui bloc de text sau a unei imagini
• Centrarea verticala a unui bloc sau a unei imagini

Centrarea liniilor de text

Cel mai intalnit si (de aceea) usor tip de centrare este acel al liniilor de text in paragrafe sau titluri. CSS are proprietatea 'text-align' pentru asta:

P { text-align: center }
H2 { text-align: center }

interpreteaza fiecare linie intr-un P sau intr-un H2 centrata intre marginile lui, ca acesta:

Centrarea unui bloc sau imagini

Cateodata nu este textul cel care trebuie centrat ci blocul ca un intreg. Sau, reformuland: noi dorim ca marginile din stanga si din dreapta sa fie egale. Modul prin care sa se obtina aceasta este setarea marginilor la 'auto'. Aceasta este in mod normal utilizata cu un bloc de latime fixa, pentru ca daca blocul insusi este flexibil, va lua simplu toata latimea disponibila. Iata un exemplu:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P class="blocktext">This rather...

Acesta este deasemenea modul de centrare a unei imagini: transformati-o intr-un bloc de una singura si ii aplicati proprietatile margin. De exemplu:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Centrarea verticala

Nivelul 2 CSS nu are o proprietate pentru centrarea verticala a lucrurilor. Probabil va exista una in CSS nivel 3. Dar chiar in CSS2 puteti centra blocurile vertical, prin combinarea catorva proprietati. Trucul este sa se specifice ca blocul exterior va fi formatat ca o celula de tabel, pentru ca continutul celulei de tabel poate fi centrat vertical.

Exemplul de mai jos centreaza un paragraf in interiorul unui bloc care are o anumita inaltime data. Un exemplu separat arata un paragraf care este centrat vertical in fereastra browserului, pentru ca este in interiorul unui bloc care este pozitionat absolut si inalt cat fereastra.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>