Hur man placerar webbelement med CSS Vertical Align

Google Sök









Landskap
Beskrivning






Skog

Lorem ipsum dolor sit amet.






Hav

Lorem ipsum dolor sit amet.

De HTML-kod ovan skapar en enkel webbsida som visar fyra element: länkad text, en bild, en inbäddad video och en tabell. Det ska se ut så här i din webbläsare:

Hur man justerar text vertikalt

Som standard är de flesta textelement (som rubriker,

, och

Vissa textelement som t.ex och taggen är inbyggd. Som ett resultat stöder de egenskapen vertikaljustering. För att justera text vertikalt, tilldela helt enkelt lämpligt värde till egenskapen CSS vertical-align.

Använd det vertikaljusterade toppvärdet på text

en {
 vertikal-align: topp;
}

Lägger till CSS-kod ovan till det grundläggande HTML-dokumentet kommer att anpassa toppen av tagga text med toppen av det högsta elementet på raden. Producerar följande uppdaterade display:

Använda det procentuella värdet på text

en {
 vertikaljustering: -50%;
}

CSS ovan justerar textelementet på en position som är 50 % under baslinjen för det överordnade elementet. Den producerar följande utdata i din webbläsare:

Som du kan se i bilden ovan, intar textelementet en position under bilden och videoelementen, som är på samma rad. För att placera detta element vid eller över baslinjen, använd ett positivt procentvärde.

Använda längdvärdet på text

en {
 vertikaljustering: 90px;
}

Koden ovan justerar baslinjen för textelementet med en längd av 90px ovanför baslinjen för det överordnade elementet. Detta ger följande utdata i en webbläsare:

Hur man justerar bilder vertikalt

De taggen är ett inline-element som CSS-egenskapen vertikal-align fungerar bra med.

Använda det vertikala supervärdet på bilder

img {
 vertikal-align: super;
}

Koden ovan placerar bilden vid den upphöjda baslinjen för det överordnade elementet. Detta betyder vid en position ovanför baslinjen, som du kan se i följande utdata:

Använda vertikaljustera procentvärde på bilder

img {
 vertikaljustering: 25 %;
}

Koden ovan justerar baslinjen för bildelementet till 25 % ovanför baslinjen för det överordnade elementet. Detta ger följande spegeleffekt av supervärdet:

Använda det vertikala längdvärdet på bilder

img {
 vertikal-justera: 5px;
}

Koden ovan justerar baslinjen för bildelementet på en position 5px ovanför baslinjen för det överordnade elementet. Detta ger en effekt som liknar den för super- och 25%-värdena:

Inbäddade media som videor och iframes är inline HTML-element. Därför fungerar CSS vertical-align-egenskapen utmärkt med dem.

Använda det vertikala supervärdet på en video

video {
 vertikal-align: sub;
}

Koden ovan placerar videon vid abonnemangsbaslinjen för det överordnade elementet. Detta betyder vid en position under baslinjen, som du kan se i följande utdata:

Använda det vertikalt justerade procentvärdet på en video

video {
 vertikaljustering: -25%;
}

Koden ovan justerar baslinjen för videoelementet till 25 % under baslinjen för det överordnade elementet. Detta ger följande spegeleffekt av undervärdet:

Använda det vertikala längdvärdet på en video

video {
 vertikal-align: -5px;
}

Koden ovan justerar baslinjen för bildelementet vid en position 5px under baslinjen för det överordnade elementet. Detta ger en effekt som sub- och -25%-värdena:

Hur man justerar objekt vertikalt i en tabell

Att använda egenskapen vertikal-align med en tabell är lite knepigt, eftersom en tabell är ett blockelement. Men den

Använda det vertikaljusterade toppvärdet på tabelldata

td {
 höjd: 40px;
 vertikal-align: topp;
}

Koden ovan lägger till en höjd på 40px till varje cell i tabellen. Den justerar sedan data i varje cell till toppen av varje rad. Detta ger följande utdata i webbläsaren:

Använda det vertikala mittenvärdet på tabelldata

td {
 höjd: 40px;
 vertikal-align: mitten;
}

Det vertikala mittvärdet i koden ovan centrerar data vertikalt inom varje cell. Den producerar följande utdata i webbläsaren:

Använda det vertikaljusterade bottenvärdet på tabelldata

td {
 höjd: 40px;
 vertikal-align: botten;
}

Koden ovan justerar data i varje cell till botten av varje rad. Den producerar följande utdata i webbläsaren:

Nu kan du justera elementen på din webbsida

Du kan nu använda egenskapen CSS vertical-align med en mängd olika inline-element, inklusive text, inbäddade media och tabelldata. Den allmänna regeln är att egenskapen vertikal-align endast fungerar på inline- och inline-block-element.

Du kan dock använda den här egenskapen på blockelement, du behöver bara konvertera dem till inline- eller inline-blockelement först. Kom ihåg att du kan kombinera vertikaljustering med andra justeringsegenskaper, till exempel textjustering.

Om författaren

Kadeisha Kean (52 publicerade artiklar)

Kadeisha Kean är en full-stack mjukvaruutvecklare och teknisk/teknikskribent. Hon har den distinkta förmågan att förenkla några av de mest komplexa tekniska koncepten; producera material som lätt kan förstås av alla nybörjare. Hon brinner för att skriva, utveckla intressant programvara och att resa runt i världen (genom dokumentärer).

Mer från Kadeisha Kean