[CSS/DIV] Rezolvă perfect centrarea orizontală a paginilor CSS

O metodă CSS comună de centrare orizontală a elementelor

Centrarea elementelor cu CSS nu este o chestiune trivială – aceleași setări legitime de centrare CSS se comportă diferit în browsere diferite. Să începem prin a analiza câteva modalități comune de a centra elementele orizontal în CSS.

1. Centrare cu marje automate

Modul preferat de a centra elementele orizontal în CSS este să folosești proprietatea margine—pur și simplu setezi proprietățile margin-left și margin-right pe auto. În utilizarea practică, putem crea o divizie container pentru aceste elemente care trebuie centrate. Un lucru de reținut este că lățimea recipientului trebuie specificată:

div#container{ margin-left:auto; margine-dreapta:auto; lățime: 168px; }

Această abordare funcționează foarte bine în majoritatea browserelor mari, chiar și IE6 pe Windows poate fi afișat corect în modul său standard de conformitate. Din păcate, în versiunile inferioare ale IE, această setare nu obține un efect de centrare. Așadar, dacă vrei să folosești această metodă într-un proiect real, asigură-te că versiunea utilizatorului pentru browserul IE nu este mai mică decât 6.0.

În ciuda lipsei de suport, majoritatea designerilor recomandă utilizarea acestei abordări cât mai mult posibil. Această metodă este considerată, de asemenea, cea mai corectă și rezonabilă dintre toate metodele de implementare a centrării la nivel de element cu CSS.

2. Folosește text-align pentru a obține centrarea

O altă modalitate de a obține centrarea elementelor este să folosești proprietatea text-align, să setezi valoarea proprietății la centrare și să o aplici elementului corpului. Este un hack complet, dar este compatibil cu majoritatea browserelor, deci este esențial în unele cazuri.

Se numește hack deoarece această metodă nu aplică proprietăți de text textului, ci elementului care este containerul. Acest lucru ne oferă și muncă suplimentară. După crearea div-urilor necesare pentru layout, trebuie să aplicăm proprietatea text-align corpului conform următorului cod:

corp{ text-align:center; }

Vor apărea probleme după aceea? Toți descendenții corpului sunt centrați.

Prin urmare, trebuie să scriem o altă regulă pentru a readuce textul la alinierea implicită din stânga:

p{ text-align:left; }

Este de conceput ca această regulă suplimentară să provoace unele neplăceri. De asemenea, un browser care respectă cu adevărat standardul nu schimbă poziția containerului, ci doar centrează textul în el.

3. Folosirea unei combinații de margini automate și aliniere a textului

Deoarece metoda de centrare a alinierii textului are o compatibilitate bună retroactivă, iar metoda de umplutură automată este suportată și de majoritatea browserelor contemporane, mulți designeri folosesc o combinație a celor două pentru a maximiza suportul cross-browser pentru efectul de centrare:

corp{ text-align:center; } #container{ margin-left:auto; margine-dreapta:auto; graniță:1pxsolidred; lățime: 168px; text-align:left }

Dar asta e mereu o înșelătorie și nu este deloc perfectă. Trebuie să scriem reguli suplimentare pentru textul din containerul centrat, dar cel puțin arată bine în diverse browsere.

4. Soluție cu margine exterioară negativă

Soluțiile cu margini negative sunt departe de a fi la fel de simple precum adăugarea marjelor negative la elemente. Această metodă necesită utilizarea atât a poziționării absolute, cât și a tehnicilor cu marjă negativă.

Următoarea este metoda specifică de implementare a acestei scheme. În primul rând, creează un container cu elemente centrate și poziționează-l absolut 50% din marginea stângă a paginii. Astfel, marginea stângă a containerului va începe de la 50% din lățimea paginii.

Apoi, setați valoarea marginii din stânga containerului la jumătate din lățimea negativă a containerului. Acest lucru va fixa containerul la mijlocul direcției orizontale a paginii.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; poziție: absolut; stânga: 50%; lățime: 760px; margine-stânga:-380px; }

Uite, fără trucuri! Deși aceasta nu este soluția preferată, este o metodă bună și este foarte versatilă – surprinzător, nici măcar nu funcționează în NetscapeNavigator 4.x fără probleme, nu-i așa? Așadar, dacă vrei cea mai largă gamă de suport pentru browsere, această metodă va fi cea mai bună alegere.