Hogyan kell elhelyezni egy blokkot a központba

Site Search

Hogyan kell igazítani a blokkot DIV az oldal közepén, Középen vízszintesen, csináld különböző CSS tulajdonságokkal, mindezek megnézzük Önt ma.

Illessze Div-t az oldal közepén

Ahhoz, hogy igazítsa a div blokkot az oldal közepén, A legegyszerűbb módja abszolút vagy rögzített pozicionálás és a webhely oldalának határaiból támadnak.
Így néz ki a kódot:

.Központos {pozíció: fix; / * vagy abszolút * / tetején: 50%; Bal: 50%; Szélesség: px; Magasságpx; Háttér: # f0f0f0; }

Megteremtettük a DIR-t Osztályú osztály, Állítsa be a fix pozíciót, állítsa be a szélesség és magasság értékeit, és 50% -kal csökkentse a hely felső és bal szélétől, ezért szinte megkaptuk a kívánt:

Mi Div Blokk szintje az oldal közepén, De képest a bal felső sarokban, illetve meg kell mozgatni a DIV 50% -kal felfelé és balra képest a szélessége és magassága.
Meg fogjuk csinálni a margó tulajdonság negatív értékeit:

.Központos {pozíció: fix; / * vagy abszolút * / tetején: 50%; Bal: 50%; Szélesség: px; Magasságpx; Margó: px 0 0 px; Háttér: # f0f0f0; }

T.Nak nek. Blokkunk rögzített szélességméretű: px; Magasságpx ;, majd 50% -a szélesség és magasság, amit könnyen számolunk és kaptunk: Margó: px 0 0 px;

Most a munkánk eredménye elégedett velünk:

Demo példa & #; div az oldal közepén & #;

Igazítsa a DIV blokkot az oldal közepén, nem ismeri a méretét

Ha Nem ismerjük blokkunk szélességét és magasságát, azután a margó helyett, Te tudod használni Átalakítás: Fordítás (%,%);, Ingatlanváltás: Fordítás (%,%); Megjeleníti a blokkunkat a méretéhez képest, és ezáltal megoldja a feladatunkat ��

Demo Példa 2. szám. & #; DIV Centered Page & #;

Align Div vízszintesen

Gyakran Igazítsa a div blokkot a központban A vízszinteshöz viszonyítva a webhelyet a böngészőablak közepén igazítják.
Tedd nagyon egyszerű, nézd meg magad:

.Wrapper {szélesség%; Magasságpx; Margó: 0 Auto; Háttér: #; }

Minden A Block Div ​​Wrapper összehangolása, az ingatlan használatával történik Margó: 0 Auto;, A legfontosabb dolog az, hogy a szélesség értéke kisebb volt, mint a szülőblokk ��

Demo példa Alignment Block Div ​​Horizontal, A böngészőablak széleihez képest.

Demo Példa & #; Align Div vízszintesen & #;

Ha bármilyen kérdése van, vagy ebben a hozzászólásban, akkor a helyzetet nem írják le a div blokk igazítása. Írjon mindent a hozzászólás megjegyzéseibe, győződjön meg róla, hogy válaszoljon és segítsen ��