Központosító eszközzel css blokk

Az elrendezés a weboldalak meglehetősen gyakori feladat központosító blokkokat. Ez lehet mind függőleges, mind vízszintes központosító.

Például, ha egy oldalon van egy fix szélességű, akkor ésszerű, hogy összehangolják a közepén a böngésző ablakot, mivel könnyebb olvasni a szöveget (különösen, ha a kijelző elég nagy). Egyes tervek általában feltételezik a blokk hely a közepén a böngésző ablakot, azaz mind a függőleges és vízszintes központosító.

Először is beszéljünk a vízszintes központosító. A legnépszerűbb módszer az, amikor az egység középre telepíti a bal és a jobb margó méretét az „auto”. Tegyük fel, hogy szeretnénk, hogy összehangolja a blokk id = „container” width 860px. Ebben az esetben meg kell írni a CSS fájlban:

#container background-color: #EEE;
szélesség: 860px;
margin: 0px auto;
>

Azonban N.E. régebbi verziói (5,0 pl) nem illeszkednek a blokk közepén. Természetesen ezek az ősi böngészők senki nem használja (1800 my day látogatók - csupán 1), de csak abban az esetben, jobb csinálni, és ott dolgozott :)

Ehhez a szülő elem, azaz amelyen belül középre a blokk (általában a szülő elem a BODY tag), a paraméter text-align: center. Ebben az esetben a blokk rendezi a központban, azonban, és annak teljes tartalmát is összhangban vannak a központban, és mi nem kell. Ezért a készülékben az alapértelmezett beállítás - text-align: left.

#container background-color: #EEE;
szélesség: 860px;
margin: 0px auto;
text-align: left;
>

Van még egy módja a vízszintes vonalvezetés egység, amely a helymeghatározás. Mint azt bizonyára tudják, alapértelmezés szerint minden blokk szintű elem van nyomva a bal szélén a szülő elem. Ezért annak érdekében, hogy az összhangban legyen a központ szükségességét:

1. Állítsa abszolút helymeghatározó egység

2. Mozgás jobbra 50% -a szélessége a böngésző ablakot

3. A negatív behúzva, hogy kiszorítsa azt a balra egy felével egyenlő távolság az egység szélessége.

Így az egység lesz a közepén. A jobb áttekinthetőség érdekében lásd klip alatt:

CSS kód, például:

Meg kell jegyezni, hogy ha azt akarjuk, hogy helyezze a készüléket nem relatív a böngésző ablakot, és például a másikhoz képest egység, a másik a készüléket úgy kell beállítani position: relative;

Tegyük fel, hogy blokk #container, szeretné összehangolni a központ belül fekszik, #wrap blokk. Ezután a kód a következő:

Most nézzük meg azt az esetet, ha azt szeretné, hogy összehangolják a blokk az oldal közepére, azaz a alkalmazni mind vízszintes, mind függőleges középre. Itt megint, mi vonatkozik elhelyezése. Így kell:

1. Állítsa abszolút helymeghatározó egység

2. Mozgás jobbra 50% -kal lefelé 50%. ezzel megvalósítják azt a bal felső sarokban a böngésző ablak közepén.

3. A negatív behúzás elmozdulva felfelé egyenlő távolság fele magassága a blokk, és balra a felével egyenlő távolság a blokk szélessége.

Így a készülék lesz a központja a weboldal.

Tegyük fel, hogy a magassága 600px blokk. is, és 860 px széles. Ezután a CSS kódot az alábbiak lesznek:

#container background-color: # 559964;
pozíció: abszolút;
top: 50%;
bal: 50%;
margin-top: -300px;
margin-left: -430px;
magasság: 600px;
szélesség: 860px;
>

Remélem, megérti magát az elvet.

Kérdése van? Válaszokat kaphat Fórum Ügyfélszolgálat

Én leszek az első, aki úgy nézett ki leckét.

Eh. Második =) nemrég találkozott ezzel a problémával IE, haláltusa sokáig)) Köszönöm =)

Köszönjük oldalt könyvjelzőként)))

Köszönöm szépen. Andrew, az új órákat!

Csak köszönöm, azt hiszem, nem az, amit hozzá itt))

Köszönöm a leckét, csak egy pár napja taoe megpróbált egy kicsit kemény, és ideiglenesen felfüggeszthető

És van egy probléma: a helyszínen Mozille Firefox nem akarja összehangolni, ragadt a bal oldalon, és minden, a fentiek egyike sem nem segít (és azonos Opera).

és miért nem működik? - „Ha azt szeretnénk, hogy helyezze a készüléket nem relatív a böngésző ablakot, és például kapcsolatban egy másik blokk másik blokk ehhez meg kell állítania position: relative;”

Köszönöm szépen !! egyszerűen GIANT köszönöm! Isten áldjon!

minden rendben van. de valamilyen oknál fogva az összes képet kap a helyen csak a böngésző frissítése. Kérem, mondja meg, miért történik ez?

Andrew, kérjük, adja hozzá a webhelyen belüli keresés.