6 CSS gudrybės, skirtos vertikaliai suderinti turinį
Pakalbėkime apie vertikalų suderinimą CSS, arba tiksliau, kaip tai neįmanoma. CSS dar nepateikė oficialaus būdo, kaip turinį vertikaliai centruoti savo talpykloje. Tai problema, kuri tikriausiai nusivylė žiniatinklio kūrėjais visur. Bet nebijokite, šiame poste mes ketiname paleisti keletą triukų, kurie gali jums padėti imituoja efektą.
Tačiau šie triukai gali turėti apribojimų ir jums gali tekti naudoti daugiau nei vieną triuką užbaigti iliuziją. Jei žinote bet kokį kitą triuką, praneškite mums savo komentaruose.
1. Naudokite Absoliutus padėties nustatymą
Pirmasis triukas, kurį čia matysime, naudojamas Pirmiausia nustatysime konteinerio elemento padėtį santykiniam, tada nustatysime vaiko elemento padėtį Norėdami jį vertikaliai išlyginti, perkelkite vaiko elemento padėtį iš viršaus, pusę konteinerio aukščio, ir ištraukite jį iki pusės vaiko elemento pločio. Čia yra išvestis: Šis triukas yra puikus, kai yra tik vienas vaiko elementas, kitaip - CSS3 transformacija tapo lengva įdėti turinį į centrą. CSS3 transformacija, skirtingai nei Darant prielaidą, kad turime tą pačią HTML struktūrą, kaip ir ankstesnis metodas - vienas iš tėvų, vienas vaiko elementas - Atminkite, kad „CSS3 Transforms“ neveiks „Internet Explorer 8“ ir žemiau. Galbūt norėsite naudoti bet kurį kitą metodą kaip atsarginį. Taip pat galime naudoti Šis triukas yra tinkamas, kai nenustatote konteinerio fiksuotame plotyje, tiesiog nustatykite plotį Jei talpykloje yra tik viena teksto turinio eilutė, galite vertikaliai lyginti tekstą naudodami Atminkite, kad šis triukas veikia tik su viena teksto eilute. Jei turinys suskirstomas į dvi ar daugiau eilučių, tarpas tarp kiekvienos eilutės būtų toks, kaip nurodyta Asmeniškai CSS lentelės naudojimas yra mano mėgstamiausias triukas vertikaliam lygiavimui. Jis veikia senose naršyklėse, pvz., „Internet Explorer 8“. Šis metodas atliekamas nustatant konteinerio elemento ekraną Paskutinis vertikalios centravimo būdas yra naudojant „Flexbox“. „Flexbox“ yra naujas modulis CSS3. Jis siūlo paprastesnį turinio suderinimo būdą. Jei norite, kad turinys būtų vertikaliai sutelktas į lankstųjį langelį, tiesiog pridėkite Atminkite, kad kai kurios naršyklės „Flexbox“ palaiko tik „Flexbox“ modulio dalines funkcijas, pvz., „Internet Explorer 10“, „Safari“, „6“ ir „Chrome“ 27 ir žemiau. Taigi, panašiai kaip „CSS3 Transform“ triksas, įsitikinkite, kad efektas patenka į šias naršykles.poziciją nuosavybė. Jūs turite du absoliutus. Tai leidžia mums laisvai jį perkelti į konteinerį. absoliutus padėtis turės įtakos kitam to paties konteinerio elementui.2. Naudokite CSS3 Transform
poziciją nuosavybės, neturi įtakos kitų elementų padėčiai toje pačioje talpykloje.50% iš viršaus ir naudojant CSS transformaciją, išverstas -50%. Ir jūs turite ją.3. Naudokite Padding
paminkštinimas sukurti vertikalaus lygiavimo iliuziją. Norėdami tai padaryti, tiesiog nustatykite vienodai viršutinę ir apatinę pagalvėlę:automatinis.4. Naudokite linijos aukštį
linijos aukštis nuosavybė. Nustatyti linijos aukštis vertė yra maždaug tokia pati, kaip ir konteinerio aukštis, ir pamatysite šią išvestį.linijos aukštis, suteikiant mums per daug vietos.5. Naudokite CSS lentelę
lentelė, o vaiko elementas turi būti rodomas kaip stalo langelis tada naudokite vertikaliai lygiuoti vertikaliai įterpti tekstą.6. Naudokite „Flexbox“
derinti elementai: centras; taip ir taip.
