TechCodeview

I CSS kontrollerer egenskapen vertikal justering den vertikale justeringen av elementer på linjenivå eller tabellceller i deres innholdselement. Det gjelder elementer som er en del av en tekstlinje eller vises som inline-blokk eller tabellcelle.

Egenskapen 'vertical-align' brukes ofte for innebygde elementer som bilder, tekst eller inline-blokkelementer innenfor en tekstlinje. Det gjelder ikke direkte for blokknivåelementer; Du kan imidlertid bruke teknikker som flexbox eller posisjonering for å justere dem vertikalt.

Syntaks:

Her er den grunnleggende syntaksen for egenskapen vertikal-justering:

 selector { vertical-align: value; } 

'Verdien' kan være ett av følgende alternativer:

Grunnlinje:Justerer elementets grunnlinje med grunnlinjen til det overordnede elementet. Dette er standardverdien for de fleste elementer.Under:Justerer elementets grunnlinje med den senkede grunnlinjen til det overordnede elementets skrift.Super:Justerer elementets grunnlinje med den hevete grunnlinjen til det overordnede elementets skrift.Topp:Juster toppen av elementet med toppen av det høyeste elementet på linjen innenfor linjeboksen.Tekst øverst:Justerer toppen av elementet med toppen av det overordnede elementets skrift.Midten:Sentrerer elementet vertikalt i forhold til det overordnede elementet.Bunn:Juster bunnen av elementet med bunnen av det laveste elementet på linjen innenfor linjeboksen.Tekst-bunn:Juster bunnen av elementet med bunnen av det overordnede elementets skrift.Prosentdel:Elementet er justert vertikalt med en spesifisert prosentandel av linjehøyden. For eksempel vertikaljustering: 50 % vil sentrere elementet vertikalt innenfor det overordnede elementet.

MERK: Husk at 'vertical-align' har sin spesifikke oppførsel avhengig av elementtypen og konteksten den brukes i, så effektene er kanskje ikke alltid like klare. Det er spesielt nyttig for å justere innebygde elementer med tekst eller andre innebygde elementer.

Eksempler

Her er noen flere detaljer og eksempler relatert til egenskapen 'vertical-align' i CSS:

1. Grunnlinjejustering:

Den vertikale justeringen av grunnlinjenverdi justerer grunnlinjen til elementet med grunnlinjen til det overordnede elementet. Dette er standardoppførselen for de fleste inline-nivåelementer.

Grunnlinje Annen tekst

2. Nedskrevet og hevet skrift:

Den vertikale justeringen:Sub-verdi justerer elementets grunnlinje med den senkede grunnlinjen til det overordnede elementets skrift, slik at det vises som et senket skrift. På den andre siden,vertikaljustering:Super justerer elementets grunnlinje med den hevete grunnlinjen til det overordnede elementets skrift.

H₂O er vann. x²+ og²= r²

3. Topp- og bunnjustering:

Den vertikale justeringen:Toppverdi justerer toppen av elementet med toppen av det høyeste elementet på linjen innenfor linjeboksen. På samme måte,vertikaljustering:Bunnen justerer bunnen av elementet med bunnen av det laveste elementet på linjen innenfor linjeboksen.

Toppjustert Bunnjustert

4. Midtjustering:

sammenligne i java

Den vertikale justeringen:Midtverdi sentrerer elementet vertikalt i forhold til det overordnede elementet. Dette brukes ofte til å sentrere ikoner eller bilder i tekst.

Dette ikonet er vertikalt sentrert

5. Justering av tekst-topp og tekst-bunn:

Den vertikale justeringen:Tekst-toppverdi justerer toppen av elementet med toppen av det overordnede elementets font ogvertikaljustering:Tekst-bunn justerer bunnen av elementet med bunnen av det overordnede elementets skrift.

Tekst-toppjustert Tekst-bunnjustert

6. Prosentjustering:

Ved å bruke en prosentverdi med vertikal justering kan du justere elementet vertikalt med en bestemt linjehøydeprosent. For eksempel vertikal-juster: 50 % vil sentrere elementet ved halve linjehøyden.

Sentrert vertikalt

java er lik

7. Vertikal sentrering av blokknivåelementer:

For å sentrere et blokknivåelement vertikalt inne i det overordnede elementet, kan du bruke flexbox- eller rutenettoppsettet.

 Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ } 

8. Vertikal sentrering med ukjent elementhøyde:

Hvis du ikke vet høyden på elementet du vil sentrere vertikalt, kan du bruke en kombinasjon av posisjon og transformasjon:

 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. Vertikal sentrering med flerlinjetekst:

For å sentrere flerlinjers tekst vertikalt i en beholder, kan du bruke en kombinasjon av flexbox og et pseudo-element:

 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: &apos;&apos;; display: inline-block; vertical-align: middle; height: 100%; } 

