În articolul "Centrarea blocului orizontal folosind CSS" am examinat mai multe moduri de centrare a blocului pe orizontală. Uneori este necesar să se alinieze unitatea încă și pe verticală, de exemplu, Flash-saver pe pagina principală a site-ului sau întregul site într-un dreptunghi de dimensiuni fixe, situat întotdeauna în centrul ferestrei browser-ului.
Fără să mai vorbim, să mergem direct la subiect. Din motive de simplitate a experimentului, vom centraliza blocul în raport cu elementul
. În primul rând, setați lățimea și înălțimea elementului în care pentru a plasa blocul nostru (va fi nevoie pentru fiecare element, care va fi ceva de centru), și apoi un alt zero umplutură de valoare în cazul în care, dacă trebuie să existe un fundal.Acum, hai să mergem la lucrul principal și să luăm în considerare câteva exemple.
Blocul are valori absolute de lățime și înălțime.
Să presupunem că trebuie să plasăm pe pagina principală a site-ului un ecran cu o lățime de 300 de pixeli și o înălțime de 200 de pixeli. Încheiem-o în interiorul elementului
Apoi descriem proprietatile CSS ale acestui bloc:
Aici vom specifica bloc de poziționare absolută, în colțul din stânga sus al ferestrei este centrat, iar apoi să deplaseze unitatea în sus și spre stânga cu margine valori negative, care este egală cu jumătate din înălțimea și lățimea blocului respectiv. Codul complet al exemplului este prezentat mai jos:
Este foarte simplu și nu există mese voluminoase!
Blocul are valori relative ale lățimii și înălțimii.
De data aceasta pentru poziționarea blocului folosim doar coordonatele colțului stânga sus. Se scade din înălțimea totală a blocului exterior (la începutul articolului a fost decis că aceasta ar fi
) înălțimea blocului centrat (100% - 50% = 50%). împărțiți-l în jumătate și obțineți partea superioară: 25%. De asemenea, introducem lățimea și indentarea din stânga (în exemplul: stânga: 25%).Trebuie adăugat, în cazul în care interiorul unității noastre ar fi ceva de o dimensiune fixă (de exemplu, imagini), acesta și conținutul său va fi centrată în timp ce dimensiunea sa este mai mare sau egală cu dimensiunea conținutului. Unitatea va fi prepoziționat exact așa cum am arătat la el în CSS, dar devierilor de la marginea ferestrei la ceea ce este în interiorul unității pe verticală nu vor fi aceleași și orizontale liniuță, de asemenea, și anume centrarea este ruptă.
Iată o clătită))
acum voi elimina link-urile
oh) Ei bine, bine)
Din păcate, exemplul nu se rotește deloc dacă înălțimea diva centrat depășește înălțimea părții vizibile din browser. Cu alte cuvinte, la o înălțime de 500 în 800 × 600, veți obține un gunoi = (Deși identitatea însăși în 1600 * 1200 ar arăta perfectă
afișare: celulă de masă; vertical-aliniere: mijloc; înălțime absolută
În practică, valorile sunt de obicei relative, este necesar să se pervertească
Guest, acest cip din IE nu arata, dar in Opera si FireFox este perfect!
Ce pentru IE vă va sfătui?
Dacă puneți 100%, atunci va exista o bară de derulare și nu se freacă :)
În IE, alinierea verticală nu funcționează foarte bine, dacă nu
Exemplul original funcționează în IE și în general ....
și pentru alinierea orizontală, nu este mai simplu să scrieți marja: 0 auto; m?
Vă mulțumim pentru articol, dar căile sugerate nu rezolvă problema în Firefox 2.0 și MSIE 6.0
Mai precis skazatt, în cazul în care dimensiunea ferestrei este mai mare decât dimensiunea blocului - toate bune, dar aici este necesar pentru a face fereastra pe orizontală sau pe verticală, astfel încât unitatea nu este plasat în întregime - și salut, marginea superioară sau stângă a unității merge în negativ regiune (invizibile). Pentru claritate, îi puteți da o margine (bloc): 1px roșu solid; - puteți vedea cum dispare. De jos și din dreapta - totul este bine.
Trimiteți-le prietenilor: