Hogyan készítsünk div-t az oldal közepén

Div blokkok igazítása a központban (CSS, DIV HTML). – Hab

Div blokkok igazítása a központban (CSS, DIV HTML).

Ebben a cikkben elmondom, hogyan kell elhelyezni a blokkot Div a központban. A sok, de nem minden lehetővé teszi, hogy pontosan mit kell tennie. Egy példát adok a legjobb és egyszerű módszerekre.

Általánosságban elmondható, hogy van egy tucatnyi módszer, hogyan kell igazítani a div blokkot a központban, minden webmaster a kedvenc \ legmegfelelőbb módját használja. De mindazonáltal számos alapvető, legnépszerűbb és univerzális mód van. És természetesen érvényes minden modern szabványra.

És igen, érdemes azt mondani, hogy ezek a módszerek nem működnek az IE6-ban, vagy ilyesmi. Nem is figyelek erre a böngészőre, annak ellenére, hogy hány ember használja. Itt az ideje, hogy újra használják a régi használatát.

Szóval mi van?

1. módszer. A legmenőbb

Nagyon hatékony módszer, amely ugyanezre lehetővé teszi a francia bekezdések alábecsülését. Mi a módszer módszere? Minden egyszerű az őrületnek. Van egy blokk, amelynek egy meghatározott szélessége van (pixelben vagy százalékban), amelyek az automatikus tulajdonság használatával ugyanazt a bemélyedést adjuk meg a jobb és bal oldalon, ennek eredményeként a központban egy DIV-ot kapunk a központban. Az első érték (0 a példa) a fentről és alatti bemélyedés.

Például, felülről írunk az igazításhoz:

A fenti és az alábbiakban való összehangoláshoz:

Véleményem szerint ez a legjobb módja Igazítsa a blokkokat a központban. Tehát teljesen érvényes.

2. módszer. Százalék

Ha a blokk szélessége százalékban van, akkor igazíthatjuk Div a központban Az egyenlő francia bekezdések alkalmazása a teljes szélesség teljes szélességének befejezéséhez. Ki nem értette, megmutatja a példát, könnyebb:

50% -os szélességünk van ahhoz, hogy összehangoljuk a központba, az oldalsó francia bekezdésekre van szükségünk, hogy a jobb és a bal oldali, illetve a bal oldalon 25% -ot tegyenek. Megnézzük a kódot:

Nem feszítés, kapunk egy blokkot a központban, igazítva a banális matematikával (50 + 25 + 25) ��

3. módszer. Vegyes

Ez a módszer azt javasolta a megjegyzésekben SMAN.

Amint említettem a cikk elején, módja annak, hogy igazítsa a blokkot egy hatalmas készlet közepén. Mindenki kopogtatja az egyiket, hogy jobban hasonlít. Várakozás megjegyzésekre és új utakra ��

4. módszer. További blokk használata

A javasolt módszer Győztes Megjegyzések:

Nincs módszer megoldja a problémát a blokk belsejében, ha a blokkszélesség nem ismert (például a menü).

Ilyen esetekben további blokkot használok, amely az összehangolt blokkot csomagolja. A stílus ilyesmi:

Hogyan lehet a középső összehangolás ?

Üdvözlet, kedves barátaim!

Ma egy másik munkahelyet fogunk megvizsgálni, nevezetesen, hogyan kell igazodni a div központjában. Minden egyszerűségével ez a kérdés nemcsak kezdődik egy halott véget, és egyes esetekben még egy tapasztalt webfejlesztő is.

Navigáció a cikken:

Szeretném megmutatni neked többféle módon, hogy igazítsa a div, mind függőlegesen és vízszintesen.

Beigazítása DIV a központban határértéket használunk vízszintesen

Az első, és a leginkább megfelelő, véleményem szerint, az eljárás összehangolása a blokk közepén használata CSS tulajdonságok árrés jelentéssel AUTO.

HTML:

CSS:

.Child-block2 {display: block; / * Készíts egy blokk elem * / margin: auto; / * Az automatikus külső francia * / szélesség%; }

.Child-Block2 { Kijelző: blokk; / * A blokk-elem * / Margin: auto; / * Set automata külső francia * / szélesség%; }

Ez történt:

Igazítás Div központjában

Van néhány funkciója:

1. A Hab tulajdonság csak blokk elemekre működik. Azaz az igazított blokkot kell rendelni Kijelző: blokk; (Általában érdemes az alapértelmezett div blokkot)
2. A Hab tulajdonság nem működik az abszolút pozícionáláshoz (Pozíció: Abszolút) vagy erősítése (Balra lebeg vagy Float: Jobb).

A DIV-ot a központban vízszintesen illeszkedjen a központban

A DIV középpontjában a következő igazítási mód a CSS tulajdonságainak használata Szöveg igazítás jelentéssel Központ. Ez a tulajdonság vízszintes szövegbeállításra szolgál.

Önmagában ez a tulajdonság nem tudja összehangolni a blokkot a központban. De ha megkérdezi a szülőelemre, és a gyermek eleme, hogy egy vonalat készítsen, vagyis hozzárendelje egy tulajdonságot Kijelző jelentéssel Sorban, Ezután igazíthatjuk ezt a blokkot szigorúan a központban.

Ez az opció nem működik abszolút pozícionálással ellátott blokkhoz (Position: absolute;), Vagy ha a blokk van beállítva, hogy megerősítse (Balra lebeg vagy Float: right).

Használati példa:

HTML:

CSS:

.Szülő-block1 {text-align: center; / * Center igazítás * /} .Child-Block1 {szélessége%; Display: inline; / * Készítése egy kisbetűs elem * /}

.Szülő-Block1 { Text-align: center; / * Középre igazítás * / } .Child-Block1 { szélesség%; Display: inline; / * Hogy a kisbetűs elem * / }

Ez az, amit csináltunk:

Igazítása DIV a központban

Igazítása DIV a központban vertical-align függőlegesen

Az első két lehetőség lehetővé teszi számunkra, hogy összehangolják DIV a központban. És hogyan kellene lennie, ha kell igazítani az elem függőleges? Ebben az esetben tudjuk kihasználni az ingatlan vertical-align jelentéssel Középső.

Jellemzők használat:

1. HAB ingatlan csak akkor működik, asztali elemek. Ennek megfelelően, az egy vonalba állított elemnek kell lennie a táblázat cellájában. Vagy kell lennie a szülőblokkban, amelyhez az ingatlant hozzárendelték Kijelző: asztal-cella;, És ez a szülőegységnek az értékkel kell rendelkeznie a blokkban Kijelző: táblázat;

   HTML:

   CSS:

   .Szülő-block3 {kijelző: táblázat; } .Gyermekblokk3 {kijelző: asztali cella; Függőleges igazítás: középső; } .al-gyermek-blokk {szélesség%; }

   .Szülő-blokk3 { Kijelző: táblázat; } .Gyermekblokk3 { Kijelző: asztal-cella; Függőleges igazítás: középső; } .al-gyermekblokk { szélesség%; }

   Eredmény:

   A div való igazítás a középpontban függőleges

2. 2.Abban az esetben, ha az abszolút pozicionálás van megadva az illesztett elem, a div lesz mentén egy vonalban a felső határa az egység:

Abszolút igazítás div a központban

Most, tudva, hogyan kell igazítani Div függőlegesen és vízszintesen, kétféle módon kombinálhatjuk a központ tökéletes helyének igazítását és elérését a központban.

Ennek elérése érdekében meg kell adnunk egy tulajdonságot az egységhez árrés jelentéssel Auto, és rendezze el egy blokkban a CSS tulajdonsággal Kijelző: asztal-cella;, Amint azt az előző verzió mutatja.

HTML:

CSS:

