Meniul
AcasăConexiune

Div centrat orizontal. CSS - Aliniere orizontală. Centrați DIV în partea de jos a paginii

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

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: translate(-50%, -50%) -o-transform: translate(-50%, -50%); )

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 )

Browsere care acceptă această soluție:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+

3. Alinierea unui bloc la centrul altuia. În acest caz, al doilea bloc are dimensiuni specificate în procente.

Părinte ( poziție: relativ; ) .copil (poziția: absolut; /* lățime și înălțime a 2 blocuri în % */ înălțime: 50%; lățime: 50%; /* Valorile se determină în funcție de mărimea acestuia în % * / stânga: 25% /* (100% - lățime) / 2 */ sus: 25% /* (100% - înălțime) / 2 */ ;

Browsere care acceptă această soluție:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+
CSS - Aliniere orizontală

1. Aliniați unul element bloc(afișare: bloc) față de celălalt (în care se află) orizontal:

... ...

Blocare ( margine-stânga: automat; margine-dreapta: automat; )

Browsere care acceptă această soluție:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 6.0+
  • Opera 3.5+
  • Safari 1.0+

2. Aliniați un element de linie (afișare: inline) sau de linie (afișare: inline-block) pe orizontală:

... ...

Părinte ( text-align: center; ) .child (afișare: inline-block; )

Browsere care acceptă această soluție:

  • Chrome 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opera 7.0+
  • Safari 1.0+
CSS - Aliniere verticală

1. Centrați un element (display: inline, display: inline-block) față de celălalt (în care se află) în centru. Blocul părinte din acest exemplu are o înălțime fixă, care este setată folosind proprietatea CSS line-height.

... ...

Părinte ( line-height: 500px; ) .child (afișare: inline-block; vertical-align: middle; )

Browsere care acceptă această soluție:

  • Chrome 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opera 7.0+
  • Safari 1.0+

2. Centrarea unui bloc față de altul pe verticală prin reprezentarea părintelui ca tabel, iar copilul ca o celulă a acestui tabel.

Părinte ( display: table; ) .child ( display: table-cell; vertical-align: middle; )

Browsere care acceptă această soluție:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 8.0+
  • Opera 7.5+
  • Safari 1.0+

Dacă mai știi pe alții trucuri interesante sau soluții utile de aliniere gata făcute, apoi împărtășiți-le în comentarii.

Când așezați o pagină, este adesea necesară alinierea Centru CSS-mod: de exemplu, centrați blocul principal. Există mai multe opțiuni pentru a rezolva această problemă, fiecare dintre acestea, mai devreme sau mai târziu, trebuie să fie folosită de orice designer de layout.

Centrare alinierea textului

Adesea, în scopuri decorative, este necesar să setați alinierea textului la centru CSS în acest caz vă permite să reduceți timpul de aspect. Anterior, acest lucru se făcea folosind atribute HTML, dar acum standardul necesită alinierea textului folosind foi de stil. Spre deosebire de blocuri, pentru care trebuie să modificați marginile, în Alinierea CSS Centrarea textului se face folosind o singură linie:

  • text-align:center;

Această proprietate este moștenită și transmisă de la părinte către toți descendenții. Afectează nu numai textul, ci și alte elemente. Pentru a face acest lucru, acestea trebuie să fie inline (de exemplu, span) sau inline-block (orice blocuri care au setată proprietatea display: block). Această din urmă opțiune vă permite, de asemenea, să modificați lățimea și înălțimea elementului și să reglați indentările mai flexibil.

Adesea, pe pagini, alinierea este atribuită etichetei în sine. Acest lucru invalidează imediat codul, deoarece W3C a depreciat atributul align. Utilizarea acestuia pe o pagină nu este recomandată.

Alinierea unui bloc la centru

Dacă trebuie să centrați un div, CSS vă poate oferi destul de mult mod convenabil: utilizare marginile marginea. Indentațiile pot fi setate atât pentru elementele bloc, cât și pentru elementele bloc inline. Valoarea proprietății ar trebui să fie 0 (căptușeală verticală) și automată (căptușeală orizontală automată):

  • margine:0 auto;

Acum această opțiune este recunoscută ca fiind absolut valabilă. Folosirea padding-ului extern vă permite și să setați imaginea să fie centrată: vă permite să rezolvați multe probleme legate de poziționarea unui element pe pagină.

Aliniați un bloc la stânga sau la dreapta

Uneori, alinierea la centru CSS nu este necesară, dar trebuie să plasați două blocuri unul lângă altul: unul pe marginea stângă, celălalt pe dreapta. În acest scop, există o proprietate float, care poate lua una dintre cele trei valori: stânga, dreapta sau niciunul. Să presupunem că aveți două blocuri care trebuie așezate unul lângă altul. Atunci codul va fi astfel:

  • .left (float:left;)
  • .right(float:right)

Dacă există și un al treilea bloc, care ar trebui să fie situat sub primele două blocuri (de exemplu, un subsol), atunci trebuie să i se atribuie proprietatea clear:

  • .left (float:left;)
  • .right(float:right)
  • subsol (clear:both)

Cert este că blocurile cu clasele stânga și dreapta cad din fluxul general, adică toate celelalte elemente ignoră însăși existența elementelor aliniate. Proprietatea clear:both permite subsolului sau oricărui alt bloc să vadă elementele care au căzut din flux și interzice plutirea atât în ​​stânga, cât și în dreapta. Prin urmare, în exemplul nostru, subsolul se va deplasa în jos.

Aliniere verticală

Există cazuri când nu este suficient să setați alinierea la centru folosind metode CSS, de asemenea, trebuie să modificați; pozitie verticala bloc de copii. Orice element în linie sau bloc în linie poate fi apăsat pe marginea de sus sau de jos, situată în mijloc element părinte sau să fie în orice loc. Cel mai adesea, blocul trebuie aliniat la centru pentru aceasta, se folosește atributul vertical-align. Să presupunem că există două blocuri, unul imbricat în celălalt. În acest caz, blocul interior este un element inline-block (afișare: inline-block). Trebuie să aliniați blocul copil pe verticală:

  • aliniere de sus - .child(vertical-align:top);
  • aliniere la centru - .child(vertical-align:middle);
  • aliniere de jos - .child(vertical-align:bottom);

Nici alinierea textului, nici alinierea verticală nu afectează elementele blocului.

Posibile probleme cu blocurile aliniate

Uneori, centrarea unui div folosind CSS poate cauza mici probleme. De exemplu, când folosiți float: să presupunem că există trei blocuri: .first, .second și .third. Al doilea și al treilea bloc se află în primul. Un element cu clasa secundă este aliniat la stânga și ultimul bloc- pe dreapta. După ce s-au echilibrat, ambele au căzut din flux. Dacă elementul părinte nu are un set de înălțime (de exemplu, 30em), atunci nu se va mai întinde la înălțimea blocurilor sale copil. Pentru a evita această eroare, utilizați un „spacer” - un bloc special care vede .second și .third. Cod CSS:

  • .second(float:left)
  • .a treia (float:right)
  • .clearfix(înălțime: 0; clar: ambele;)

Pseudo-clasa:after este adesea folosită, ceea ce vă permite, de asemenea, să returnați blocurile la locul lor prin crearea unui pseudo-spacer (în exemplu, un div cu clasa container se află în interior.first și conține.stânga și.dreapta) :

  • .left(float:left)
  • .right(float:right)
  • .container:după(conținut:""; afișare:tabel; clear:both;)

Opțiunile de mai sus sunt cele mai comune, deși există mai multe variante. Puteți găsi întotdeauna cel mai simplu și mai convenabil mod de a crea un pseudo-distanțier prin experimentare.

O altă problemă pe care o întâmpină adesea designerii de layout este alinierea elementelor în bloc. Un spațiu este adăugat automat după fiecare dintre ele. Proprietatea marjei, care este setată la o liniuță negativă, ajută la rezolvarea acestui lucru. Există și alte metode care sunt folosite mult mai rar: de exemplu, zeroing În acest caz, font-size: 0 este scris în proprietățile elementului părinte. Dacă există text în interiorul blocurilor, atunci în proprietățile elementelor inline-block acesta este deja returnat marimea corecta font. De exemplu, font-size:1em. Această metodă nu este întotdeauna convenabilă, așa că opțiunea cu indentări externe este mult mai des folosită.

Alinierea blocurilor vă permite să creați frumos și pagini funcționale: aceasta include aspectul aspectului general, aranjarea mărfurilor în magazinele online și fotografiile de pe site-ul cărților de vizită.

Î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 o lățime fixă, atunci ar fi rațional să-l aliniem în centrul ferestrei browserului, 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 centrare orizontală. Cea mai populară tehnică este de a centra blocul 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. 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ă, 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.

Aceasta 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, relativ la un alt bloc, pentru acest celălalt 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.

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 tort stratificat. Dacă așa crezi, 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ă vă aranjați stratul divîn centrul site-ului 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 dezavantaje 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 folosiți blocuri elemente div 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 se utilizează anumite valori proprietăți, ele pot fi plasate unul peste altul ca straturi în 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ă;
  • inherit – moștenește valoarea elementului 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 redusă în dimensiune, 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 în care vom plasa elementele rămase. 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 (marja: 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); )


