6 Triki CSS za poravnavo vsebine navpično
Spregovorimo o vertikalni poravnavi v CSS-ju ali natančneje, kako ni izvedljiva. CSS še ni zagotovil uradnega načina za navpično centriranje vsebine znotraj vsebnika. To je težava, ki je verjetno uničevala spletne razvijalce povsod. Ampak ne v strahu, v tem delovnem mestu vas bomo vodili nekaj trikov, ki vam lahko pomagajo posnemajte učinek.
Ti triki imajo lahko omejitve in morda boste morali uporabite več kot en trik za dokončanje iluzije. Če poznate kak drug trik, nam to sporočite v komentarjih.
1. Uporabite absolutno pozicioniranje
Prvi trik, ki ga bomo videli tukaj, uporablja Najprej nastavimo položaj elementa vsebnika na relativni, nato pa nastavimo položaj otroškega elementa na Za poravnavo navpično premaknite položaj otroškega elementa z vrha, za polovico višine posode in ga povlecite za polovico širine otroškega elementa. Tu je izhod: Ta trik je popoln, kadar obstaja samo en otroški element, sicer CSS3 Transform je olajšala postavitev vsebin v središče. CSS3 Transform, za razliko od Ob predpostavki, da imamo isto strukturo HTML kot prejšnja metoda - en starševski, en podrejeni element - Upoštevajte, da CSS3 Transforms ne bo deloval v Internet Explorerju 8 in spodaj. Tukaj boste morda želeli uporabiti katero koli drugo metodo kot nadomestno. Uporabimo lahko tudi Ta trik je primeren, kadar posode ne nastavite v fiksni širini, nastavite širino na Če imate v vsebniku samo eno vrstico besedilne vsebine, lahko besedilo poravnate navpično z uporabo Ne pozabite, da ta trik deluje samo z eno vrstico besedila. Če se vsebina prelomi v dve ali več vrstic, bo presledek med vsako vrstico, kot smo določili v Osebno je uporaba CSS tabele moj najljubši trik za uporabo vertikalne poravnave. Deluje v starih brskalnikih, kot je Internet Explorer 8. Ta metoda se izvede z nastavitvijo prikaza elementa vsebnika na Zadnja metoda za vertikalno centriranje je z uporabo Flexbox. Flexbox je nov modul v CSS3. Ponuja enostavnejšo metodo za usklajevanje vsebine. Če želite vsebino poravnati navpično v polje flex, preprosto dodajte Ne pozabite, da Flexbox nekateri brskalniki podpirajo samo delne funkcije modula Flexbox, kot so Internet Explorer 10, Safari, 6 in Chrome 27 in spodaj. Zato, podobno kot trik s CSS3 Transform, poskrbite, da bo učinek v teh brskalnikih lepo padel.položaj nepremičnine. Dva imata absolutno. To nam omogoča, da ga prosto postavimo po vsebniku. absolutno pozicija vpliva na drugi element v istem vsebniku.2. Uporabite CSS3 Transform
položaj ne vpliva na položaj drugih elementov znotraj istega vsebnika.50% z vrha in z uporabo CSS preoblikovanja daje prevod -50%. In tam ga imate.3. Uporabite Oblazinjenje
oblazinjenje ustvariti iluzijo vertikalne poravnave. V ta namen preprosto nastavite zgornjo in spodnjo podlogo, kot sledi:samodejno.4. Uporabite višino linije
višina vrstice nepremičnine. Nastavite višina vrstice vrednost za približno isto kot višina zabojnika, in videli boste naslednje rezultate.višina vrstice, dajemo preveč praznega prostora.5. Uporabite tabelo CSS
tabela, medtem ko je podrejeni element prikazan kot celica tabele nato uporabite navpično poravnavanje besedilo navpično.6. Uporabite Flexbox
align-items: center; kot sledi, in to je to.
