Központosított css-ben
Központosítás a CSS-ben: Teljes útmutató
A CSS-re vonatkozó panaszok legelterjedtebb elemei a központosító elemek. "Miért ne lehetne egyszerűbb?" - Mindenki felháborodik, hogy nem lusta. Azt hiszem, a probléma nem az, hogy nehéz megtenni, hanem az elemek központosításának módszerei olyan sokak, hogy nehéz kiválasztani a megfelelőt.
Építsünk egy faalapú rendszert a döntéshozatalhoz, és reméljük, hogy ez egyszerűen leegyszerűsíti a dolgokat.
Vízszintes központosítás
Vonalelemek (szövegek, linkek), inline display type. inline-block. inline-table. inline-flex. a szülőblokkon belül a következőképpen lehet központosítani:
A blokk elem központosíthatja az érték automatikus beállítását a margó-bal és a jobb oldali margó (és egy adott szélesség beállítására is, különben a szülő tartály teljes szélességét elfoglalja, és nem kell központosítani). Ehhez gyakran rövidített rekordot használnak:
A módszer a központosított blokk elem és a szülő szélességétől függetlenül működik. Vegye figyelembe, hogy az elemet nem kényszerítheti az úszás középpontjában.
Több blokk elem. sorba helyezve. amelyet vízszintesen kell központosítani. Lehet, hogy módosítania kell a megjelenítési típust. Meg kell adnia az inline-blokk leképezés típusát, vagy alkalmaznia kell a flexbox-ot:
Ugyanabban az esetben, ha több blokk elem van elhelyezve egymás fölé, tökéletesen működik az automatikus beillesztésekkel.
Függőlegesen középre
A CSS függőleges központosításával minden valamivel bonyolultabb:
A sor egy sorba kerül:
Néha a vonalas / szöveges elemek függőlegesen központosíthatók, mivel ugyanazok a felső és alsó margók (kitöltés).
Ha a mezők használata valamilyen okból lehetetlen, és a következő sorra nem kell pontosan áthelyezni a szöveget, akkor használhatja a trükket az elem magasságával megegyező vonalmagasság beállításával, ez a szöveg középpontjába kerül:
Több szövegsor középpontja ugyanazokkal a felső és alsó mezők beállításával végezhető el, de ha ez a lehetőség nem működik, akkor az elemet, amelyben a szöveget elhelyezik, a táblázat cella - szó szerint vagy egyszerűen a CSS-ben utánozni. A központosításhoz a függőleges igazítás tulajdonság ebben az esetben van. Annak ellenére, hogy általában a sorban lévő vízszintes elemeket igazítja.
Ha egy utánzatotábla történik, akkor érdemes használni a flexboxot. Az egyik gyermek flex elem könnyen be lehet központosítani a flex szülő.
Ne feledje, hogy ez a módszer csak akkor alkalmas, ha a szülő tartálynak meghatározott szélessége (px,%, stb.) Van, ezért a tartálynak magassága van.
Ha mindkét módszer nem működik, használhatja a "szellem elem" módszert, amelyben egy maximális magasságú pszeudoelemet helyeznek el a tartályba, és a szöveg vízszintesen igazodik ehhez az elemhez:
A blokk elem rögzített magasságú.
Általában amikor egy weboldalra kerül, a magasság sok okból nem ismert: ha az elemek szélessége megváltozik, a szöveges újraelosztás megváltoztathatja a magasságot. A szöveg stílusváltozása megváltoztathatja a magasságot. A szöveg mennyiségének megváltoztatása megváltoztathatja az elem magasságát. A rögzített képarányú elemek, például a képek, a méretezéskor módosíthatják a magasságot stb.
De ha ismeri a magasságot, a függőleges központosítás így megy végbe:
Blokkelem nem rögzített magassággal
Középpontba állíthatja, felemelve felét a magasságának, miután félig lefelé mozgatta:
Mindez sokkal könnyebbé tehető a flexbox segítségével.
Mind vízszintesen, mind függőlegesen
A fent leírt technikák kombinálhatók, ha tökéletesen központosított elemeket szeretnél kapni. De tapasztalatom szerint általában három lehetőség van:
Állandó magasságú és szélességű elem.
Az 50% / 50% -os abszolút pozícionálás után az elemek magasságának és szélességének 50% -át meg nem haladó negatív értékek használatát regisztrálták, mert a szülőben lévő elem középpontba kerül. Ezenkívül a böngészők jól támogatják a módszert:
Elem változatlan magassággal és szélességgel.
Ha nem ismeri a szélességet vagy a magasságot, akkor a transzformáció tulajdonságát és a lefordítás negatív értékét mindkét irányban 50% -ra (az elem aktuális szélességétől / magasságától számítva) centráláshoz használhatja:
A flexbox használatával mindkét irányba középre kell helyezni két központosító tulajdonságot:
