Înseamnă bloc css Centering

În timpul aspectul paginilor web sarcină destul de comune de centrare blocuri. Acest lucru poate fi atât de centrare pe verticală și pe orizontală.

De exemplu, dacă un site are o lățime fixă, este rațional să-l alinieze în mijlocul ferestrei browserului, deoarece este mai ușor de citit textul (mai ales în cazul în care ecranul este mare). Unele modele presupun în general locația blocului în centrul ferestrei browser-ului, adică atât centrarea pe verticală și orizontală.

Pentru a începe cu vorbi despre centrarea pe orizontală. Cea mai populară tehnică este atunci când unitatea este centrata instalarea dimensiunile marginilor stânga și dreapta în „auto“. Să presupunem că vrem să alinieze blocul cu id = „container“ latime 860px. În acest caz, aveți nevoie pentru a scrie fișierul CSS:

#container culoare de fundal: #EEE;
lățime: 860px;
margin: 0px auto;
>

Cu toate acestea I.E. versiuni mai vechi (5.0), de exemplu, nu se aliniază blocul în mijloc. Desigur, aceste browsere vechi, nimeni nu foloseste (1800 zi vizitatorii mei - doar 1), dar doar în cazul, mai bine să facă acest lucru și a lucrat acolo :)

Pentru a face acest lucru, elementul de bază, și anume că în interiorul căruia blocul de centru (de obicei, elementul de bază este tag-ul BODY), un parametru este de tip text-align: centru. În acest caz, blocul aliniat în centru, cu toate acestea, și tot conținutul acestuia sunt, de asemenea, aliniate în centru, și nu avem nevoie. Prin urmare, în cadrul acestei unități seta alinierea implicită - text-align: left.

#container culoare de fundal: #EEE;
lățime: 860px;
margin: 0px auto;
text-align: left;
>

Există, de asemenea, un alt mod de unitate de aliniere orizontală, pe baza poziționării. După cum probabil știți, în mod implicit, orice element la nivel de bloc este presată pe marginea din stânga a elementului mamă. Prin urmare, în scopul de a se alinia la centrul de nevoie:

1. Set unitate de poziționare absolută

2. Mutați în dreptul la 50% din lățimea ferestrei browser-ului

3. Folosind un negativ indentat pentru al deplasa spre stânga cu o distanță egală cu jumătate din unitatea de lățime.

Astfel, unitatea va fi la mijloc. Pentru o mai mare claritate, vezi clip de mai jos:

exemplu cod CSS:

Trebuie remarcat faptul că, dacă doriți să poziționați unitatea nu este în raport cu fereastra browser-ului, și, de exemplu, în raport cu cealaltă unitate, cealaltă pentru această unitate trebuie să fie stabilită poziția: relativă;

Să presupunem că blocul #container nostru, doriți să aliniați centrul, se află în interiorul blocului #wrap. Apoi, codul este după cum urmează:

Acum, să ia în considerare cazul în care doriți să aliniați un bloc centrată pe pagină, și anume, se aplică atât centrarea pe orizontală și verticală. Aici, din nou, aplicam poziționare. Deci, avem nevoie să:

1. Set unitate de poziționare absolută

2. Treceți la dreapta cu 50% până la 50%. prin aceasta punând în colțul din stânga sus al centrului ferestrei browser-ului.

3. Folosind o adâncitură negativă deplasa l în sus cu o distanță egală cu jumătate din înălțimea blocului și la stânga o distanță egală cu jumătate din lățimea blocului.

Astfel, unitatea va fi în centrul paginii web.

Să presupunem că înălțimea noastră 600px bloc. bine și 860 lățime px. Apoi, codul CSS va fi după cum urmează:

#container background-color: # 559964;
Poziția: absolută;
top: 50%;
stânga: 50%;
margin-top: -300px;
margin-left: -430px;
height: 600px;
lățime: 860px;
>

Sper că ați înțeles principiul în sine.

Ai o întrebare? Obțineți răspunsuri la Forum Suport

Voi fi primul care a privit lecție.

Eh. În al doilea rând =) sa întâlnit recent cu această problemă în IE, agonie pentru o lungă perioadă de timp)) Vă mulțumesc =)

Va multumim pagina ca marcaj)))

Mulțumesc mult. Andrew, pentru lecții noi!

Doar vă mulțumesc, cred că, nu ce să adăugați aici))

Vă mulțumesc pentru lecție, doar câteva zile în urmă taoe a încercat să facă un pic mai dur, și a amânat temporar

Și am o problemă: site-ul Mozille Firefox nu vrea să se alinieze, lipit pe partea stângă și toate, nici unul dintre cele de mai sus nu ajută (și la fel în Opera).

și de ce nu funcționează? - „dacă doriți să poziționați unitatea nu este în raport cu fereastra browser-ului, și, de exemplu, în legătură cu un alt bloc a unui alt bloc pentru aceasta trebuie să setați poziția: relativă;“

Va multumesc foarte mult !! pur și simplu GIANT vă mulțumesc! Dumnezeu să vă binecuvânteze!

totul este în regulă. dar din anumite motive toate imaginile ajunge în locul numai după actualizarea browserului. Te rog spune-mi de ce se întâmplă acest lucru?

Andrew, vă rugăm să adăugați căutarea site-ului.