Același exemplu arată cum puteți centra un div pe orizontală. Și dacă editați puțin codul de mai sus, puteți obține aliniere verticală blocuri. 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 proprietăți CSS noi pentru a centra straturile în interiorul unui container:

#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 centrare div interior 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.
Cum se face o legătură dintr-un strat

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 de legătură:

#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%.

Ascunderea și afișarea elementelor de bloc

Elementele bloc oferă mai multe opțiuni pentru extinderea funcționalității interfeței decât moștenirea dispunerea tabelului. 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. Și aici nu puteți scăpa cu alinierea div-ului la 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.


În acest exemplu, locația blocurilor div nu se schimbă în niciun fel. Aici folosim cel mai simplu Funcția JavaScript, modificând valoarea proprietății afișaj css după ce se face clic pe butonul (eveniment onclick).

sintaxa de afișare:
afisare: bloc | în linie | inline-block | inline-table | articol-listă | niciunul | rulare | masa | table-caption | tabel-celula | tabel-coloană-grup | tabel-coloană | tabel-subsol-grup | tabel-antet-grup | masă-rând | tabel-rând-grup

După cum puteți vedea, această proprietate poate lua multe semnificații. Prin urmare, este foarte util și poate fi folosit pentru poziționarea elementelor. Într-unul dintre exemplele anterioare, am folosit una dintre valorile sale (inline-block) pentru a centra un div într-un div.

