blocuri de nivelare div centrat (css, html div)

blocuri de nivelare div centrat (css, html div)

In acest articol voi discuta despre cum să pună div în mijloc. Există mai multe moduri, dar nu toate fac posibilă de a face exact ceea ce este necesar. Eu dau un exemplu de cel mai bun și cel mai simplu mod.

În general, există zeci de moduri de modul în care să se alinieze în mod corespunzător blocul div în centru, fiecare webmaster foloseste tau preferat \ cel mai convenabil mod. Cu toate acestea, există unele de bază, cele mai populare și versatil modul. Și, bineînțeles, aceleași coduri pentru toate standardele moderne.

Și da, este necesar să spunem, la o dată că aceste metode nu pot lucra în IE6, sau ceva de genul asta. Nu am acordat nici o atenție la acest browser, în ciuda faptului, cât de mulți oameni îl utilizează. Este timpul să dezvăța de a utiliza articole second-hand.

Deci, ce avem?

1. O metodă de cea mai abruptă

O metodă foarte eficientă, care, de altfel, de asemenea, vă permite să aliniați marginile din partea de sus și de jos. Care este caracteristica metodei? Este simplu la nebunie. Avem un bloc cu o anumită lățime (în pixeli sau procente), care cu proprietatea «auto» Asking aceeași liniuță din dreapta și la stânga, în cele din urmă obține un div-bloc în centru. Prima valoare (0 în exemplu) - un spațiu de deasupra și dedesubt.

De exemplu, pentru a alinia scrie sus:

Pentru a alinia partea de sus și de jos:

În opinia mea - acest lucru este cel mai bun mod de a alinia blocuri în mijloc. In afara de aceasta este complet valabil.

Metoda 2 Interes

Dacă unitatea are o lățime în procente, putem alinia div centrat aplicarea padding egală pentru a termina întreaga lățime de până la 100%. Oricine nu înțelege, arată exemplul, este mai ușor:

Avem 50% din lățimea blocului, pentru a-l alinia la centru, avem nevoie pentru a face marginile laterale de 25% la dreapta și la stânga, respectiv. Bucurându-se de cod:

Fără strecurat, se obține un bloc în centru, căptușită matematică banale (50 + 25 + 25) :)

Metoda 3. Mixt

Metoda 4 Utilizarea casetei complementare

Nici metoda nu rezolvă problema cu plutitorul în interiorul blocului când lățimea blocului este, cu siguranță nu este cunoscut (de exemplu, meniuri).

In astfel de cazuri, eu folosesc unitate suplimentară care obvorachivaet nivelare bloc. Stil ca aceasta: