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:
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:
Baslinje Annan text
2. Nedsänkt och upphöjd:
H2O är vatten. x2+ och2= r2
3. Upp- och bottenjustering:
Toppjusterad Bottenjusterad
4. Mittenjustering:
java array sorterad
Denna ikon är vertikalt centrerad
5. Justering av text-topp och text-botten:
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: ''; 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 (
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>⭐</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>Testa det nu
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.Testa det nu
Produktion
Fördelar med Vertical Align i CSS
Nackdelar med Vertical Align i CSS
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.