6 CSS triki, lai pielāgotu saturu vertikāli
Runāsim par vertikālo saskaņošanu CSS vai precīzāk, kā tas nav iespējams. CSS vēl nav nodrošinājis oficiālu veidu, kā koncentrēt saturu savā konteinerā. Tā ir problēma, kas, iespējams, visur ir neapmierināta ar tīmekļa izstrādātājiem. Bet ne baidoties, šajā amatā mēs vadīsim jums dažus trikus, kas var jums palīdzēt imitēt efektu.
Tomēr šiem trikiem var būt ierobežojumi, un jums var būt nepieciešams izmantot vairāk nekā vienu triku lai pabeigtu ilūziju. Ja jūs zināt kādu citu triku, dariet mums to zināmu komentāros.
1. Izmantojiet absolūtu pozicionēšanu
Pirmais triks, ko mēs šeit redzēsim, izmanto Vispirms mēs novietosim konteinera elementa pozīciju relatīvajam, tad mēs iestatīsim bērna elementa pozīciju Lai to izlīdzinātu vertikāli, pārvietojiet bērnu elementa pozīciju no augšas uz pusi no konteinera augstuma un pavelciet to uz pusi no bērna elementa platuma. Šeit ir izeja: Šis triks ir ideāls, ja ir tikai viens bērna elements, pretējā gadījumā CSS3 transformācija ir viegli ievietot saturu centrā. CSS3 pārveidot, atšķirībā no Pieņemot, ka mums ir tāda pati HTML struktūra kā iepriekšējā metode - viens vecāks, viens bērna elements - Paturiet prātā, ka CSS3 Transforms nedarbosies Internet Explorer 8 un zemāk. Varat vēlēties izmantot kādu no citām metodēm šeit kā rezerves. Mēs varam izmantot arī Šis triks ir piemērots, ja konteiners nav iestatīts fiksētā platumā, tikai iestatiet platumu uz Ja konteinerā ir tikai viena teksta satura rinda, tekstu var izlīdzināt vertikāli, izmantojot Atcerieties, ka šis triks darbojas tikai ar vienu teksta rindu. Ja saturs sadalās divās vai vairākās rindās, atstarpes starp katru rindu būtu tāds, kā mēs norādījām Personīgi, izmantojot CSS tabulu, ir mana mīļākā triks vertikālās izlīdzināšanas piemērošanai. Tas darbojas vecās pārlūkprogrammās, piemēram, Internet Explorer 8. Šī metode tiek veikta, novietojot konteineru elementa displeju uz Pēdējā metode vertikālajai centrēšanai ir, izmantojot Flexbox. Flexbox ir jauns modulis CSS3. Tā piedāvā vienkāršāku metodi satura saskaņošanai. Lai centrētu saturu vertikāli flex lodziņā, vienkārši pievienojiet Ņemiet vērā, ka dažas pārlūkprogrammas Flexbox atbalsta tikai Flexbox moduļa daļēju funkciju, piemēram, Internet Explorer 10, Safari, 6 un Chrome 27 un zemāk. Tādējādi, līdzīgi triks ar CSS3 Transform, pārliecinieties, ka efekts šajā pārlūkprogrammā ir labi.pozīciju īpašums. Jums ir divi absolūts. Tas ļauj mums brīvi novietot to pāri konteineram. absolūts pozīcija ietekmēs otru elementu tajā pašā konteinerā.2. Izmantojiet CSS3 Transform
pozīciju īpašums, neietekmēs citu elementu stāvokli tajā pašā konteinerā.50% no augšas un izmantojot CSS transformāciju, tiek tulkots -50%. Un tur jums tas ir.3. Izmantojiet polsterējumu
polsterējums radīt vertikālās izlīdzināšanas ilūziju. Lai to izdarītu, vienkārši iestatiet augšējo un apakšējo polsterējumu vienādi:auto.4. Izmantojiet līnijas augstumu
līnijas augstums īpašums. Iestatiet līnijas augstums vērtība ir aptuveni tāda pati kā konteinera augstumam, un jūs redzēsiet šādu izvadi.līnijas augstums, dodot mums pārāk daudz vietas.5. Izmantojiet CSS tabulu
tabula, kamēr bērna elements ir redzams kā galda šūnu pēc tam izmantojiet vertikāli izlīdzināt novietot tekstu vertikāli.6. Izmantojiet Flexbox
izlīdzināšanas vienības: centrs; šādi, un tas ir viss.