Pentru a ascunde și afișa stratul, am folosit două valori pentru proprietatea de afișare.

Articolul de astăzi își propune să vă arate cum să centrați un div, atât pe orizontală, cât și pe verticală, folosind câteva trucuri CSS. De asemenea, vă vom spune cum să centrați întreaga pagină sau într-un element div individual.

Centrați cu ușurință un element DIV pe pagină

Această metodă va funcționa perfect în toate browserele.

CSS

Center-div (marja: 0 automat; lățime: 100px; )

Exemplu

Valoare automată în proprietatea marjei setează umplutura din stânga și din dreapta la întregul spațiu disponibil pe pagină. Lucrul important de reținut aici este că elementul div centrat trebuie să aibă setată o valoare a lățimii.

Centrarea unui DIV în interiorul unui element DIV în mod vechi

Această metodă div de aliniere centrală va funcționa în toate browserele.

CSS

Outer-div ( umplutură: 30px; ) .inner-div (marja: 0 automat; lățime: 100px; )

HTML

Exemplu

Div-ul exterior poate fi plasat cum doriți, dar Unitate interioară div trebuie să aibă o lățime (lățime) specificată.

Centrarea unui DIV în interiorul unui element DIV folosind inline-block

În această metodă de centrare a unui div în cadrul unui div, nu este necesar să specificați lățimea elementului interior. Va funcționa în toate browsere moderne, inclusiv IE8.

CSS

Outer-div ( padding: 30px; text-align: center; ) .inner-div ( display: inline-block; padding: 50px; )

HTML

Exemplu

