Dacă tăiați orice site creat pe bazat pe html, atunci o anumită structură strat cu strat va apărea în fața ta. Mai mult, cu ale lui aspect va fi asemănător cu un tort stratificat. Dacă ți se pare așa, atunci cel mai probabil nu ai mâncat de mult. Așa că mai întâi potoliți-vă foamea, apoi vă vom spune cum să centrați un strat div pe site-ul dvs.:
Avantajele aspectului folosind o etichetăExistă două tipuri principale de structură a site-ului web:
- Tabular;
- Bloc.
Aspectul tabelar era dominant chiar și în zorii Internetului. Avantajele sale includ precizia poziționării specificate. Dar, cu toate acestea, are deficiențe evidente. Principalele sunt volumul de cod și viteza mica descărcări.
Când utilizați aspectul tabelului, pagina web nu va fi afișată până când sarcina completa. În timp ce utilizați blocuri div, elementele sunt afișate imediat.
Cu exceptia de mare viteză construcția blocului de încărcare a site-ului vă permite să reduceți volumul de mai multe ori cod html. Inclusiv prin utilizarea claselor CSS.
Cu toate acestea, aspectul tabelar ar trebui utilizat pentru a structura afișarea datelor pe pagină. Un exemplu clasic de utilizare a acestuia este afișarea tabelelor.
Construcția blocurilor bazată pe etichete este numită și strat cu strat, iar blocurile în sine sunt numite straturi. Acest lucru se datorează faptului că, atunci când sunt utilizate anumite valori de proprietate, acestea pot fi stivuite una peste alta, similar straturilor din Photoshop.
Ajutoare pentru poziționareÎN aspectul blocului Este mai bine să poziționați straturile folosind foi de stil în cascadă. Principala proprietate CSS responsabilă pentru aspect este float.
Sintaxa proprietății:
float: stânga | dreapta | niciunul | moşteni
Unde:
- stânga – aliniați elementul la marginea din stânga a ecranului. Curgerea în jurul elementelor rămase are loc în dreapta;
- dreapta – aliniere la dreapta, curgere în jurul altor elemente – la stânga;
- nici unul – împachetarea nu este permisă;
- mostenire – mostenire valorica element părinte.
Să ne uităm la un exemplu ușor de poziționare a div-urilor folosind această proprietate:
#stânga ( lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,51,102); ) #right ( lățime: 200px; înălțime: 100px; float: dreapta; fundal: rgb(0,255,153); ) Bloc din stânga Blocul din dreapta
Acum vom încerca să folosim aceeași proprietate pentru a poziționa al treilea div în centrul paginii. Dar, din păcate, float nu are o valoare centrală. Și când dați unui bloc nou o valoare de aliniere la dreapta sau la stânga, acesta este deplasat în direcția specificată. Prin urmare, tot ce rămâne este să setați float: lăsat la toate cele trei blocuri:
Dar asta nu este cea mai bună opțiune. Când fereastra este mai mică, toate straturile sunt aliniate pe un rând vertical, iar când dimensiunea este mărită, se lipesc de marginea stângă a ferestrei. Deci avem nevoie de o modalitate mai bună de a centra div-ul. Straturi de centrare
ÎN exemplul următor Vom folosi un strat de container in care vom aseza elementele ramase. Acest lucru rezolvă problema blocurilor care se mișcă unul față de celălalt atunci când dimensiunea ferestrei este modificată. Centrarea containerului în mijloc se face prin stabilirea marjei proprietăților valoare zero marginile din marginea superioară și automat pe părțile laterale (margine: 0 auto):
#container ( lățime: 600px; margine: 0 automat; ) #stânga ( lățime: 200px; înălțime: 100px; flotant: stânga; fundal: rgb(255,51,102); ) #dreapta ( lățime: 200px; înălțime: 100px; flotant : stânga; fundal: rgb(0,255,153) #center ( lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,0,0); ) Bloc din stânga Bloc din dreapta
Același exemplu arată cum puteți centra un div pe orizontală. Și dacă editați ușor codul de mai sus, puteți obține alinierea verticală a blocurilor. Pentru a face acest lucru, trebuie doar să modificați lungimea stratului de container (reduceți-l). Adică, după editarea clasei sale css ar trebui să arate astfel:
După schimbare, toate blocurile se vor alinia strict într-un rând la mijloc. Și poziția lor nu se va schimba indiferent de dimensiunea ferestrei browserului. Iată cum arată centrarea verticală a unui div:
În exemplul următor, am folosit o serie de altele noi pentru a centra straturile în interiorul unui container. proprietăți css :
#container ( lățime: 450 px; înălțime: 150 px; margine: 0 automat; culoarea fundalului: #66CCFF; ) # stânga ( lățime: 100 px; înălțime: 100 px; fundal: rgb(255,51,102); afișaj: bloc inline; vertical-align: middle; margin-left: 35px ) #right ( lățime: 100px; înălțime: 100px; fundal: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; ) #center ( lățime: 100px; înălțime: 100px; fundal: rgb(255,0,0); afișare: bloc inline; aliniere verticală: mijloc; margine-stânga: 35px; )
Scurtă descriere a proprietăților css și a valorilor lor pe care le-am folosit în acest exemplu pentru a centra un div în interiorul unui div:
- display: inline-block – aliniază un element bloc într-o linie și asigură că se înfășoară în jurul altui element;
- vertical-align: middle – aliniază elementul la mijloc în raport cu părintele;
- margin-left – setează marginea din stânga.
Oricât de ciudat ar suna, acest lucru este posibil. Uneori poate fi necesar un bloc div ca link în timpul aspectului tipuri variate meniul. Sa luam in considerare exemplu practic implementarea stratului link:
#layer1( lățime: 500px; înălțime: 100px; fundal: rgb(51.255.204); border:groove; ) a ( afișare: bloc; text-align: center; înălțime: 100%; culoare: rgb(255,0,51) ; ) Link către site-ul nostru
În acest exemplu, folosind linia de afișare: bloc, setăm legătura la valoarea unui element bloc. Și pentru ca întreaga înălțime a blocului div să devină o legătură, setați înălțimea: 100%. Ascunde și arată elemente de bloc
Elementele bloc oferă mai multe posibilitati pentru a extinde funcționalitatea interfeței decât aspectul tabelar învechit. Se întâmplă adesea ca designul site-ului web să fie unic și ușor de recunoscut. Dar pentru o astfel de exclusivitate trebuie să plătești din lipsă de spațiu liber.
Mai ales se referă pagina principala, costul de publicitate pe care este cel mai mare. Prin urmare, se pune problema unde să „împingă” pe altul banner publicitar. Si acum alinierea div Nu ai cum să scapi de el în centrul paginii!
O soluție mai rațională este să ascundă un bloc. Iată un exemplu simplu de astfel de implementare:
#layer1( display:block; lățime: 500px; înălțime: 100px; fundal: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="bloc"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )
Acesta este butonul magic. Făcând clic pe acesta, se va ascunde sau se va afișa blocul de ascundere.
La crearea unui div blocuri, probabil că ați întâlnit situații în care trebuie să vă centrați div-ul orizontal și vertical folosind CSS pur. De exemplu, când creați ferestre pop-up cu . Există mai multe moduri de a implementa centrarea, iar în acest articol voi împărtăși modurile mele preferate și cele mai simple, folosind CSS sau jQuery.
În primul rând, elementele de bază:
Centrare orizontală în CSSAcest lucru este ușor de făcut, folosim marginea pentru noi div bloc.
ClassName( margin:0 auto; lățime:200px; înălțime:200px; )
Pentru centrare bloc div numai pe orizontală, trebuie să definiți lățimea blocului (lățimea), utilizați proprietatea auto pentru marginile din stânga și din dreapta. Această metodă va funcționa pentru toate elementele blocului (div, p, h1 și așa mai departe...). Pentru a aplica centrarea orizontală elementelor inline (linkuri, imagini...), trebuie să aplicați afișajul: bloc;
Centrare orizontală și verticală în CSSCentrarea unui bloc div orizontal și vertical în același timp este puțin mai dificilă. Trebuie să cunoașteți dimensiunile blocului div din timp.
ClassName( lățime:300px; înălțime:200px; poziție:absolut; stânga:50%; sus:50%; margine:-100px 0 0 -150px; )
Folosind poziționarea absolută a unui bloc, îl putem detașa de elementele din jur și îi putem determina poziția în raport cu dimensiunea ferestrei browserului. Mutați blocul div 50% în stânga și în partea de sus a ferestrei. Colțul din stânga sus al blocului se află acum în centrul ferestrei browserului. Tot ce rămâne este să plasați blocul div în centrul paginii, deplasându-l jumătate din lățime spre stânga și jumătate din înălțime în sus. Ura! Rezultatul a fost centrarea excelentă a blocului pe css pur cod.
Centrare orizontală și verticală cu jQueryCa menționat mai devreme - Metoda CSS centrarea funcționează numai cu dimensiuni fixe. Dacă dimensiunile nu sunt definite, metoda jQuery va veni în ajutor:
$(window).resize(function())( $(".className").css(( poziție:"absolut", stânga: ($(window).width() - $(".className").outerWidth ( ))/2, sus: ($(window).height() - $(".className").outerHeight())/2 )); // Pentru a rula o funcție când fereastra este încărcată: $(window).resize();
Operațiune aceasta metoda este să rulați funcția resize() folosind linia $(window).resize() . Această funcție funcționează ori de câte ori fereastra browserului este redimensionată. Folosim outerWidth() și outerHeight() deoarece, spre deosebire de width() și height() , acestea includ umplutura și grosimea chenarelor în dimensiunea pe care o returnează. Ultima linie începe procesul de centrare a blocului div când pagina se încarcă.
Avantajul utilizării acestei metode este că este posibil să nu știți ce dimensiune are div-ul. Principalul dezavantaj– aceasta funcționează numai când JavaScript este activat. Prin urmare, această metodă este acceptabilă pentru interfețe multifuncționale precum VKontakte, Facebook etc.
Ca întotdeauna, nu ezitați să sugerați metoda preferată de centrare a blocurilor prin comentarii.Câte copii au fost deja sparte despre sarcina de a alinia elemente pe o pagină. Vă aduc în atenție o traducere a unui articol excelent cu o soluție la această problemă de la Stephen Shaw pentru Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.
Cu toții știam despre margine: 0 auto; pentru centrare orizontală, dar margine: auto; nu a funcționat pentru verticală. Acest lucru poate fi rezolvat cu ușurință prin simpla setare a înălțimii și aplicarea următoarelor stiluri:
Absolut-Center (marja: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )
Nu sunt primul care propune această soluție, dar această abordare este rar folosită când aliniere verticală. În comentariile la articolul Cum să centrați orice cu CSS, Simon se referă la un exemplu jsFiddle care oferă solutie perfecta pentru centrare verticală. Iată mai multe despre acest subiect.
Să aruncăm o privire mai atentă asupra metodei.
Avantaje- Compatibilitate între browsere (inclusiv IE 8-10)
- Fără markup suplimentar, stil minim
- Adaptabilitate
- Independență față de umplutură (fără dimensiunea cutiei!)
- Funcționează pentru imagini
- Trebuie specificată înălțimea (vezi Înălțimea variabilă)
- Este recomandat să setați overflow: auto pentru ca conținutul să nu se răspândească
- Nu funcționează pe Windows Phone
Absolut-Center ( lățime: 50%; înălțime: 50%; preaplin: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )
Utilizarea ferestrei de vizualizare Setați conținutul la poziția: fix și setați indexul z:Absolute-Center.is-Fixed ( lățime: 50%; înălțime: 50%; overflow: automat; margine: automat; poziție: fix; sus: 0; stânga: 0; jos: 0; dreapta: 0; z-index: 999)
Absolute-Center.is-Responsive ( lățime: 60%; înălțime: 60%; lățime minimă: 400px; lățime maximă: 500px; umplutură: 40px; overflow: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; dreapta: 0; 
De asemenea, puteți alinia conținutul pe partea dorită, lăsând centrarea în înălțime. Pentru a face acest lucru, trebuie să utilizați dreptul: 0; stânga: auto; pentru alinierea la dreapta sau la stânga: 0; dreapta: auto; pentru alinierea la stânga.
Absolute-Center.is-Right ( lățime: 50%; înălțime: 50%; margine: automat; overflow: automat; poziție: absolut; sus: 0; stânga: automat; jos: 0; dreapta: 20px; text-align: dreapta; 
.Absolute-Center.is-Overflow ( lățime: 50%; înălțime: 300px; înălțime maximă: 100%; marjă: automat; overflow: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta : 0;
Imagini Această metodă funcționează grozav și pentru imagini! Adăugați înălțimea stilului: automat; apoi imaginea se va scala împreună cu containerul. Absolute-Center.is-Image ( lățime: 50%; înălțime: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; ) 
Pot exista probleme cu compatibilitatea între browsere, poate că ar trebui să utilizați metoda tabel-celule (descrisă mai jos).
- Firefox/IE8: Utilizarea afișajului: tabelul aliniază blocul vertical la partea de sus a documentului.
- IE9/10: Folosind afișajul: tabelul aliniază blocul la stânga colțul de sus pagini.
- Mobile Safari: Dacă lățimea este setată la procent, centrarea orizontală are de suferit
Alte metode Metoda descrisă funcționează bine în majoritatea cazurilor, dar există și alte metode care pot fi aplicabile pentru a rezolva probleme specifice. Probabil cel mai mult mod popular. Potrivit dacă dimensiunile blocului sunt cunoscute. Este negativ ( lățime: 300px; înălțime: 200px; umplutură: 20px; poziție: absolut; sus: 50%; stânga: 50%; margine-stânga: -170px; /* (lățime + umplutură)/2 */ margin- sus: -120px /* (înălțime + umplutură)/2 */ )
Avantaje:
- Compatibilitate între browsere
- Cod minim
- Nu adaptiv
- Aspectul se strecoară dacă există prea mult conținut în recipient
- Trebuie să compensați umplutura sau să utilizați box-sizing: border-box
Este transformat ( lățime: 50%; marjă: automat; poziție: absolut; sus: 50%; stânga: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%) transforma: translate(-50%,-50%);
Avantaje:
- Înălțime variabilă
- Cod minim
- Nu funcționează în IE 8
- Utilizarea prefixelor
- Poate interfera cu alte efecte de transformare
- În unele cazuri, marginile blocurilor și textul sunt neclare în timpul redării
<!-- CONTINUT -->
CSS:
.Pos-Container.is-Table ( display: table; ) .is-Table .Table-Cell ( display: table-cell; vertical-align: middle; ) .is-Table .Center-Block ( lățime: 50%; marja: 0 auto;
Avantaje:
- Înălțime variabilă
- Aspectul nu funcționează când cantitati mari text în bloc
- Compatibilitate între browsere
- Structură complexă
Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: -ms-flex-align: -webkit-align-items: center -ms-flex-pack; : centru; justificare-conținut: centru)
Avantaje:
- Conținutul poate avea orice înălțime sau lățime
- Poate fi folosit în cazuri mai complexe
- Nu există suport pentru IE 8-9
- Necesită container sau stiluri în corp
- Necesită o mare varietate de prefixe pentru funcţionare corectăîn browserele moderne
- Posibile probleme de performanță
Câte copii au fost deja sparte despre sarcina de a alinia elemente pe o pagină. Vă aduc în atenție o traducere a unui articol excelent cu o soluție la această problemă de la Stephen Shaw pentru Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.
Cu toții știam despre margine: 0 auto; pentru centrare orizontală, dar margine: auto; nu a funcționat pentru verticală. Acest lucru poate fi rezolvat cu ușurință prin simpla setare a înălțimii și aplicarea următoarelor stiluri:
Absolut-Center (marja: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )
Nu sunt primul care propune această soluție, dar această abordare este rar folosită pentru alinierea verticală. În comentariile la articolul Cum să centrați orice cu CSS, Simon trimite la un exemplu jsFiddle care oferă o soluție excelentă pentru centrarea verticală. Iată mai multe despre acest subiect.
Să aruncăm o privire mai atentă asupra metodei.
Avantaje- Compatibilitate între browsere (inclusiv IE 8-10)
- Fără markup suplimentar, stil minim
- Adaptabilitate
- Independență față de umplutură (fără dimensiunea cutiei!)
- Funcționează pentru imagini
- Trebuie specificată înălțimea (vezi Înălțimea variabilă)
- Este recomandat să setați overflow: auto pentru ca conținutul să nu se răspândească
- Nu funcționează pe Windows Phone
Absolut-Center ( lățime: 50%; înălțime: 50%; preaplin: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )
Utilizarea ferestrei de vizualizare Setați conținutul la poziția: fix și setați indexul z:Absolute-Center.is-Fixed ( lățime: 50%; înălțime: 50%; overflow: automat; margine: automat; poziție: fix; sus: 0; stânga: 0; jos: 0; dreapta: 0; z-index: 999)
Absolute-Center.is-Responsive ( lățime: 60%; înălțime: 60%; lățime minimă: 400px; lățime maximă: 500px; umplutură: 40px; overflow: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; dreapta: 0;
De asemenea, puteți alinia conținutul pe partea dorită, lăsând centrarea în înălțime. Pentru a face acest lucru, trebuie să utilizați dreptul: 0; stânga: auto; pentru alinierea la dreapta sau la stânga: 0; dreapta: auto; pentru alinierea la stânga.
Absolute-Center.is-Right ( lățime: 50%; înălțime: 50%; margine: automat; overflow: automat; poziție: absolut; sus: 0; stânga: automat; jos: 0; dreapta: 20px; text-align: dreapta;
.Absolute-Center.is-Overflow ( lățime: 50%; înălțime: 300px; înălțime maximă: 100%; marjă: automat; overflow: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta : 0;
Imagini Această metodă funcționează grozav și pentru imagini! Adăugați înălțimea stilului: automat; apoi imaginea se va scala împreună cu containerul. Absolute-Center.is-Image ( lățime: 50%; înălțime: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )
Pot exista probleme cu compatibilitatea între browsere, poate că ar trebui să utilizați metoda tabel-celule (descrisă mai jos).
- Firefox/IE8: Utilizarea afișajului: tabelul aliniază blocul vertical la partea de sus a documentului.
- IE9/10: Folosind afișaj: tabelul aliniază blocul la colțul din stânga sus al paginii.
- Mobile Safari: Dacă lățimea este setată la procent, centrarea orizontală are de suferit
Alte metode Metoda descrisă funcționează foarte bine în majoritatea cazurilor, dar există și alte metode care pot fi folosite pentru a rezolva probleme specifice Marja negativă Probabil cea mai populară metodă. Potrivit dacă dimensiunile blocului sunt cunoscute. Este negativ ( lățime: 300px; înălțime: 200px; umplutură: 20px; poziție: absolut; sus: 50%; stânga: 50%; margine-stânga: -170px; /* (lățime + umplutură)/2 */ margin- sus: -120px /* (înălțime + umplutură)/2 */ )
Avantaje:
- Compatibilitate între browsere
- Cod minim
- Nu adaptiv
- Aspectul se strecoară dacă există prea mult conținut în recipient
- Trebuie să compensați umplutura sau să utilizați box-sizing: border-box
Este transformat ( lățime: 50%; marjă: automat; poziție: absolut; sus: 50%; stânga: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%) transforma: translate(-50%,-50%);
Avantaje:
- Înălțime variabilă
- Cod minim
- Nu funcționează în IE 8
- Utilizarea prefixelor
- Poate interfera cu alte efecte de transformare
- În unele cazuri, marginile blocurilor și textul sunt neclare în timpul redării
<!-- CONTINUT -->
CSS:
.Pos-Container.is-Table ( display: table; ) .is-Table .Table-Cell ( display: table-cell; vertical-align: middle; ) .is-Table .Center-Block ( lățime: 50%; marja: 0 auto;
Avantaje:
- Înălțime variabilă
- Aspectul nu funcționează când există o cantitate mare de text într-un bloc
- Compatibilitate între browsere
- Structură complexă
Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: -ms-flex-align: -webkit-align-items: center -ms-flex-pack; : centru; justificare-conținut: centru)
Avantaje:
- Conținutul poate avea orice înălțime sau lățime
- Poate fi folosit în cazuri mai complexe
- Nu există suport pentru IE 8-9
- Necesită container sau stiluri în corp
- Necesită o mare varietate de prefixe pentru a funcționa corect în browserele moderne
- Posibile probleme de performanță
În procesul de aranjare a paginilor web, sarcina de a centra blocurile este destul de comună. Aceasta poate fi centrare verticală sau orizontală.
De exemplu, dacă site-ul are lățime fixă, atunci ar fi rațional să-l aliniem în centrul ferestrei browser, deoarece acest lucru face textul mai ușor de citit (mai ales dacă monitorul este mare). Unele modele implică în general plasarea blocului în centrul ferestrei browserului, adică atât centrarea verticală, cât și orizontală.
Mai întâi, să vorbim despre centrarea orizontală. Cea mai populară tehnică este centrarea blocului setând marginile din dreapta și din stânga la „auto”. Să presupunem că vrem să centrem un bloc cu id = „container” și o lățime de 860px. În acest caz, în fișier CSS trebuie sa scrii:
#container (
culoare de fundal:#EEE;
lățime: 860px;
margine: 0px automat;
}
Cu toate acestea, I.E. versiunile mai vechi (5.0 de exemplu) nu vor alinia acest bloc centrat. Desigur, nimeni nu mai folosește browsere atât de vechi (din 1800 dintre vizitatorii mei zilnici - doar 1), dar pentru orice eventualitate, este mai bine să funcționeze și acolo :)
Pentru a face acest lucru, elementul părinte, adică cel în care ne concentrăm blocul (de obicei elementul părinte este eticheta BODY), trebuie să setați parametrul text-align:center. În acest caz, blocul va fi aliniat la centru, dar tot conținutul său va fi, de asemenea, aliniat la centru, dar nu avem nevoie de asta. Prin urmare, în interiorul acestui bloc setăm alinierea implicită - text-align:left .
corp (text-align:center)
#container (
culoare de fundal:#EEE;
lățime: 860px;
margine: 0px automat;
text-align:stânga;
}
Există și o altă cale aliniere orizontala bloc bazat pe . După cum probabil știți, în mod implicit, orice element bloc este apăsat pe marginea din stânga a elementului părinte. Prin urmare, pentru a-l alinia la centru aveți nevoie de:
2. Mutați-l la dreapta cu 50% din lățimea ferestrei browserului
3. Folosind umplutura negativă, mutați-l spre stânga cu o distanță egală cu jumătate din lățimea blocului.
Astfel blocul va fi centrat. Pentru mai multă claritate, urmăriți videoclipul de mai jos:
Exemplu de cod CSS:
#container (
culoare de fundal:#559964;
poziție: absolut;
stânga:50%;
margine-stânga:-430px;
lățime: 860px;
}
Trebuie remarcat faptul că, dacă doriți să poziționați un bloc nu în raport cu fereastra browserului, ci, de exemplu, în raport cu un alt bloc, atunci pentru acest alt bloc trebuie să setați poziția: relativă;
Să presupunem că blocul nostru #container, care trebuie să fie centrat, se află în interiorul blocului #wrap. Apoi codul va arăta astfel:
#wrap(poziție:relativ)
#container (
culoare de fundal:#559964;
poziție: absolut;
stânga:50%;
margine-stânga:-430px;
lățime: 860px;
}
Acum să ne uităm la cazul în care trebuie să aliniați un bloc la centrul paginii, de exemplu. Aplicați centrarea orizontală și verticală simultan. Poziționarea intră din nou în joc aici. Deci avem nevoie de:
1. Setați blocul poziționare absolută
2. Mutați-l la dreapta cu 50% și în jos cu 50%, plasând astfel colțul din stânga sus în centrul ferestrei browserului.
3. Folosind căptușeală negativă, deplasați-l în sus cu o distanță egală cu jumătate din înălțimea blocului și spre stânga cu o distanță egală cu jumătate din lățimea blocului.
Acest lucru va plasa blocul în centrul paginii web.
Să presupunem că înălțimea blocului nostru este de 600 px, iar lățimea este de 860 px. Apoi codul CSS va arăta astfel:
#container (
culoare de fundal:#559964;
poziție: absolut;
sus:50%;
stânga:50%;
margin-top:-300px;
margine-stânga:-430px;
înălțime: 600px;
lățime: 860px;
}
Sper că principiul în sine vă este clar.
Evaluează lecția: 1 2 3 4 5
Comentarii:
Voi fi primul care urmărește lecția!!!
Eh... În al doilea rând =) Am întâlnit recent această problemă în IE, am suferit mult timp)) Mulțumesc =)
Mulțumesc, pagină marcată)))
Mulțumesc foarte mult, Andrey, pentru noile lecții!
Doar mulțumesc, nu cred că este ceva de adăugat aici))
Mulțumesc pentru lecție, am încercat să fac asta acum câteva zile, am suferit puțin și am lăsat-o temporar deoparte
Dar am o problemă: site-ul din Mozille Firefox nu vrea să fie aliniat, este lipit de marginea din stânga și gata, nimic din cele de mai sus nu ajută (la fel și în Opera).
de ce nu merge asta? - „dacă doriți să poziționați un bloc nu relativ la fereastra browserului, ci, de exemplu, în raport cu un alt bloc, pentru acest alt bloc trebuie să setați poziția: relativă;”
Multumesc mult!! Doar un GIGANT, Dumnezeu sa va binecuvanteze!
Totul este în regulă, dar dintr-un anumit motiv toate imaginile intră la locul lor numai după actualizarea browserului. Te rog spune-mi de ce se întâmplă asta?
Andrey, te rog să adaugi o căutare pe site.
Adauga un comentariu.
