Tämä opas esittelee vaaka- ja pystysuuntauksen CSS:n avulla.
Kuinka kohdistaa vaaka- ja pystysuoraan CSS:n avulla?
Kehittäjät käyttävät 'vaaka- ja pystysuoraa' kohdistusta järjestääkseen ja sijoittaakseen web-sivun elementtejä organisoidummin. Niistä voi olla hyötyä elementtien ja sisällön kohdistamisessa, painikkeiden tai kuvakkeiden sijoittamisessa jne. Seuraa alla olevia esimerkkejä ymmärtääksesi paremmin:
Vaakasuora kohdistaminen
CSS:ssä text-align-ominaisuutta käytetään tekstin tasaamiseen vaakasuunnassa pääelementin sisällä. Tutustu alla oleviin koodinpätkiin ymmärtääksesi paremmin:
< kehon >
< div luokkaa = 'tili' >
< div luokkaa = 'LeftAlign' > Linuxhint on Left Align < / div >
< div luokkaa = 'centerAlign' > Linuxhint on Center Align < / div >
< div luokkaa = 'oikeaAlign' > Linuxhint on Right Align < / div >
< / div >
< / kehon >
Yllä olevassa koodinpätkässä:
- Ensinnäkin vanhempi' div ' -elementtiä käytetään luokkaattribuutin kanssa, jonka arvo on ' tili ”.
- Seuraavaksi on luotu kolme alielementtiä ja jokaiselle div-määritteelle on määritetty luokkaattribuutti.
- Lopulta luokille annetaan arvot 'leftAlign', 'centerAlign' ja 'rightAlign'.
Lisää nyt seuraavat CSS-ominaisuudet '
.leftAlign {
näyttö : inline-lohko ;
leveys : 30 % ;
pehmuste : 20px ;
taustaväri : metsänvihreä ;
tekstin tasaus : vasemmalle ;
}
.centerAlign {
näyttö : inline-lohko ;
leveys : 30 % ;
taustaväri : punainen ;
pehmuste : 20px ;
tekstin tasaus : keskusta ;
}
.rightAlign {
näyttö : inline-lohko ;
leveys : 30 % ;
taustaväri : sinivihreä ;
pehmuste : 20px ;
tekstin tasaus : oikein ;
}
>
Yllä olevassa koodilohkossa:
- Ensin kaikki kolme luokkaa valitaan erikseen, ja sitten käytetään CSS-ominaisuuksia ' näyttö ”, “ leveys ”, “ taustaväri ' ja ' pehmuste ' heille. Näitä ominaisuuksia käytetään parantamaan visualisointitarkoituksia.
- Seuraavaksi arvot ' vasemmalle ”, “ keskusta ' ja ' oikein ' toimitetaan ' tekstin tasaus ' omaisuutta ' vasemmalleAlign ”, “ centerAlign ”, ja ” rightAlign ”luokat.
Kääntämisen jälkeen HTML-elementit näyttävät tältä:
Yllä oleva selaimen tilannekuva osoittaa, että elementit on kohdistettu vaakasuoraan vasemmalle, keskelle ja oikealle.
Pystysuuntainen kohdistus
CSS' pystytasaus '-ominaisuus kohdistaa valitun elementin ' y-akseli ' pääelementissään. Vertical-align-ominaisuuden mahdolliset arvot ovat ' perusviiva ”, “ sub ”, “ super ”, “ alkuun ”, “ teksti-top ”, “ keskellä ”, “ pohja ”, ja ” teksti-ala ”. Kuitenkin kehittäjät käyttävät enimmäkseen 'ylä', 'keski' ja 'alhainen' arvoja luodessaan web-sivuja. Tasaa valittu HTML-elementti yläasentoon käymällä alla olevassa koodinpätkässä:
< div luokkaa = 'Kreivi' >< img src = 'hiunsplash.jpg' leveys = '200px' korkeus = '200px' >
< jänneväli luokkaa = 'captionTopAlign' > Tämä teksti on tasattu ylös pystysuunnassa kuvan vieressä < / jänneväli >
< / div >
Yllä olevassa koodinpätkässä:
- Luo ensin vanhempi ' div ' -elementti ja määritä arvo ' Kreivi ' kohtaan ' luokkaa ”-attribuutti.
- Käytä yläsäilön sisällä '
' -tunnisteen ja anna kuvan polku arvoksi ' src ”-attribuutti.
- Anna lisäksi arvo ' 200 pikseliä ' molemmille ' leveys ' ja ' korkeus '-attribuutit '
' -tunniste.
- Käytä seuraavaksi ' ' -tunniste ja anna sille luokka ' captionTopAlign ”. Lopuksi anna sille valetiedot.
Lisää nyt CSS-ominaisuudet HTML-elementtien tyyliin:
.Kreivi {leveys : sopiva sisältö ;
näyttö : lohko ;
marginaali vasen : 100 pikseliä ;
pehmuste : 10px ;
rajaa : 2px kiinteä punainen ;
}
.captionTopAlign {
pystysuora
Yllä olevassa koodilohkossa:
- Valitse ensin vanhempi ' Kreivi '-luokkaan ja anna arvot 'fit-content', 'block', '100px', '10px' ja '2px solid red' CSS:ään ' leveys ”, “ näyttö ”, “ marginaali vasen ”, “ pehmuste ' ja ' rajaa ” ominaisuuksia. Näitä ominaisuuksia käytetään pääelementin tyyliin.
- Valitse seuraavaksi ' captionTopAlign luokka ja anna arvo alkuun 'CSS:ään' pystytasaus ” omaisuutta. Tämä saa HTML-elementin kohdakkain yläasentoon.
Yllä olevien koodirivien suorittamisen jälkeen verkkosivu näyttää tältä:
Yllä oleva tilannekuva näyttää, että valittu HTML-elementti on nyt tasattu yläreunaan. Samalla tavalla elementti voidaan kohdistaa keskelle, pohjalle jne.
Johtopäätös
Vaaka- ja pystysuuntausta varten ' tekstin tasaus ' ja ' pystytasaus ” CSS-ominaisuuksia hyödynnetään vastaavasti. 'text-align' -ominaisuus sallii arvon ' vasemmalle ”, “ oikein ”, “ keskusta ' ja ' perustella ”. Toisaalta mahdolliset arvot 'pystysuoraan kohdistuvalle' ominaisuudelle ovat ' perusviiva ”, “ sub ”, “ super ”, “ alkuun ”, “ teksti-top ”, “ keskellä ”, “ pohja ”, ja ” teksti-ala ”. Vaaka- ja pystysuuntainen kohdistus auttaa luomaan siistejä ja ammattimaisia verkkomalleja.