Teksti voidaan lisätä helposti minne tahansa, mutta ilman tasausta se voi näyttää esittämättömältä ja vähemmän houkuttelevalta. Tasaamaton teksti voi myös häiritä verkkosivun koko ulkoasua. Tällaisten asioiden ratkaisemiseksi verkkosovelluksissa voimme käyttää hyödyllisiä CSS-ominaisuuksia, jotka auttavat sinua kohdistamaan tekstit hetkessä.
Tämä artikkeli näyttää, kuinka tekstiä tasataan pystysuoraan CSS:ssä.
Kuinka kohdistaa teksti pystysuunnassa CSS:ssä?
CSS:ssä voit käyttää alla olevia ominaisuuksia tekstin tasaamiseen pystysuunnassa:
-
- rivin korkeus omaisuutta
- Näytä ja kohdista kohteiden ominaisuudet
Käydään nyt läpi jokainen menetelmä yksitellen!
Tapa 1: Käytä rivinkorkeusominaisuutta tekstin tasaamiseen pystysuunnassa CSS:ssä
' viivankorkeus ”-ominaisuus määrittää alueen sisäisten elementtien alapuolella ja ylöspäin. Se määrittää tekstin etäisyyden muihin kohteisiin. Rivinkorkeus-ominaisuuden avulla teksti voidaan tasata helposti pystysuoraan keskelle.
Esimerkki
Tässä on teksti laatikon (reunuksen) sisällä, joka sijaitsee tällä hetkellä vasemmassa yläkulmassa. Tasataan tämä teksti keskelle pysty- ja vaakasuunnassa:
Siirrytään nyt seuraavaan menetelmään. ' Flexbox ” on yksiulotteinen asettelu, jonka avulla voit muotoilla HTML:ää. Voit myös käyttää sitä kohdistamaan kohteita pysty- tai vaakasuoraan. Otetaan siis esimerkki ja tasataan teksti pystysuoraan flexboxin avulla. Esimerkki Ensinnäkin teemme säiliöstämme joustavan asettamalla arvon ' näyttö ' omaisuutta nimellä ' flex ”. Käytä seuraavaksi ' kohdista-kohteet ”-ominaisuus, jolla sisältö asetetaan keskelle pystysuoraan. Lisäksi, jos haluat kohdistaa sisällön keskelle vaakasuunnassa, ' perustele-sisältö ” omaisuutta käytetään: CSS:ssä tekstiä voidaan helposti tasata pystysuunnassa ' viivankorkeus ” omaisuutta. Voit myös käyttää ' flexbox ' tekstin pystysuuntaamiseen ' näyttö ' ja ' kohdista-kohteet ” ominaisuuksia. Flexbox on yksiulotteinen asettelu, ja sitä käytetään yksinkertaisesti kohteiden pysty- tai vaakasuuntaukseen. Tämä viesti tarjosi kaksi helpointa tapaa, jotka voivat auttaa sinua kohdistamaan tekstin pystysuoraan CSS:ssä.
Voit tehdä tämän lisäämällä säilön '
Paras koulutussivusto !
div >
Laatikko muodostetaan käyttämällä ' 3px 'raja ja' 250 pikseliä 'korkeus. ' Fonttikoko 'omaisuutta käytetään arvolla ' 24px ', jotta fontti tulee näkyviin. Määritämme div:n ' viivankorkeus '/' 250 pikseliä ' tekstin tasaamiseksi pystysuoraan keskelle. Seuraavaksi käytämme ' tekstin tasaus ” -ominaisuutta tasataksesi tekstin keskelle:
rivin korkeus: 250 kuvapistettä;
tekstin tasaus: keskellä;
fonttikoko: 24px;
korkeus: 250px;
reunus: 3px kiinteä;
}
Kuten näet, teksti on tasattu pystysuoraan keskelle rivinkorkeuden avulla ja vaakasuoraan keskelle tekstin tasausominaisuuden avulla. Tapa 2: Käytä näyttö- ja tasauskohteita tekstin tasaamiseen pystysuunnassa CSS:ssä
näyttö: flex ;
kohdista kohteet: keskellä;
perustella-sisältö: keskus;
fonttikoko: 24px;
korkeus: 200px;
reunus: 3px kiinteä;
}
Määritetty teksti on tasattu keskelle onnistuneesti:
Olemme tarjonneet menetelmiä tekstin tasaamiseen pystysuoraan CSS:ssä. Johtopäätös