6 CSS trükkök a tartalom függőleges beállításához
Beszéljünk a CSS függőleges illesztéséről, vagy pontosabban arról, hogy ez nem lehetséges. A CSS még nem adott hivatalos módszert a tartalom függőleges központosítására a tartályában. Probléma, hogy valószínűleg csalódott webfejlesztők vannak mindenhol. De ne félj, ebben a hozzászólásban néhány trükköt fogunk futtatni, amelyek segíthetnek utánozza a hatást.
Ezeknek a trükköknek azonban lehetnek korlátai, és lehet, hogy kell használjon egynél több trükköt az illúzió befejezéséhez. Ha bármilyen más trükköt ismer, tudassa velünk a megjegyzéseket.
1. Használja az Abszolút pozicionálást
Az első trükk, amit itt fogunk látni, az Először a konténerelem helyzetét viszonylagra állítjuk be, majd a gyermekelem helyzetét állítjuk A függőleges beállításhoz mozgassa a gyermekelem helyzetét a felső részről, a tartály magasságának felével, és húzza felfelé a gyermekelem szélességének felével. Itt van a kimenet: Ez a trükk tökéletes, ha csak egyetlen gyermekelem van, különben a CSS3 átalakítás megkönnyítette a tartalmak középpontba állítását. CSS3 Transform, ellentétben a Feltételezve, hogy ugyanazt a HTML struktúrát használjuk, mint az előző módszer - egy szülő, egy gyermekelem - Ne feledje azonban, hogy a CSS3 Transforms nem fog működni az Internet Explorer 8 alatt és az alatt. Előfordulhat, hogy más módszereket használhat itt. Azt is használhatjuk Ez a trükk akkor alkalmas, ha nem állítja be a tartályt fix szélességben, csak állítsa be a szélességet Ha csak egy sor szöveges tartalommal rendelkezik egy tartályon belül, akkor a szöveget függőlegesen igazíthatja a Ne feledje, hogy ez a trükk csak egyetlen szöveges sorral működik. Ha a tartalom két vagy több sorba ütközik, az egyes sorok közötti hely olyan lenne, mint ahogyan azt a Személy szerint a CSS táblázat használata a kedvenc trükk a vertikális igazítás alkalmazásához. Ez olyan régi böngészőkben működik, mint az Internet Explorer 8. Ez a módszer a konténerelem kijelzésének beállítására szolgál A függőleges központosítás utolsó módja a Flexbox használata. A Flexbox egy új modul a CSS3-ban. Egyszerűbb módszert kínál a tartalom összehangolására. A tartalom függőleges elhelyezéséhez flex boxban egyszerűen hozzá kell adni Ne feledje, hogy a Flexbox egyes böngészők csak a Flexbox modul részleges funkcióit támogatják, például az Internet Explorer 10, a Safari, a 6 és a Chrome 27 és az alábbiakat. Ezért, hasonlóan a CSS3 Transform trükkjéhez, győződjön meg róla, hogy a hatás jól esik e böngészőben.pozíció ingatlan. Két abszolút. Ez lehetővé teszi, hogy szabadon helyezzük el a tartályon. abszolút pozíciója befolyásolja a másik elemet ugyanabban a tartályban.2. Használja a CSS3 átalakítást
pozíció nem befolyásolja az ugyanazon tartályon belüli egyéb elemek helyzetét.50% a tetejéről és a CSS-transzformáció használatával fordítja le -50%. És ott van.3. Használja a Padding-et
párnázás a vertikális igazítás illúziójának létrehozása. Ehhez egyszerűen a felső és az alsó párnázatot egyformán állítsa be a következőképpen:kocsi.4. Használja a vonalmagasságot
line-height ingatlan. Állítsa be a line-height értéke megegyezik a tartály magasságával, és a következő kimenet jelenik meg.line-height, túl sok helyet adva nekünk.5. Használja a CSS táblázatot
asztal, míg a gyermek eleme megjelenik táblázat-sejt majd használja a vertical-align a függvény függőleges középre állítása.6. Használja a Flexboxot
illesztési elemek: központ; az alábbiak szerint, és ez az.
