I CSS kontrollerar egenskapen vertical-align den vertikala justeringen av inline-nivåelement eller tabellceller inom deras innehållande element. Det gäller element som är en del av en textrad eller visas som inline-block eller tabellcell.

Egenskapen 'vertical-align' används vanligtvis för inline-element som bilder, text eller inline-blockelement inom en textrad. Det gäller inte direkt för element på blocknivå; Du kan dock använda tekniker som flexbox eller positionering för att rikta in dem vertikalt.

Syntax:

Här är den grundläggande syntaxen för egenskapen vertikal-align:

hur man injicerar mock abstrakt klass

 selector { vertical-align: value; } 

'Värdet' kan vara ett av följande alternativ:

Baslinje:Justerar elementets baslinje med baslinjen för dess överordnade element. Detta är standardvärdet för de flesta element.Sub:Justerar elementets baslinje med den nedsänkta baslinjen för det överordnade elementets teckensnitt.Super:Justerar elementets baslinje med den upphöjda baslinjen för det överordnade elementets teckensnitt.Topp:Rikta in toppen av elementet med toppen av det högsta elementet på linjen inom linjerutan.Text-top:Justerar toppen av elementet med toppen av det överordnade elementets teckensnitt.Mitten:Centrerar elementet vertikalt i förhållande till det överordnade elementet.Botten:Rikta in botten av elementet med botten av det lägsta elementet på linjen inom linjerutan.Text-botten:Rikta in botten av elementet med botten av det överordnade elementets teckensnitt.Procentsats:Elementet justeras vertikalt med en angiven procentandel av linjehöjden. Till exempel vertikal-align: 50% kommer att centrera elementet vertikalt inom dess överordnade element.

OBS: Kom ihåg att 'vertical-align' har sitt specifika beteende beroende på elementtypen och det sammanhang där det används, så dess effekter kanske inte alltid är enkla. Det är särskilt användbart för att justera inline-element med text eller andra inline-element.

Exempel

Här är några fler detaljer och exempel relaterade till egenskapen 'vertical-align' i CSS:

1. Baslinjejustering:

Den vertikalt inriktade baslinjenvärde justerar baslinjen för elementet med baslinjen för dess överordnade element. Detta är standardbeteendet för de flesta element på inline-nivå.

Baslinje Annan text

2. Nedsänkt och upphöjd:

Den vertikala inriktningen:Sub-värde justerar elementets baslinje med den nedsänkta baslinjen för det överordnade elementets teckensnitt, vilket gör att det visas som en nedsänkt. Å andra sidan,vertikaljustera:Super justerar elementets baslinje med den upphöjda baslinjen för det överordnade elementets teckensnitt.

H₂O är vatten. x²+ och²= r²

3. Upp- och bottenjustering:

Den vertikala inriktningen:Toppvärdet justerar toppen av elementet med toppen av det högsta elementet på linjen inom linjerutan. Liknande,vertikaljustera:Botten justerar botten av elementet med botten av det lägsta elementet på linjen inom linjerutan.

Toppjusterad Bottenjusterad

4. Mittenjustering:

java array sorterad

Den vertikala inriktningen:Mellanvärdet centrerar elementet vertikalt i förhållande till det överordnade elementet. Detta används ofta för att centrera ikoner eller bilder i text.

Denna ikon är vertikalt centrerad

5. Justering av text-topp och text-botten:

Den vertikala inriktningen:Text-top-värdet justerar toppen av elementet med toppen av det överordnade elementets teckensnitt ochvertikaljustera:Text-bottom justerar botten av elementet med botten av det överordnade elementets teckensnitt.

Text-toppjusterad Text-bottenjusterad

6. Procentjustering:

Genom att använda ett procentvärde med vertikal justering kan du justera elementet vertikalt med en specifik linjehöjdsprocent. Till exempel vertikal-justera: 50 % kommer att centrera elementet på halva linjehöjden.

Centrerad vertikalt

7. Vertikal centrering av blocknivåelement:

För att vertikalt centrera ett element på blocknivå inuti dess överordnade, kan du använda flexbox- eller rutnätslayouten.

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

8. Vertikal centrering med okänd elementhöjd:

Om du inte vet höjden på elementet du vill centrera vertikalt kan du använda en kombination av position och transformation:

 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 centrering med flerradstext:

För att vertikalt centrera flerradstext i en behållare kan du använda en kombination av flexbox och ett pseudoelement:

 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 centrering av bilder i en behållare med olika bildförhållande:

Om du har bilder med olika bildförhållanden som du vill centrera i en behållare kan du använda en kombination av flexbox och objektpassning:

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. Kombinera vertikal linje med linjehöjd:

Du kan kombinera egenskapen vertikal-align med line-height-egenskapen för att uppnå mer exakt vertikal justering, särskilt med större teckenstorlekar.

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

12. Använda visningsegenskapen för justering:

Även om vertikal justering främst fungerar med element på inlinenivå, kan du ändra visningsegenskapen för att uppnå vertikal justering för element på blocknivå inom specifika sammanhang.

strängsammansättning

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

13. Vertikal inriktning i tabeller:

Egenskapen vertikal-align används ofta i tabellceller () för att kontrollera justeringen av innehåll i celler.

 td { vertical-align: middle; } 

14. Inline-Block Elements Alignment:

central css-knapp

Du kan använda vertikal justering för att justera inline-blockelement inom en textrad, till exempel ikoner bredvid text.

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

Det här är bara några exempel på hantering av vertikal uppriktning i olika scenarier. Beroende på din specifika layout och dina krav kan du behöva anpassa eller kombinera dessa tekniker för att uppnå önskat resultat. CSS tillhandahåller olika verktyg för att effektivt hantera vertikal anpassning i olika sammanhang.

Kom ihåg att även om egenskapen vertikal-align har användningsområden, finns det mer omfattande lösningar för alla inriktningsscenarier, särskilt element på blocknivå. För mer komplexa layouter och anpassningskrav rekommenderas att utforska moderna CSS-layouttekniker som Flexbox, CSS Grid eller till och med CSS-positionsvärden (som absoluta och relativa) för att uppnå de önskade resultaten mer effektivt och förutsägbart.

Kom ihåg att 'vertikal-align' endast påverkar element på inline-nivå eller tabellceller. Använd tekniker som flexbox, rutnätslayout eller positionering för att justera element på blocknivå vertikalt.

Några fler exempel

 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> 

Produktion

Nu finns det ett annat exempel där vi justerar texten med bilden.

Exempel

 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. 

Produktion

Fördelar med Vertical Align i CSS

Lätt att använda för inline-element:Egenskapen vertikal-align är enkel för att justera element, såsom bilder, ikoner eller text, inom en textrad eller andra element.Stöd för bred webbläsare:Egenskapen vertikal-align har bra webbläsarstöd och stöds brett i olika webbläsare.Flera justeringsalternativ:Den tillhandahåller olika anpassningsalternativ, såsom baslinje, mitten, topp, botten, text-top, text-bottom, subscript och superscript, vilket ger utvecklare flexibilitet när det gäller att justera element baserat på deras krav.Responsiv justering:Den kan användas i responsiv design för att anpassa den vertikala inriktningen baserat på containerns storlek eller tillgängliga utrymme.Enkelhet för inline-element:För att justera små element som ikoner eller bilder inom en textrad ger egenskapen vertikal-align en relativt enkel lösning utan att kräva komplexa layouttekniker.Finjustering:Egenskapen möjliggör finjustering av elementens vertikala position, vilket kan vara användbart för att uppnå specifika designmål.Överensstämmelse med tabellceller:I tabellsammanhang styr egenskapen vertikal-align innehållet i tabellceller. Detta kan hjälpa till att upprätthålla konsekvens över tabellbaserade layouter.Kombinera med text:Den justerar effektivt element med textinnehåll, som att justera ikoner eller infogade etiketter med intilliggande text.Upprätthålla bildförhållanden:När du justerar bilder eller ikoner inom en textrad kan vertikal justering bidra till att bibehålla bildförhållandet för dessa element, särskilt i kombination med lämpliga teckenstorlekar och linjehöjder.Snabbjusteringar:När du behöver snabba lösningar för problem med vertikal justering, särskilt i scenarier med blandat innehåll, kan vertikal justering ge en snabb lösning utan att kräva omfattande layoutomstrukturering.CSS-e-poststil:I HTML-e-postmeddelanden, där komplexa layouter behöver stödjas bättre, kan användning av vertikal justering vara till hjälp för grundläggande vertikal justering av element utan att förlita sig på externa stilmallar eller komplexa tekniker.Kompatibel med display:inline-block: Egenskapen vertical-align är kompatibel med inline-block-element, vilket möjliggör enkel vertikal justering av sådana element inom en linje.Upprätthålla konsistens:För element som ingår i tabelldata eller som behöver justeras med liknande element över olika rader eller kolumner, kan vertikal justering hjälpa till att upprätthålla visuell konsekvens.Webbläsarkompatibilitet:Till skillnad från vissa nyare CSS-tekniker har vertikal-aligning varit en del av CSS under lång tid och har god kompatibilitet över webbläsare.

Nackdelar med Vertical Align i CSS

Begränsat till inline-element:Den viktigaste begränsningen för egenskapen vertikal-align är att den bara fungerar för element på inline-nivå eller tabellceller. Det gäller inte direkt för element på blocknivå. Detta kan göra vertikal justering mer utmanande för större element eller komplexa layouter.Inkonsekvent beteende:Vertikal justering kan vara knepig och inkonsekvent, särskilt med olika teckenstorlekar, radhöjder och kapslade element. Samma vertikala inriktningsvärde kan ge olika resultat baserat på sammanhanget.Webbläsarquirks:Vissa äldre webbläsare kan ha inkonsekventa tolkningar eller egenheter med egenskapen vertikal-align, vilket kan leda till oväntade resultat. Det här problemet har dock förbättrats i takt med att moderna webbläsare har utvecklats.Begränsad kontroll över avstånd:Egenskapen vertikal-align handlar i första hand om att justera element vertikalt, men den ger bara lite kontroll över avståndet mellan elementen. Att justera avståndet kräver ofta ytterligare CSS- eller HTML-ändringar.Flexbox och Grid som alternativ:För mer komplexa layoutkrav och vertikal anpassning av element på blocknivå förlitar sig utvecklare ofta på Flexbox eller CSS Grid, som ger mer robusta och förutsägbara lösningar.Inte lämplig för fullcentrering:Även om vertikal justering är användbar för vertikal justering av inline-element, är den lämplig för fullcentrering (horisontellt och vertikalt) element på blocknivå med ytterligare CSS-tekniker.Missvisande namn:Namnet 'vertical-align' kan vara missvisande eftersom det inte justerar elementet vertikalt på det sätt som utvecklare ofta förväntar sig. Istället styr den justeringen av elementets innehåll inom dess radruta.Komplexitet med olika teckensnitt:Beteendet för vertikal justering kan vara oförutsägbart när man hanterar element med olika teckenstorlekar och radhöjder. Detta kan göra konsekvent vertikal uppriktning utmanande.Begränsat för komplexa layouter:Det är olämpligt för komplexa layouter eller scenarier där du måste vertikaljustera större element på blocknivå i en överordnad behållare.Cross-Browser-kompatibilitet:Medan moderna webbläsare har förbättrat stödet för vertikal justering, kan äldre webbläsare fortfarande uppvisa inkonsekvenser eller oväntat beteende.Alternativa tekniker:Moderna CSS-layouttekniker som Flexbox och CSS Grid erbjuder mer kraftfulla och förutsägbara sätt att hantera komplexa layoutkrav, inklusive vertikal justering av både inline- och blocknivåelement.Tillgänglighetsöverväganden:Att använda vertikal justering för layout kanske inte är den mest lättillgängliga metoden, eftersom det kan störa skärmläsare och andra hjälpmedel. Semantisk HTML och korrekt CSS-teknik är ofta bättre val för tillgänglighet.Felsökningsutmaningar:Att felsöka oväntat beteende eller anpassningsproblem relaterade till vertikal justering kan ibland vara knepigt, särskilt när man hanterar kapslade element och olika teckenstorlekar.Utveckling av webblayout:I takt med att webbutvecklingslandskapet utvecklas ger nya layouttekniker som CSS Grid Layout och Flexbox mer moderna och heltäckande lösningar för layoututmaningar, vilket potentiellt gör vertikal anpassning mindre relevant för många scenarier.

Sammantaget, även om egenskapen vertikal-align är praktisk för att justera inline-element eller tabellceller inom en textrad, behöver utvecklare ofta andra CSS-tekniker för mer avancerade layout- och positioneringskrav, särskilt när de hanterar element på blocknivå eller komplexa layouter. CSS Flexbox och CSS Grid är kraftfulla alternativ för bredare uppriktning och positioneringskontroll.

Slutsats

Egenskapen vertikal-align är användbar för att justera inline-element i text- eller tabellceller. Det har dock begränsningar och kan vara utmanande att använda effektivt för komplexa layouter eller element på blocknivå. Utvecklare bör överväga moderna CSS-layouttekniker som ger mer kontroll och flexibilitet över anpassning och positionering.