.Szülő-blokk4 {szélesség%; Magasságpx; Kijelző: táblázat; / * A szülő blokk tábla * / Border: 5px szilárd zöld; margin-toppx; } .Gyermekblokk4 {kijelző: asztal-cella; / * Készítsen egy blokkot az asztal * / függőleges-igazítás: középső; / * Megadjuk a függőleges igazítást * / Border: 5PX kék kék; widthpx; Magasságpx; font-sizepx; Szín: #; } .Al-gyermek-blokk1 {widthpx; Magasságpx; Határ: 3px szilárd narancs; Margó: Auto; / * A vízszintes igazítás beállítása * /}

1 2 3 4 5 6 7 nyolc kilenc tíz tizenegy 12 13 tizennégy 15 16 17 tizennyolc 19 húsz 21 22 23 24

.Szülő-blokk4 { szélesség%; Magasságpx; Kijelző: táblázat; / * A szülő blokk táblázata * / Határ: 5PX Szilárd zöld; margin-toppx; } .Gyermekblokk4 { Kijelző: asztal-cella; / * A táblázat blokkjának készítése * / Függőleges igazítás: középső; / * Megadjuk a függőleges igazságot * / Határ: 5px kék; widthpx; Magasságpx; font-sizepx; Szín: #; } .al-gyermek-blokk1 { widthpx; Magasságpx; Határ: 3px szilárd narancs; Margó: Auto; / * Adja meg a vízszintes igazítás * / }

Eredmény:

Abszolút igazítás div a központban

Amint látja, a készülékünk tökéletesen helyezkedik el a központban, függőlegesen és vízszintesen. A mai napig ez az egyetlen módja ennek az eredménynek. Ha tudod, hogy egy másik módja annak, hogy abszolút összehangolást végezzen Div központjában, győződjön meg róla, hogy írjon róla a megjegyzésekben.

Sajnos, nagyon gyakran nincs lehetőség az asztal típusának szülői típusára. Ebben az esetben kihasználhatjuk az ingatlant árrés Ahhoz, hogy összehangolják a blokkot vízszintesen, és elérje a tökéletes helyhez képest függőlegesen a felső és az alsó francia bekezdés százalékos vagy csökkenésével VH.

Ehhez egy DIV blokk elemet kell készítenünk, és megkérdezzük tőle a következő igazságot:

.M-Align-Block {
marginvh auto;
}

Az első értéket a függőleges francia bekezdéssel állítjuk be, azt kísérleti módon kell kiválasztani, és a második meghatározza a vízszintes fűtést.

Mi fog történni:

A DIV-ot a margóhoz közelíti

Remélem, hogy a cikkem segít abban, hogy foglalkozzon a div való összehangolásával a központban, és már nincs semmi problémája. Gondoskodjunk róla, hogy ezt a cikket a könyvjelzők, és ossza meg a szociális hálózatokon a barátokkal.

És ezen a mai napon van. Találkozunk a következő cikkekben!

Őszintén, Julia Hussar

Hogyan kell igazítani a div-t a központban HTML-ben – példák

Korábban a függőleges igazítás módszereit mutatjuk be, most hagyjuk abba a vízszintes.

Szöveg-igazítás: Központ;

CSS tulajdonság Szöveg igazítás Összehangol tartalom címke és értékek

Szöveg-igazítás: Központ; KÖZPONT	Szöveg-igazítás: indokolja; & #; szélességben, amikor a böngésző hozzáadja a szavak közötti réseket, hogy nincsenek-e francia bekezdés. Szöveg-igazítás: indokolja; & #; A szélességben az utóbbi vagy egyetlen karakterlánc igazodik
Szöveg-igazítás: maradt; a bal szélen	Szöveg-igazítás: jobb; A jobb szélen

Ha megadja a text-align: center a beépített elem [elfoglalt csak a szélessége a tartalom], akkor nem történik semmi, mert a tag nem tud mozogni magát: Spantext / Spanttext

Ha a blokk [elfoglalta az összes rendelkezésre álló szélességet], akkor az elem tartalma a központba lép

Divtext / div

szöveg

Egy másik címke tartalmaként is működhet.DIV SPABAND ELEMENT BR / két sorban / span / div

Beépített elem
két sorban

Segített a modális ablak összehangolásakor a CSS: div div Cenate Br / Block elem / div / div

áramvonalas
Blokkelem

De a blokk címke olyan, mint amikor a kijelző: A táblázat nem akar középen, csak a textdiv div vak elem BR / Fix szélessége / div / div

Blokkelem
Állandó szélesség

Margó: 0 Auto;

A Margin Property megoldja a problémát

DIV DIVBLE Element Br / Megadott szélesség / Div / div

Blokkelem
meghatározott szélesség

Ahhoz, hogy igazítsa a képet a központban, regisztrálnia kell, hogy blokk lett, anélkül, hogy megadná a WidThimg SRC = “URL_IZO” /

A szélesség nem számíthat a kijelzőn: táblázat

Br / táblázat / div / div / div / div

blust
asztal

úszó

Az úszó nem számít

Balra lebeg;
Balra dobás

Float: Jobb;
Árvíz a jobb oldalon

A régi böngészők számára egy olyan blokk kiegyenlítéséhez, amely nem rendelkezik rögzített szélességgel, az itt leírt módszert használhatja [Artemy Lebedeva Studio] Hab

Hogyan kell igazítani a blokkot a tartály közepén CSS segítségével

Állandó olvasónk, és WordPress User részmunkaidős, kíváncsi – hogyan kell elhelyezni egy blokkot a tartály vagy oldal közepén? És itt van az önkényes kód, beleértve, de nem kizárólag a szöveges tartalomra. Például, lehet, hogy a szociális kütyü, egy reklám banner, amelyet be kell helyezni a közepén a megadott területen.

Tehát, ha elegendő a CSS-paraméterek megadása a tartály belsejében lévő szöveghez:

Szöveg-igazítás: Központ;

Például a képhez használhatja a CSS-osztályt:

Osztály = “AlignCenter”

amely az alapértelmezett rendszerben van.

Ami az önkényes blokkokat illeti, akkor több lehetőség is lehet. Ezek közül kettő a leghatékonyabb, ha a sablonok forráskódjának szerkesztése.

Központ // Your_bod_block / Center

A “Center” címke használatával szinte bármilyen design elemet igazíthatja a webhelyen. Ezenkívül a hozzárendelt CSS-stílusok kiemelt fontosságú lesz.

Ha a blokk a “div” címkékben vagy hasonlókban van, akkor a külső francia bekezdés CSS paramétert alkalmazhatja. Adja meg azt az aktuális stílushoz vagy a meglévő CSS-osztályhoz:

Margó: 0 Auto;

Ezekkel az értékekkel a “margó” nulla francia bekezdéssel rendelkezik felülről és alulról, és az oldalról egyenértékű. De javasoljuk, hogy befejezzük egy másik attribútumot:

Tiszta: Mindkettő;

És ez a paraméter eltávolítja az összes lehetséges áramlási körbe a jobb és bal oldalán a célba vett egység, így a kijelző az oldalon pontosabb képest más tárgyakat.

Így az oldal közepén lévő bármely blokk elhelyezhető. Ha nincs HTML kód szerkesztése, akkor ha lehetséges, ellenőrizze az érvényességi kódot. És a témakörben felmerült kérdések az alábbiakban észrevételek formájában.

  Oszd meg a barátaiddal:

 Kapcsolatban áll

 RENDBEN

 Facebook

 Twitter

Html & #; Centration Div a szülő közepén Div

Verem túlfolyó oroszul

Betöltés ..

1. 0

2. +0

• Túra

  Indítsa el az oldalt, hogy gyorsan megismerje magát a webhelyen

• referencia

  Részletes válaszokat minden lehetséges kérdésre

• Meta

  Beszélje meg a munka és a helyszíni politika elveit

• Rólunk

  Tudjon meg többet a verem túlcsordulásáról

• Üzleti

  Tudjon meg többet a fejlesztők megtalálásáról vagy a hirdetések megtalálásáról az oldalon