Helyezzen egy blokkot a CSS oldal közepére

Igazítás a CSS-központban

Gyakran a VELOCKER kell elhelyezni egy elemet az oldal közepén. Első pillantásra ez a feladat egyszerű, de a gyakorlatban lehetséges nehézségek, amelyek különböző módon javíthatók. Mindegyikük előnyei és hátrányai vannak. Tegyük fel, hogy egy blokkot kell elhelyezni egy képet a központban.

Negatív francia bekezdés

A felső és bal oldali ingatlanegységre vonatkozunk, amelyet 50% -kal mutatunk be. Ehhez a módszerhez meg kell ismerni a blokk méretét előre, amelynek fele a negatív nyugdíjba vonulás értéke.
Tegyük fel, hogy html van.

A CSS ebben az esetben lesz a következő.

Automatikus francia bekezdés

Ez a módszer az előzőre hasonlít. De itt kell beállítani az attribútumok felső, jobb, alsó és balra 0-ra, és állítsa be az automatikus incidencia értékét. A módszer hatalmas előnye – a szülőelem munkacsavarjainak jelenléte. De a módszer hiánya megegyezik az előzővel – annak szükségessége, hogy mereven beállítsa a blokk méretét.
A kód a következő.

asztal

Ebben a kódban több elemet kell kiválasztani: szülő, szülői cella és blokk. Az elsőnek be kell állítania a táblázatos kijelzőt, a második az asztal asztala, és a blokk a vonalblokk modelljét hozzárendeli.
A sejt (elemet a belső osztály) rendelheti paraméterek text-align: center és vertical-align: Közel. A módszer hátránya – A görgetősávok nem működnek, és valójában az illesztési táblázat emulációja rossz hangzásnak számít a webfejlesztők körében.
Példa kód használata ezzel a módszerrel.

Hogyan kell igazítani a szöveget a központban?

A szöveg beillesztéséhez a középértékhez szöveg-igazítási tulajdonságot kell rendelnie.
Mintacsám.

Univerzális igazítási mód a központban

Tegyük fel, hogy összehangolnunk kell a középpontban lévő gombot a CSS-ben. Ehhez meg kell hoznia div-t, amelynek középpontjában olyan gomb található, amelyet középen fogunk tenni, majd a FLEX kijelzőn. A kód körülbelül azonos lesz (a kód leírása).

Ily módon a weblapon feltétlenül bármilyen elemet igazíthatja: űrlapok, szövegek, képek, menük, függőlegesen és vízszintesen. Logikai Univerzális: Szülői div-t hoznak létre, amelyben a szükséges elem leányvállalatként van betöltve. A szülő díva, a kijelző tulajdonságok írnak: Flex, Align-elemek: Center igazolhatja tartalom: Center, Magasság:%. A szélesség, a francia bekezdés és más tulajdonságok a lányában vannak előírva.
Az út egyetlen hátránya – csak a böngészők legújabb verziói támogatják. Egyes tulajdonságok meg lehet valósítani az eladóval előtagokat (például -WebKit-), hogy növelje kompatibilitás régi verziók.

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

Központosítás

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:

• Függőleges szintezés a 3. szintben
• Függőleges összehangolás és vízszintes szint
• A 3. szintben lévő megtekintési terület kiegyenlítése

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-nek van egy ingatlan & #; szöveg-align & #;:

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 lehetővé tette a & # központ értékének köszönhetően; CSS & # tulajdonságok; szöveg-Align & #;.

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ítsen mezőket a & #; Auto & #;. 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:

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:

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

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

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.

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 & #;, hogy a teljes pozícionált elemet a központban. Például:

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

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

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

Alapvető szabályok:

1. Készítsen egy tartályt a pozícionált (pozíció: relatív), amely egy tartályba kapcsolja, teljesen elhelyezett elemek.
2. Maga az elem teljesen elhelyezhető (pozíció: abszolút).
3. Helyezze az elemet a tartály közepére a & #; Top: 50% & #;. (Ne feledje, hogy & # 50% & #; itt van a tartály magassága 50% -a.)
4. Használja a Fordítást, hogy mozgassa a saját magasságának felét. (& # 50% & #; in & #; fordítás (0,%) és #.)

A közelmúltban egy új technika elérhetővé vált a CSS számos implementációjában. Ez egy új kulcsszón alapul: & #; flex & #; Az ingatlanhoz & #; kijelzőn & #;. Ez a kulcsszó felhasználásra szánt grafikus felhasználói felület (GUI), de semmi sem akadályozza meg annak használatát a dokumentumban, ha ez a dokumentum a megfelelő struktúra.

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

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

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 azt szeretnénk, hogy ez: a bekezdés központjában egy szóból (“Központ!“) Tehát 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:

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ályt a & #; Bal: 50% & #; És ugyanakkor azt áthelyezhetjük a bal fele saját szélessége konvertáló & #; & # Fordítás ;:

A következő példa megmagyarázza, hogy miért szükséges a szabály, & #; margó jobb:% & #;.

Amikor a CSS támogatja a & #; flex & #;, minden könnyebbé válik:

Ezzel a stíluslapot:

T.E. Az egyetlen kiegészítés az IS & #; Indokolás-tartalom: Center & #;. Hasonlóképpen, as & #; Align-Dements & #; Meghatározza a tartalom tartalmának függőleges összehangolását, & # #; indokolása-tartalom & #; ugyanúgy határozza meg a vízszintes illesztést. (Tény, hogy minden némileg bonyolultabb, a nevükből, de egy egyszerű esetben pontosan működik.). A & # flex & # tulajdonságok alkalmazása mellékhatása; Ez az, hogy egy gyermekelem, a mi esetünkben, 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.)

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

Szabályozás & # margó-jobb:% & #; a kompenzációhoz szükséges, balra: 50% & #;. Szabály & # bal & #; Csökkenti az elemek 50% -os 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 szabályt & #; margó jobb:% & #; és ismét megváltoztatja az ablak méretét, é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.

(Használja a Tulajdonságok & #; Fordítás & #; A megtekintési terület középpontjában először javasolta “Charlie” Válaszul a verem túlcsordulására.)

Oldalnavigáció

Alkotó 5 lehet;
Frissítve WUE november 5

Az elemek összehangolása a CSS-ben és # központjában; Ez az egyik legnépszerűbb oka. A CSS panaszkodása. Miért olyan nehéz minden? & #; Felháborodnak. Úgy tűnik számomra, hogy a probléma nem, hogy nehéz megtenni, de abban a tényben, hogy sokféle módon kell összehangolni az elemeket a központban, és meglehetősen nehéz választani őket.

Építsük meg az összes lehetséges megoldást egy fa-rendszer formájában, és reméljük, hogy ez egyszerűsíti feladatainkat.

Szóval, kiegyenlítenie kell a központ elemét.

Vízszintes igazítás

Igazítás a string vagy a karakterlánc középpontjában

Igazítsa a központba A szülőelem blokkjában lévő karakterláncok meglehetősen egyszerűek lehetnek:

Lásd a Toll Centering inline elemeit Chris Coyier (@chriscoyier) a Codepen-en.

Ez inline, inline blokk, inline asztal, inline-flex, és t. D.

Igazítás a blokkelem közepén

A blokk elemet a központba telepítheti. Beállíthatja az automatikus érték margó-bal oldali és margó jobb tulajdonságait (szintén be kell állítani, különben az elem egyszerűen a tartalom teljes szélességét veszi igénybe, és nem lesz igazításra van szükség). Leggyakrabban a rövidített ingatlan használatával történik:

Lásd a Pen Centering egyetlen blokkszintű elemét Chris Coyier (@chriscoyier) a Codepen-en.

Önállóan fog működni attól, hogy melyik szélességet telepítette a blokk elemen vagy a szülőjén.

Kérjük, vegye figyelembe, hogy ilyen módon nem tudja megragadni a központba igazított elemet. Ehhez azonban van egy trükk.

Igazítás több blokk elem közepén

Ha két vagy több blokkelem van, hogy vízszintesen kiegyenlítse a központban ugyanabban a sorban, akkor jobban módosíthatja a kijelző típusát. Az alábbiakban egy példa az inline-blokk és a flexbox segítségével történő megjelenítés típusának megváltoztatására:

Lásd a Pen Centering sor blokkjait Chris Coyier (@chriscoyier) a Codepen.

Ha ezek a több blokk különböző vonalakon található, akkor az automatikus nyugdíjazásokkal rendelkező készülékek még mindig szépek:

Lásd a tollközpontú blokkokat egymás tetején Chris Coyier (@chriscoyier) a Codepen-en.

Függőleges igazítás

A CSS központjában lévő függőleges igazítás egy kicsit bonyolultabb.

Igazítás a string vagy a karakterlánc középpontjában

Egy elem összehangolása egy karakterlánccal

Néha string / szöveges elemek lehet igazítani a központban egyszerűen azért, mert ugyanazt az értéket a padding-top és padding-bottom tulajdonságokkal .

Lásd a Pen Centering szöveget (Kinda) a Padding by Chris Coyier (@chriscoyier) a Codepen.

Ha valamilyen okból Padding & #; Ez nem egy lehetőség, és megpróbálja összehangolni néhány szöveget a központban, és pontosan tudja, hogy nem fog megcsípni valami mást, vagyis van egy kis trükk, amelynek lényege a vonalmagasság megteremtése egyenlő az elem magasságához.

Nézze meg a toll középpontját a Codepen Chris Coyier (@chriscoyier) vonal magasságával.

Többsoros elem összehangolása

Ugyanezek a francia bekezdések felülről és alulról hozhatók létre a középpontba és a többsoros elemekhez, de ha nem működik, lehetséges, hogy az a elem, amelyben a szöveg található az asztal, vagy Ez a viselkedés kifejezetten a CSS használatával történik. Ebben a tulajdonságban a függőleges-összehangolási folyamatok ezzel ellentétben azzal a ténnyel, hogy általában a karakterláncon belüli elemek összehangolását feldolgozza.

Lásd a Pen Centering szöveget (Kinda) a Padding by Chris Coyier (@chriscoyier) a Codepen.

Ha ez hasonlít az asztalhoz, előfordulhat, hogy flexboxot használhat ? A különálló flex elem könnyen elhelyezhető a flex tartály belsejében.

Lásd a Toll Vertical Center többsoros szövegvonalát Chris Coyier (@chriscoyier) a Codepen-en.

Ne feledje, hogy ez valójában releváns, ha a tartály rögzített magassággal rendelkezik (px,%, és mások), ezért van itt a tartály.

Ha mindkét fenti technikát nem lehet alkalmazni, akkor használhatja olyan kísérteties elem technikáját, amelyben a 8-as magasságú pszeudo-elemet a tartályba helyezzük és azok, amelyek függőlegesen vannak kialakítva.

Lásd a tollat ​​Ghost Centering többsoros szövegét Chris Coyier (@chriscoyier) a Codepen-en.

Igazítás a blokkelem közepén

Igazítási elem ismert magassággal

Gyakran nem tudhatjuk a magasságot, sok okból: Ha a szélesség változások, a szöveg formázható és megváltoztathatja a magasságot. A különböző szöveges stilizáció megváltoztathatja a magasságot. A különböző betűméret megváltoztathatja a magasságot. Elemek rögzített képarányú, például képekkel, megváltoztathatják a magasságot, amikor megváltoztatják saját méretüket és t.D.

De ha ismeri az elem magasságát, akkor a központban igazíthatja:

Lásd a Pen Center blokkja a Codepen Chris Coyier (@chriscoyier) fix magasságát.

Igazítási elem ismeretlen magassággal

Még akkor is, ha nem ismeri az elem magasságát, még mindig lehetséges, hogy a szülő 50% -os magassága és a saját magasságának 50% -ára emelkedjen:

Lásd a Pen Center Block ismeretlen magasságát Chris Coyier (@chriscoyier) a Codepen.

Igazítási elem flexbox segítségével

Egy kis meglepetés, nagyon könnyű lehet a flexbox segítségével.

Lásd a Pen Center blokkot ismeretlen magassággal Chris Coyier (@chriscoyier) a Codepen-en.

Vízszintes és függőleges igazítás

A fenti technikákat kombinálhatja, hogy tökéletesen összehangolt elemeket kapjon. De általában 4 csoportra oszthatók:

Igazítási elem rögzített szélességgel és magassággal

A negatív francia bekezdések (maring) e szélesség és magasság felét használata az elem abszolút pozicionálása után 50% / 50% Igazítsa a központ elemét. Ez a módszer meglehetősen jó böngésző támogatással rendelkezik:

Lásd a Pen Center Block fix magassággal és szélességével Chris Coyier (@chriscoyier) a Codepen-en.

Igazítási elem ismeretlen szélességgel és magassággal

Ha nem ismeri az elem szélességét vagy magasságát, használhatja az átalakítási tulajdonságot és a negatív 50% -ot mindkét irányban (az elem aktuális szélességétől / magasságától függően) a központhoz:

Lásd Chris Coyier (@chriscoyier) tollközpont blokkját a Codepen-en.

Igazítási elem flexbox segítségével

A középső elem illeszkedéséhez a Flexbox segítségével két központosító tulajdonságot kell használnia:

Lásd a Pen Center Block flexbox segítségével Chris Coyier (@chriscoyier) a Codepen-en.

Elemi igazítás a CSS-rács használatával

Ez csak egy kis trükk (küldött Lance Janssen), amely többnyire egy elemnél dolgozik:

Nézze meg a tollközpontot a Codepen Chris Coyier (@chriscoyier) rácsával.

Kimenet

Most már mindannyian befogadhatja a CSS központjában.