Hogyan készítsünk DIV CSS központot

Cascading CSS stílusú asztalok Tippek és kap

Lásd még a munka minden technikájának mutatóját.

Központosítás

Általános CSS funkció – Szövegközpontú vagy kép. Tény, hogy háromféle központosító létezik:

A legújabb CSS implementációkban a 3. szint (CSS3) képességeket is használhatja, lehetővé téve, hogy az abszolút elhelyezett elemek összhangban álljanak a központban:

Központosítási vonal

A leggyakoribb és (mert) a legegyszerűbb központosítási típus a bekezdésben vagy a fejlécben szereplő szövegsorok központosítása. Ehhez a CSS rendelkezik az ingatlan “szöveg-igazítással”:

P {Text-Align: Center} H2 {Text-Align: Center}

Amely az egyes karakterláncokat a P. vagy H2 fejlécben mutatja be a középpontban a mezők között:

Ebben a bekezdésben szereplő valamennyi sor összhangban áll a bekezdések központjában. Ez a CSS szöveg-igazításának értékének értéke miatt lehetséges.

Központi blokk vagy kép

Néha nem szükséges a szöveg középpontja, de az egység egésze. Vagy más módon: a jobb és a bal oldali mezőket ugyanazok lehetnek. Ehhez telepítse az “Auto” mezőt. Ezt általában rögzített szélességű blokkokhoz használják, mert ha a blokk maga rugalmas, akkor egyszerűen az egész rendelkezésre álló szélességet veszi igénybe. Itt van egy példa:

Habext {margó-bal: auto; Margin-Right: Auto; Szélesség: 6em} p osztály = “BlockText” Ez a szép

Ez a meglehetősen keskeny szövegblokk középpontjában áll. Ne feledje, hogy a blokk belsejében lévő vonalak nem középpontba kerülnek (balra vannak igazítva), ellentétben az előző példával.

Ez a módszer a kép középpontjára is használható: Helyezze el a saját blokkjába, és alkalmazza a mezők tulajdonságait. Például:

Habyed {kijelző: blokk; margó-balra: Auto; Margó jobb: AUTO} IMG osztály = “Megjelenik az SRC =” “” alt = “”

A következő kép középpontjában áll:

Függőleges központosítás

A CSS 2. szintje nem rendelkezik a függőleges központosítással. Valószínű, hogy megjelenik a CSS 3. verziójában (lásd. lent). De még CSS2, akkor középre tömb függőlegesen a kombináció több tulajdonságait. A trükk azt jelzi, hogy a külső egységet táblázatként kell formázni, t.Nak nek. Az asztal táblázatának tartalma függőlegesen illeszkedik a központba.

Az alábbi példa bemutatja a bekezdés központosítását a blokk belsejében, amely bizonyos meghatározott magassággal rendelkezik. Egy külön példa egy olyan bekezdés látható, amely függőlegesen a böngészőablakban van, mert a blokk belsejében van, teljesen elhelyezve és az ablak magasságában.

Habner {min-magasság: 10em; Kijelző: asztal-cella; Függőleges-igazítás: középső} div osztály = “konténer” pattot kis bekezdés / div

Ez a kis bekezdés függőlegesen központosított.

Függőleges központosítás a CSS 3. szintjében

A 3. szint A CSS egyéb szolgáltatásokat kínál. A cikk (év) írásakor a függőleges blokk-összehangolás jó módja az abszolút pozícionálás nélkül (amely a szöveg részleges átfedéséhez vezethet) még mindig megvitatásra kerül. De ha tudod, hogy a szöveg részleges átfedése nem jelent problémát a dokumentumban, akkor a “Transform” tulajdonságot használhatja a teljes pozícionált elem középpontjában. Például:

Ez a bekezdés függőlegesen illeszkedik a központban.

Egy olyan dokumentum esetében, amely így néz ki:

Div osztály = konténer3> p> Ez a bekezdés … / div>

A stílus asztal így néz ki:

Habner3 {magasság: 10em; Pozíció: Relatív } / * 1 * / habner3 p {margó: 0; Pozíció: abszolút; / * 2 * / Top: 50%; / * 3 * / Átalakítás: Fordítás (0,%) } / * 4 * /

Alapvető szabályok:

Készítsen egy tartályt a pozícionált (pozíció: relatív), amely egy tartályba kapcsolja, teljesen elhelyezett elemek.
Maga az elem teljesen elhelyezhető (pozíció: abszolút).
Helyezze az elemet a tartály közepére “TOP: 50%”. (Ne feledje, hogy az “50% “itt a tartály magasságának 50% -át jelenti.)
Használja a Fordítást, hogy mozgassa a saját magasságának felét. (‘50% ‘a “fordítás (0,%)” jelölje maga az elem magasságát.)