10. Vertikal sentrering av bilder i en beholder med forskjellige størrelsesforhold:

Hvis du har bilder av forskjellige størrelsesforhold som du vil sentrere i en beholder, kan du bruke en kombinasjon av flexbox og objekttilpasning:

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. Kombiner vertikal justering med linjehøyde:

Du kan kombinere egenskapen vertikal-justering med line-height-egenskapen for å oppnå mer presis vertikal justering, spesielt med større skriftstørrelser.

 .element { font-size: 24px; line-height: 1.5; vertical-align: middle; } 

12. Bruke skjermegenskapen for justering:

Mens vertikal justering primært fungerer med inline-nivå-elementer, kan du endre visningsegenskapen for å oppnå vertikal justering for blokk-nivå-elementer i spesifikke kontekster.

 .container { display: table-cell; vertical-align: middle; } 

13. Vertikal justering i tabeller:

Egenskapen vertikal-align brukes ofte i tabellceller () for å kontrollere justeringen av innhold i celler.

 td { vertical-align: middle; } 

14. Justering av inline-blokkelementer:

Du kan bruke vertikal justering for å justere inline-blokkelementer innenfor en tekstlinje, for eksempel ikoner ved siden av tekst.

 <span>&#x2B50;</span> Star Rating .icon { vertical-align: middle; font-size: 24px; } 

Dette er bare noen få eksempler på håndtering av vertikal justering i forskjellige scenarier. Avhengig av dine spesifikke layout og krav, må du kanskje tilpasse eller kombinere disse teknikkene for å oppnå de ønskede resultatene. CSS gir ulike verktøy for å håndtere vertikal justering effektivt i ulike sammenhenger.

Husk at selv om egenskapen vertikaljustering har bruksområder, finnes det mer omfattende løsninger for alle justeringsscenarier, spesielt blokknivåelementer. For mer komplekse layouter og krav til justering anbefales det å utforske moderne CSS-layoutteknikker som Flexbox, CSS Grid eller til og med CSS-posisjonsverdier (som absolutte og relative) for å oppnå de ønskede resultatene mer effektivt og forutsigbart.

Husk at 'vertical-align' bare påvirker elementer på linjenivå eller tabellceller. Bruk teknikker som flexbox, rutenettoppsett eller posisjonering for å justere blokknivåelementer vertikalt.

Noen flere eksempler

 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> 

Produksjon

Nå er det et annet eksempel der vi justerer teksten med bildet.

Eksempel

 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. 

Produksjon

Fordeler med Vertical Align i CSS

Enkel å bruke for innebygde elementer:Egenskapen vertikaljustering er enkel for å justere elementer, for eksempel bilder, ikoner eller tekst, innenfor en tekstlinje eller andre elementer.Støtte for bred nettleser:Den vertikale align-egenskapen har god nettleserstøtte og støttes bredt på tvers av forskjellige nettlesere.Flere justeringsalternativer:Det gir forskjellige justeringsalternativer, for eksempel grunnlinje, midt, topp, bunn, tekst-topp, tekst-bunn, nedskreven og hevet skrift, og gir utviklere fleksibilitet i å justere elementer basert på deres krav.Responsiv justering:Den kan brukes i responsiv design for å tilpasse den vertikale justeringen basert på beholderens størrelse eller tilgjengelig plass.Enkelhet for innebygde elementer:For å justere små elementer som ikoner eller bilder innenfor en tekstlinje, gir egenskapen vertikal-justering en relativt enkel løsning uten å kreve komplekse layoutteknikker.Finjustering:Egenskapen gjør det mulig å finjustere den vertikale plasseringen av elementer, noe som kan være nyttig for å oppnå spesifikke designmål.Overensstemmelse med tabellceller:I sammenheng med tabeller kontrollerer egenskapen vertikal-justering innholdsjustering i tabellceller. Dette kan bidra til å opprettholde konsistens på tvers av tabellbaserte oppsett.Kombinere med tekst:Den justerer effektivt elementer med tekstinnhold, for eksempel justering av ikoner eller innebygde etiketter med tilstøtende tekst.Opprettholde sideforhold:Når du justerer bilder eller ikoner innenfor en tekstlinje, kan vertikal justering bidra til å opprettholde sideforholdet til disse elementene, spesielt når det kombineres med passende skriftstørrelser og linjehøyder.Raske justeringer:Når du trenger raske løsninger for problemer med vertikal justering, spesielt i scenarier med blandet innhold, kan vertikal justering gi en rask løsning uten å kreve omfattende omstrukturering av layout.CSS E-post Styling:I HTML-e-poster, der komplekse layouter må støttes bedre, kan bruk av vertikal justering være nyttig for grunnleggende vertikal justering av elementer uten å stole på eksterne stilark eller komplekse teknikker.Kompatibel med skjerm:inline-block: Vertikal-align-egenskapen er kompatibel med inline-block-elementer, noe som muliggjør enkel vertikal justering av slike elementer innenfor en linje.Opprettholde konsistens:For elementer som er en del av tabelldata eller trenger å justere med lignende elementer på tvers av forskjellige rader eller kolonner, kan vertikal justering bidra til å opprettholde visuell konsistens.Nettleserkompatibilitet:I motsetning til noen nyere CSS-teknikker, har vertikal-justering vært en del av CSS i lang tid og har god kompatibilitet på tvers av nettlesere.

