Centrarea CSS a blocurilor DIV: orizontală și verticală. Alinierea orizontală și verticală a elementelor

24.06.2019 Windows 7, XP

În procesul de aspect al paginii 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 atunci când blocul este centrat prin setarea dimensiunilor din dreapta și din stânga marja 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 element 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:stânga .

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ție: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. se aplică simultan orizontal şi centrare verticală. 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ă, mutaț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.

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, relativ la 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.

În CSS, unele lucruri aparent simple nu sunt atât de ușor de făcut. Unul dintre aceste lucruri este alinierea, adică. când un element trebuie poziționat într-un anumit mod față de altul.

Acest articol prezintă câteva soluții gata făcute, care va ajuta la simplificarea muncii de centrare a elementelor pe orizontală și/sau verticală.

Notă: Sub fiecare soluție este o listă de browsere care indică versiunile în care funcționează codul CSS specificat.

CSS - Center Align Block

1. Alinierea unui bloc la centrul altuia. În acest caz, primul și al doilea bloc au dimensiuni dinamice.

...

Părinte ( poziție: relativ; ) .copil ( poziție: absolut; stânga: 50%; sus: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50% , -50%); -ms-transform (-50%, -50%);

Chrome 4.0+
Firefox 3.6+
Internet Explorer 9+
Opera 10.5+
Safari 3.1+

2. Alinierea unui bloc la centrul altuia. În acest caz, al doilea bloc are dimensiuni fixe.

Părinte (poziție: relativă; ) .copil (poziția: absolut; stânga: 50%; sus: 50%; /* lățime și înălțime a 2 blocuri */ lățime: 500px; înălțime: 250px; /* Valorile sunt determinate în funcție de pe dimensiunea sa */ /* margin-left = - lățime / 2 */ margin-left: -250px /* margin-top = - înălțime / 2 */ margin-top: -125px )