proprietatea text-align funcționează numai pe elementele inline. Valoarea inline-block permite ca div-ul interior să fie afișat ca element inline și, de asemenea, ca bloc (inline-block). Proprietatea text-align pe elementul div exterior ne va permite să centrem div-ul interior.

Centrați un DIV în interiorul unui element DIV orizontal și vertical

Aici, margin: auto este folosit pentru a centra div-ul în centrul paginii. Exemplul va funcționa în toate browserele moderne.

CSS

Outer-div ( umplutură: 30 px; ) . inner-div ( margine: automată; lățime: 100 px; înălțime: 100 px; )

HTML

Exemplu

Elementul div interior trebuie să aibă o lățime (lățime) și o înălțime (înălțime) specificate. Metoda nu va funcționa dacă elementul div exterior are o înălțime fixă.

Centrați DIV în partea de jos a paginii

Aici pentru locații div centrat vertical folosind marginea: poziționare automată și absolută pentru element exterior. Metoda va funcționa în toate browserele moderne.

CSS

Div-exterior (poziție: absolut; jos: 30 px; lățime: 100%; ) .div-interior (marja: 0 automat; lățime: 100 px; înălțime: 100 px; culoare de fundal: #ccc; )

HTML

Exemplu

Div-ul interior trebuie să aibă o lățime setată. Spațiul din partea de jos a paginii este ajustat folosind proprietatea de jos a div-ului exterior. De asemenea, puteți centra un div în partea de sus a paginii, înlocuind proprietatea de jos cu proprietatea de sus.

Centrați DIV-urile pe pagină vertical și orizontal

Aici, pentru a centra div-ul, folosim din nou margin: poziționarea automată și absolută a div-ului exterior. Metoda va funcționa în toate browserele moderne.

CSS

Center-div (poziție: absolut; margine: automat; sus: 0; dreapta: 0; jos: 0; stânga: 0; lățime: 100px; înălțime: 100px; )

Exemplu

Elementul div trebuie să aibă o lățime (lățime) și o înălțime (înălțime).

Realizarea de centrare adaptivă a unui element DIV pe pagină

Aici pentru alinierea div in centru folosind CSS Facem ca lățimea elementului div să fie adaptabilă, astfel încât să reacționeze la modificările dimensiunii ferestrei. Această metodă funcționează în toate browserele.

CSS

Center-div (marja: 0 automat; lățime maximă: 700px; )

Exemplu

Un element div centrat trebuie să aibă proprietatea de lățime maximă setată.

Centrarea unui DIV în interiorul unui element folosind proprietățile blocului interior

Elementul interior div aici este receptiv. Această metodă de centrare a unui div în interiorul unui div va funcționa în toate browserele.

CSS

Div-exterioară (padding: 30px; ) .inner-div (marja: 0 automat; lățime maximă: 700px; )

HTML

Exemplu

Div-ul interior trebuie să aibă proprietatea de lățime maximă setată.

Centrarea a două div-uri receptive una lângă alta

Aici avem două elemente div receptive una lângă alta. Această metodă de a plasa un div în centrul ecranului va funcționa în toate browserele moderne.

CSS

Container ( text-align: center; ) .left-div ( display: inline-block; max-width: 300px; vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) ecran și (lățime maximă: 600 px) ( .left-div, .right-div ( lățime maximă stânga: 100%; ) )

HTML

Exemplu

Aici avem mai multe elemente cu proprietatea inline-block aplicată, situate în interiorul unui container centrat. Acest exemplu folosește și interogări media CSS; adică, dacă dimensiunea ecranului este mai mică de 600 de pixeli, atunci proprietatea max-width atât pentru div-ul din stânga cât și din dreapta este setată la 100%.

Element DIV centrat folosind Flexbox

Aici avem CSS div centrat folosind Flexbox. Este destinat să faciliteze procesul de dezvoltare a designului interfețe cu utilizatorul. Acest modul este acceptat de Chrome 38+, IE11, Microsoft Edge, Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+, precum și Android Browser 40+.

CSS

Container ( display: flex; align-items: center; justify-content: center; înălțime: 100vh; ) .item (culoare fundal: #f3f2ef; chenar-radius: 3px; lățime: 200px; înălțime: 100px; )