CSS:ssä vertikaalinen tasaus -ominaisuus ohjaa rivitason elementtien tai taulukon solujen pystysuuntaista tasausta niiden sisältävässä elementissä. Se koskee elementtejä, jotka ovat osa tekstiriviä tai näytetään rivin sisäisinä lohkoina tai taulukkosoluina.
Vertical-align-ominaisuutta käytetään yleisesti tekstirivin sisäisille elementeille, kuten kuville, tekstille tai rivin sisäisille lohkoelementeille. Se ei koske suoraan lohkotason elementtejä; Voit kuitenkin kohdistaa ne pystysuoraan käyttämällä tekniikoita, kuten flexboxia tai asemointia.
Syntaksi:
Tässä on pystysuuntaisen tasausominaisuuden perussyntaksi:
selector { vertical-align: value; } 'Arvo' voi olla jokin seuraavista vaihtoehdoista:
| Perustaso: | Tasaa elementin perusviivan sen pääelementin perusviivaan. Tämä on useimpien elementtien oletusarvo.
| Sub: | Tasaa elementin perusviivan pääelementin kirjasimen alaindeksin perusviivan kanssa.
| Super: | Tasaa elementin perusviivan pääelementin kirjasimen yläindeksin perusviivan kanssa.
| Yläosa: | Kohdista elementin yläreuna viivalaatikon sisällä olevan viivan korkeimman elementin yläosaan.
| Teksti alkuun: | Tasaa elementin yläosan pääelementin fontin yläosan kanssa.
| Keskimmäinen: | Keskittää elementin pystysuoraan suhteessa pääelementtiin.
| Pohja: | Kohdista elementin alareuna rivilaatikon sisällä olevan rivin alimman elementin alaosaan.
| Teksti alareunassa: | Kohdista elementin alareuna pääelementin fontin alaosaan.
| Prosenttiosuus: | Elementti on kohdistettu pystysuunnassa tiettyyn prosenttiosuuteen viivan korkeudesta. Esimerkiksi pystytasaus: 50 % keskittää elementin pystysuunnassa pääelementin sisällä.
HUOMAA: Muista, että 'pystysuoralla tasoituksella' on erityinen toimintansa riippuen elementtityypistä ja kontekstista, jossa sitä käytetään, joten sen vaikutukset eivät välttämättä aina ole yksinkertaisia. Se on erityisen hyödyllinen kohdistettaessa tekstin sisäisiä elementtejä tekstiin tai muihin tekstiin.
Esimerkkejä
Tässä on joitain lisätietoja ja esimerkkejä, jotka liittyvät CSS:n 'vertical-align' -ominaisuuteen:
1. Perustason kohdistus:
Perustaso Muu teksti
2. Ala- ja yläindeksi:
| Pystysuuntaus: | Alaarvo kohdistaa elementin perusviivan emoelementin kirjasimen alaindeksin perusviivan kanssa, jolloin se näkyy alaindeksinä. Toisaalta,
| pystytasaus: | Super kohdistaa elementin perusviivan pääelementin kirjasimen yläindeksin perusviivan kanssa.
H2O on vesi. x2+ ja2= r2
3. Tasaus ylä- ja alareunassa:
| Pystysuuntaus: | Ylin arvo kohdistaa elementin yläosan rivilaatikossa olevan rivin korkeimman elementin yläosaan. Samalla lailla,
| pystytasaus: | Pohja kohdistaa elementin pohjan rivilaatikon sisällä olevan rivin alimman elementin alaosaan.
Ylös tasoitettu Alas tasattu
4. Keskitasaus:
| Pystysuuntaus: | Keskiarvo keskittää elementin pystysuoraan suhteessa pääelementtiin. Tätä käytetään usein kuvakkeiden tai kuvien keskittämiseen tekstissä.
Tämä kuvake on pystysuorassa keskellä 
5. Tekstin ylä- ja alareunatasaus:
| Pystysuuntaus: | Text-top-arvo kohdistaa elementin yläosan pääelementin fontin yläosaan ja
| pystytasaus: | Text-bottom kohdistaa elementin alaosan pääelementin fontin alaosaan.
Teksti yläreunaan tasattu Teksti alas tasattu
eteenpäin ketjuttaminen
6. Prosenttitasaus:
Prosenttiarvon käyttäminen pystytasauksen kanssa mahdollistaa elementin tasaamisen pystysuunnassa tietyllä viivan korkeusprosentilla. Esimerkiksi pystytasaus: 50 % keskittää elementin puoleen rivin korkeudesta.
Keskitetty pystysuunnassa
7. Lohkotason elementtien pystysuuntainen keskitys:
Voit keskittää lohkotason elementin pystysuoraan sen ylätason sisään käyttämällä flexbox- tai ruudukkoasettelua.
Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ } 8. Pystysuuntainen keskitys tuntemattomalla elementin korkeudella:
Jos et tiedä pystysuunnassa keskitettävän elementin korkeutta, voit käyttää sijainnin ja muunnoksen yhdistelmää:
html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 9. Pystysuuntainen keskitys monirivisellä tekstillä:
Keskittääksesi monirivisen tekstin pystysuoraan säilöön, voit käyttää flexboxin ja pseudoelementin yhdistelmää:
html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } 10. Kuvien pystysuuntainen keskitys säilössä eri kuvasuhteilla:
Jos sinulla on eri kuvasuhteisia kuvia, jotka haluat keskittää säilöön, voit käyttää flexboxin ja objektin sovituksen yhdistelmää:
HTML:
<img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2">
CSS:
.parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; } 11. Pystytasauksen yhdistäminen viivan korkeuteen:
Voit yhdistää pystysuuntaisen tasausominaisuuden rivinkorkeusominaisuuteen saadaksesi tarkemman pystysuuntaisen tasauksen, erityisesti suuremmilla kirjasinkooilla.
.element { font-size: 24px; line-height: 1.5; vertical-align: middle; } 12. Näyttöominaisuuden käyttäminen kohdistukseen:
Vaikka pystytasaus toimii ensisijaisesti rivitason elementtien kanssa, voit muuttaa näyttöominaisuutta saavuttaaksesi lohkotason elementtien pystytason tietyissä yhteyksissä.
.container { display: table-cell; vertical-align: middle; } 13. Pystysuuntainen kohdistus taulukoissa:
Pystysuuntaista ominaisuutta käytetään usein taulukon soluissa (
) ohjaamaan sisällön kohdistusta solujen sisällä. | concat java-merkkijono
td { vertical-align: middle; } 14. Inline-Block Elements kohdistus:
Pystytasauksen avulla voit tasata tekstirivin sisäisiä lohkoelementtejä, esimerkiksi kuvakkeita tekstin viereen.
<span>⭐</span> Star Rating .icon { vertical-align: middle; font-size: 24px; } Nämä ovat vain muutamia esimerkkejä pystysuoran kohdistuksen käsittelystä eri skenaarioissa. Tietyistä asetteluistasi ja vaatimuksistasi riippuen saatat joutua mukauttamaan tai yhdistämään näitä tekniikoita haluttujen tulosten saavuttamiseksi. CSS tarjoaa erilaisia työkaluja pystysuoran kohdistuksen käsittelemiseen tehokkaasti eri yhteyksissä.
Muista, että vaikka pystysuoraan tasausominaisuuteen on käyttöä, kaikille tasausskenaarioille on olemassa kattavampia ratkaisuja, erityisesti lohkotason elementtejä. Monimutkaisempia asetteluja ja kohdistusvaatimuksia varten on suositeltavaa tutkia nykyaikaisia CSS-asettelutekniikoita, kuten Flexbox, CSS Grid tai jopa CSS-sijaintiarvot (kuten absoluuttiset ja suhteelliset), jotta halutut tulokset saavutetaan tehokkaammin ja ennustettavammin.
Muista, että 'pystytasaus' vaikuttaa vain rivitason elementteihin tai taulukon soluihin. Käytä tekniikoita, kuten flexboxia, ruudukkoasettelua tai sijoittelua lohkotason elementtien kohdistamiseen pystysuunnassa.
Muutama esimerkki lisää
table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3> Testaa nyt Lähtö
Nyt on toinen esimerkki, jossa kohdistamme tekstin kuvan kanssa.
Esimerkki
div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment. Testaa nyt Lähtö
Vertical Alignin edut CSS:ssä
| Helppo käyttää upotettuihin elementteihin: | Pystytasausominaisuus on suoraviivainen elementtien, kuten kuvien, kuvakkeiden tai tekstin, tasaamiseen tekstirivin tai muiden elementtien sisällä.
| Laajaselaimen tuki: | Pystysuoraan kohdistuvalla ominaisuudella on hyvä selaintuki, ja sitä tuetaan laajasti eri selaimissa.
| Useita kohdistusvaihtoehtoja: | Se tarjoaa erilaisia kohdistusvaihtoehtoja, kuten perusviivan, keskiviivan, yläreunan, alaosan, tekstin yläosan, tekstin alaosan, alaindeksin ja yläindeksin, mikä antaa kehittäjille joustavuutta kohdistaa elementtejä vaatimustensa mukaan.
| Responsiivinen kohdistus: | Sitä voidaan käyttää reagoivassa suunnittelussa pystysuoran kohdistuksen mukauttamiseen säiliön koon tai käytettävissä olevan tilan perusteella.
| Inline-elementtien yksinkertaisuus: | Pystytasausominaisuus tarjoaa suhteellisen yksinkertaisen ratkaisun pienten elementtien, kuten kuvakkeiden tai kuvien, tasaamiseen tekstirivin sisällä ilman monimutkaisia asettelutekniikoita.
| Hienosäätö: | Ominaisuus mahdollistaa elementtien pystysuoran sijainnin hienosäädön, mikä voi olla hyödyllistä tiettyjen suunnittelutavoitteiden saavuttamisessa.
| Johdonmukaisuus taulukon solujen kanssa: | Taulukoiden yhteydessä pystytasausominaisuus ohjaa sisällön tasausta taulukon soluissa. Tämä voi auttaa säilyttämään johdonmukaisuuden taulukkopohjaisten asettelujen välillä.
| Yhdistäminen tekstiin: | Se kohdistaa elementit tehokkaasti tekstisisältöön, kuten kohdistaa kuvakkeet tai tekstin sisäisiä tarroja viereisen tekstin kanssa.
| Kuvasuhteiden säilyttäminen: | Kun kohdistat kuvia tai kuvakkeita tekstirivin sisällä, pystytasaus voi auttaa säilyttämään näiden elementtien kuvasuhteen, varsinkin kun se yhdistetään sopiviin kirjasinkokoihin ja rivinkorkeuksiin.
| Nopeat kohdistuskorjaukset: | Kun tarvitset pikakorjauksia pystytason kohdistusongelmiin, erityisesti skenaarioissa, joissa on sekasisältöä, pystytasaus voi tarjota nopean ratkaisun ilman laajoja asettelun uudelleenjärjestelyjä.
| CSS-sähköpostin tyyli: | HTML-sähköpostiviesteissä, joissa monimutkaisia asetteluja on tuettava paremmin, pystysuuntaisen tasauksen käyttäminen voi olla hyödyllistä elementtien pystysuuntaisessa tasauksessa ilman ulkoisten tyylitaulukoiden tai monimutkaisten tekniikoiden käyttöä.
| Yhteensopiva näytön kanssa: | inline-block: Pystysuuntausominaisuus on yhteensopiva inline-block-elementtien kanssa, mikä mahdollistaa tällaisten elementtien helpon pystysuuntaisen kohdistamisen rivin sisällä.
| Johdonmukaisuuden säilyttäminen: | Elementtien, jotka ovat osa taulukkotietoa tai jotka on kohdistettava samanlaisten elementtien kanssa eri riveillä tai sarakkeilla, pystytasaus voi auttaa säilyttämään visuaalisen yhtenäisyyden.
| Selaimen yhteensopivuus: | Toisin kuin jotkin uudemmat CSS-tekniikat, vertikaalinen kohdistus on ollut osa CSS:ää jo pitkään ja sillä on hyvä yhteensopivuus selainten välillä.
Vertical Alignin haitat CSS:ssä
| Rajoitettu upotettuihin elementteihin: | Pystytasausominaisuuden merkittävin rajoitus on, että se toimii vain rivitason elementeissä tai taulukon soluissa. Se ei koske suoraan lohkotason elementtejä. Tämä voi tehdä pystysuorasta kohdistuksesta haastavampaa suuremmissa elementeissä tai monimutkaisissa asetteluissa.
| Epäjohdonmukainen käytös: | Pystysuuntainen kohdistus voi olla hankalaa ja epäjohdonmukaista, varsinkin eri fonttikoot, rivinkorkeudet ja sisäkkäiset elementit. Sama pystysuuntausarvo voi tuottaa erilaisia tuloksia kontekstin perusteella.
| Selaimen omituisuudet: | Joissakin vanhemmissa selaimissa voi olla ristiriitaisia tulkintoja tai omituisia vertikaalisia kohdistusominaisuutta, mikä voi johtaa odottamattomiin tuloksiin. Tämä ongelma on kuitenkin parantunut nykyaikaisten selainten kehittymisen myötä.
| Rajoitettu välilyöntivalvonta: | Vertikaalitasausominaisuus käsittelee ensisijaisesti elementtien kohdistamista pystysuunnassa, mutta se tarjoaa vain vähän hallintaa elementtien väliseen etäisyyteen. Välien säätäminen vaatii usein ylimääräisiä CSS- tai HTML-muokkauksia.
| Flexbox ja Grid vaihtoehtoina: | Monimutkaisemmissa asetteluvaatimuksissa ja lohkotason elementtien pystysuuntaisessa kohdistuksessa kehittäjät luottavat usein Flexboxiin tai CSS Gridiin, jotka tarjoavat kestävämpiä ja ennakoitavampia ratkaisuja.
| Ei sovellu täyskeskitykseen: | Vaikka pystytasaus on hyödyllinen upotettujen elementtien kohdistamiseen pystysuunnassa, se sopii täyden keskittämiseen (vaaka- ja pystysuunnassa) lohkotason elementtien CSS-lisätekniikoilla.
| Harhaanjohtava nimi: | Nimi 'vertical-align' voi olla harhaanjohtava, koska se ei kohdista elementtiä pystysuunnassa kehittäjien usein odottamalla tavalla. Sen sijaan se ohjaa elementin sisällön tasausta rivilaatikossaan.
| Monimutkaisuus eri fonttien kanssa: | Pystysuuntaisen tasauksen käyttäytyminen voi olla arvaamatonta, kun käsitellään eri fonttikoot ja rivikorkeudet olevia elementtejä. Tämä voi tehdä yhdenmukaisesta pystysuuntauksesta haastavaa.
| Rajoitettu monimutkaisiin asetteluihin: | Se ei sovellu monimutkaisiin asetteluihin tai skenaarioihin, joissa sinun on kohdistettava pystysuunnassa suuremmat lohkotason elementit ylätason säilön sisällä.
| Selainten välinen yhteensopivuus: | Vaikka nykyaikaisissa selaimissa on parannettu pystysuuntaisen kohdistuksen tukea, vanhemmissa selaimissa saattaa silti esiintyä epäjohdonmukaisuuksia tai odottamatonta toimintaa.
| Vaihtoehtoiset tekniikat: | Nykyaikaiset CSS-asettelutekniikat, kuten Flexbox ja CSS Grid, tarjoavat tehokkaampia ja ennakoitavampia tapoja käsitellä monimutkaisia asetteluvaatimuksia, mukaan lukien sekä sisäisten että lohkotason elementtien pystysuuntainen kohdistus.
| Esteettömyysnäkökohdat: | Pystysuuntauksen käyttäminen asettelussa ei ehkä ole helpoin tapa, koska se voi häiritä näytönlukuohjelmia ja muita aputekniikoita. Semanttinen HTML ja oikeat CSS-tekniikat ovat usein parempia valintoja saavutettavuuden kannalta.
| Virheenkorjaushaasteet: | Pystysuuntaiseen kohdistukseen liittyvien odottamattomien toimintojen tai kohdistusongelmien virheenkorjaus voi joskus olla hankalaa, varsinkin kun käsitellään sisäkkäisiä elementtejä ja vaihtelevia kirjasinkokoja.
| Verkkoasettelun kehitys: | Verkkokehitysympäristön kehittyessä uudet asettelutekniikat, kuten CSS Grid Layout ja Flexbox, tarjoavat nykyaikaisempia ja kattavampia ratkaisuja asetteluhaasteisiin, mikä saattaa tehdä pystysuuntaisesta kohdistuksesta vähemmän merkityksellisen monissa skenaarioissa.
Kaiken kaikkiaan, vaikka pystytasausominaisuus on kätevä kohdistamaan tekstirivin sisäisiä elementtejä tai taulukon soluja, kehittäjät tarvitsevat usein muita CSS-tekniikoita kehittyneempien asettelu- ja sijoitteluvaatimusten saavuttamiseksi, varsinkin kun käsitellään lohkotason elementtejä tai monimutkaisia asetteluja. CSS Flexbox ja CSS Grid ovat tehokkaita vaihtoehtoja laajempaan kohdistuksen ja paikannusohjaukseen.
Johtopäätös
Pystytasausominaisuus on hyödyllinen tasattaessa tekstin tai taulukon solujen sisäisiä elementtejä. Sillä on kuitenkin rajoituksia, ja se voi olla haastavaa käyttää tehokkaasti monimutkaisissa asetteluissa tai lohkotason elementeissä. Kehittäjien tulisi harkita nykyaikaisia CSS-asettelutekniikoita, jotka tarjoavat enemmän hallintaa ja joustavuutta kohdistukseen ja sijoitteluun.