Ulemper med Vertical Align i CSS

Begrenset til innebygde elementer:Den mest betydningsfulle begrensningen til egenskapen vertikaljustering er at den bare fungerer for elementer på linjenivå eller tabellceller. Den gjelder ikke direkte for elementer på blokknivå. Dette kan gjøre vertikal justering mer utfordrende for større elementer eller komplekse oppsett.Inkonsekvent oppførsel:Vertikal justering kan være vanskelig og inkonsekvent, spesielt med forskjellige skriftstørrelser, linjehøyder og nestede elementer. Den samme vertikale justeringsverdien kan gi forskjellige resultater basert på konteksten.Nettleserquirks:Noen eldre nettlesere kan ha inkonsekvente tolkninger eller særheter med egenskapen vertikal-justering, noe som kan føre til uventede resultater. Dette problemet har imidlertid forbedret seg med utviklingen av moderne nettlesere.Begrenset kontroll over avstand:Egenskapen vertikaljustering omhandler først og fremst justering av elementer vertikalt, men den gir bare litt kontroll over avstanden mellom elementene. Å justere avstanden krever ofte ytterligere CSS- eller HTML-modifikasjoner.Flexbox og Grid som alternativer:For mer komplekse layoutkrav og vertikal justering av blokknivåelementer, stoler utviklere ofte på Flexbox eller CSS Grid, som gir mer robuste og forutsigbare løsninger.Ikke egnet for fullsentrering:Selv om vertikal justering er nyttig for vertikal justering av innebygde elementer, er den egnet for fullsentrering (horisontalt og vertikalt) blokknivåelementer med ekstra CSS-teknikker.Villedende navn:Navnet 'vertical-align' kan være misvisende fordi det ikke justerer elementet vertikalt slik utviklere ofte forventer. I stedet kontrollerer den justeringen av elementets innhold innenfor linjeboksen.Kompleksitet med forskjellige fonter:Oppførselen til vertikal justering kan være uforutsigbar når du arbeider med elementer med forskjellige skriftstørrelser og linjehøyder. Dette kan gjøre konsekvent vertikal justering utfordrende.Begrenset for komplekse oppsett:Det er uegnet for komplekse oppsett eller scenarier der du må vertikaljustere større elementer på blokknivå i en overordnet beholder.Kryssnettleserkompatibilitet:Mens moderne nettlesere har forbedret støtte for vertikal justering, kan eldre nettlesere fortsatt vise inkonsekvenser eller uventet oppførsel.Alternative teknikker:Moderne CSS-layoutteknikker som Flexbox og CSS Grid tilbyr kraftigere og forutsigbare måter å håndtere komplekse layoutkrav på, inkludert vertikal justering av både inline- og blokknivåelementer.Tilgjengelighetshensyn:Å bruke vertikal justering for layout er kanskje ikke den mest tilgjengelige tilnærmingen, siden det kan forstyrre skjermlesere og andre hjelpeteknologier. Semantisk HTML og riktige CSS-teknikker er ofte bedre valg for tilgjengelighet.Feilsøkingsutfordringer:Det kan noen ganger være vanskelig å feilsøke uventet atferd eller justeringsproblemer knyttet til vertikal justering, spesielt når du har å gjøre med nestede elementer og varierende skriftstørrelser.Evolusjon av nettoppsett:Etter hvert som webutviklingslandskapet utvikler seg, gir nye layoutteknikker som CSS Grid Layout og Flexbox mer moderne og omfattende løsninger for layoututfordringer, noe som potensielt gjør vertikal justering mindre relevant for mange scenarier.

Totalt sett, mens egenskapen vertikal-justering er nyttig for å justere innebygde elementer eller tabellceller innenfor en tekstlinje, trenger utviklere ofte andre CSS-teknikker for mer avanserte layout- og posisjoneringskrav, spesielt når de arbeider med blokknivåelementer eller komplekse layouter. CSS Flexbox og CSS Grid er kraftige alternativer for bredere justering og posisjoneringskontroll.

Konklusjon

Egenskapen vertikal-justering er nyttig for å justere innebygde elementer i tekst- eller tabellceller. Det har imidlertid begrensninger og kan være utfordrende å bruke effektivt for komplekse oppsett eller blokknivåelementer. Utviklere bør vurdere moderne CSS-layoutteknikker som gir mer kontroll og fleksibilitet over justering og posisjonering.

tiger løve forskjell