A közelmúltban egy új technika elérhetővé vált a CSS számos implementációjában. Ez a “Flex” új kulcsszóra épül az ingatlan “kijelzőjén”. Ez a kulcsszó a grafikus felhasználói felület (GUI) használatára szolgál, de semmi sem akadályozza meg, hogy használja a dokumentumban, ha ez a dokumentum megfelelő szerkezettel rendelkezik.

Ez a bekezdés függőlegesen igazodik a központba.

A stílus asztal így néz ki:

Habner5 {magasság: 10em; Kijelző: Flex; Align-Tételek: Center } Habner5 p {margó: 0}

Függőleges és vízszintes központosítás a CSS 3. szintjében

Mindkét módszert vízszintesen és függőlegesen bővíthetjük egyidejűleg.

A mellékhatása az abszolút helymeghatározás a bekezdés, hogy a bekezdés lesz pontosan olyan széles, amilyennek lennie kell (ha csak mi egyértelműen nem adja meg a szélesség). Az alábbi példában csak ezt szeretnénk: a bekezdés központjában helyezzük el egy szót (“központból!”), Így a bekezdés szélességének megegyezik a szó szélességével.

A sárga háttér egyértelműen megmutatja, hogy a bekezdés valóban ugyanolyan szélessége, mint a tartalma. Úgy értjük, hogy a jelölés ugyanaz:

Div osztály = konténer4> p> központ! / Div>

A függőleges központosítás tervében ez a stílusok hasonlóak az előző példához tartozó táblázathoz. De most még mindig mozog az elem felénél a tartály a „Bal: 50%” szabály és egyúttal azt áthelyezhetjük a bal fele saját szélessége átállítása „Fordítás”:

Habner4 {magasság: 10em; Pozíció: relatív} Habner4 p {margó: 0; Háttér: sárga; Pozíció: abszolút; Top: 50%; Bal: 50%, margó-jobb:%; Átalakítás: Fordítás (%, %)}}

A következő példa megmagyarázza, hogy miért a “Margin-Right:%” szabálya.

Amikor a CSS Formatter támogatja a “FLEX” -t, minden könnyebbé válik:

Ezzel a stíluslapot:

Habner6 {magasság: 10em; Kijelző: FLEX; Align-tételek: Központ; Indokolás-tartalom: Központ } Habner6 p {margó: 0}

T.E. Az egyetlen adagolás “indoklás-tartalom: Központ”. Hasonlóképpen, mint “Align-Demences” meghatározza a tartály tartalmának függőleges összehangolását, az “igazolás-tartalom” ugyanúgy határozza meg a horizontális igazítást. (Tény, hogy minden némileg bonyolultabb, a nevükből, de egy egyszerű esetben pontosan működik.). A “Flex” tulajdonság használatának mellékhatása az, hogy gyermekelem, esetünkben P, automatikusan a lehető legkisebb lesz.

Központosítás a megtekintési területen a CSS 3. szintjében

Az alapértelmezett tartály teljesen elhelyezett elemekhez a megtekintési terület. (A böngésző esetében ez egy böngészőablak). Így a megtekintési területen lévő elem központosítása nem okoz összetettséget. A következő egy teljes példa. (Ebben a példában a HTML5 szintaxist használjuk.)

HTML> Stílus> Body {háttér: fehér} szakasz {háttér: fekete; Fehér szín; Border-RADIUS: 1EM; Padding: 1em; Pozíció: Abszolút; Top: 50%, Bal: 50%, Margó jobb:%; átalakítás: Fordítás (%,%) } / Stílus> Szekció> H1> gyönyörűen igazítva a központba / h1> p> Ez a szövegblokk függőlegesen van a központban. P> és vízszintesen, ha az ablak elég széles. / Szekció>

Az eredményt külön dokumentumban láthatja.

A “margó jobb:%” szabály szükséges a “Bal: 50%” kompenzálásához. A “bal” szabály csökkenti az elemek 50% szélességét. Ezért a vizualizátor megpróbálja a tartály szélességének legfeljebb felét,. Annak megadása, hogy az elem megfelelő mezője ugyanolyan nagyságú, megjegyezzük, hogy a vonal maximális hossza ismét megegyezik a tartály szélességével.

Próbálja meg megváltoztatni az ablakméretet: látni fogja, hogy minden ajánlat egy sorban van, amikor az ablak elég széles. Csak akkor, ha az ablak túl keskeny a teljes kínálathoz, ez az ajánlat több sorra oszlik. Ha törli a “Margin-Right:%” szabályt, és változtassa meg újra az ablakméretet, észre fogja venni, hogy a javaslatok már megtörtek, bár az ablak még mindig szélesebb, mint a szöveg sorai kétszer.

(A „Fordítás” -nak központosító a megtekintési terület első ajánlat „Charlie” válaszul a Veremtúlcsordulás honlapján.)