6 CSS trükki sisu vertikaalseks joondamiseks

Räägime CSS-i vertikaalsest joondamisest või täpsemini, kuidas seda teha ei saa. CSS ei ole veel pakkunud ametlikku viisi sisu tsentreerimiseks oma konteinerisse. Probleem on selles, et ilmselt on veebiarendajad kõikjal pettunud. Kuid mitte selle hirmu pärast, hakkame teie poolt juhtima paar trikki, mis võivad teid aidata jäljendama mõju.

Nendel trikkidel võib siiski olla piiranguid ja teil võib tekkida vajadus kasutage rohkem kui ühte trikki illusiooni lõpuleviimiseks. Kui teate mõnda muud trikki, andke meile oma kommentaarides teada.

1. Kasutage absoluutset positsioneerimist

Esimene trikk, mida me siin näeme, kasutab seda positsiooni vara. Sul on kaks

, üks on mahuti, teine on sisu sisaldav lapse element.

Kõigepealt seame konteineri elemendi positsiooni suhtelisele, seejärel seame lapse elemendi positsiooni absoluutne. See võimaldab meil vabalt paigutada selle üle konteineri.

Vertikaalseks joondamiseks liigutage lapse elemendi asend ülalt, pool mahuti kõrgusest ja tõmmake see ülespoole lapseelemendi laiusest. Siin on väljund:

See trikk on täiuslik, kui on ainult üks lapselement, vastasel juhul absoluutne asend mõjutab sama konteineri teist elementi.

2. Kasutage CSS3 teisendust

CSS3 teisendus on teinud sisu keskele lihtsaks. Erinevalt CSS3-st positsiooni ei mõjuta teiste sama konteineri elementide asukohta.

Eeldades, et meil on sama HTML-struktuur nagu eelmisel meetodil - üks vanem, üks lapselement - 50% ülalt ja CSS-i muundamise abil tõlgitakse -50%. Ja seal on see.

Pea meeles, et CSS3 Transforms ei tööta Internet Exploreris 8 ja allpool. Võib-olla sooviksite kasutada mõnda muudest meetoditest siin.

3. Kasutage polsterdamist

Me saame kasutada ka polsterdus luua vertikaalse joonduse illusioon. Selleks seadke lihtsalt ülemine ja alumine polster võrdselt järgmiselt:

See trikk sobib siis, kui te ei määra konteineri fikseeritud laiusega, vaid seadke laius automaatne.

4. Kasutage joone kõrgust

Kui teil on konteineris ainult üks tekstisisese rida, saate teksti vertikaalselt joondada reakõrgus vara. Määra reakõrgus väärtus on sama, mis konteineri kõrgus, ja näete järgmist väljundit.

Pea meeles, et see trikk töötab ainult ühe rea reaga. Kui sisu jaguneb kaheks või enamaks reaks, oleks iga rea vaheline ruum nagu see, mis on määratud reakõrgus, andes meile liiga palju ruumi.

5. Kasutage CSS tabelit

Isiklikult on CSS tabeli kasutamine minu lemmik trikk vertikaalse joondamise rakendamiseks. See toimib vanades brauserites, nagu Internet Explorer 8. See meetod on tehtud konteineri elemendi kuvamise seadistamiseks tabel, kui lapse element kuvatakse kui laua-rakk seejärel kasuta vertikaalne joondamine teksti vertikaalselt keskele.

6. Kasutage Flexboxi

Viimane vertikaalse tsentreerimise meetod on Flexboxi kasutamine. Flexbox on uus moodul CSS3-s. See pakub sisu ühtlustamiseks lihtsamat meetodit. Sisu koondamiseks vertikaalselt flex-boxi, lihtsalt lisage joondamine: keskus; järgmiselt, ja see ongi nii.

Pidage meeles, et Flexbox mõned brauserid toetavad ainult Flexboxi mooduli osalist funktsiooni, nagu Internet Explorer 10, Safari, 6 ja Chrome 27 ja allpool. Seega, sarnaselt CSS3 Transformiga tehtud trikkile, veenduge, et efekt langeb nendes brauserites kenasti.