Kako postaviti spletne elemente z navpično poravnavo CSS

Google iskanje









Pokrajina
Opis






gozd

Lorem ipsum dolor sit amet.






ocean

Lorem ipsum dolor sit amet.

The koda HTML zgoraj ustvari preprosto spletno stran, ki prikazuje štiri elemente: povezano besedilo, sliko, vdelan video in tabelo. V vašem brskalniku naj bi izgledalo tako:

Kako navpično poravnati besedilo

Privzeto večina besedilnih elementov (kot so naslovi,

, in

Vendar pa nekateri besedilni elementi, kot je in oznake so vstavljene. Posledično podpirajo lastnost vertikalne poravnave. Če želite navpično poravnati besedilo, preprosto dodelite ustrezno vrednost lastnosti CSS vertical-align.

Z navpično poravnavo zgornjo vrednostjo na besedilu

a {
 navpična poravnava: vrh;
}

Dodajanje koda CSS zgoraj na osnovni dokument HTML bo poravnal vrh besedilo oznake z vrhom najvišjega elementa v vrstici. Izdelava naslednjega posodobljenega zaslona:

Uporaba odstotka vrednosti na besedilu

a {
 navpična poravnava: -50 %;
}

Zgornji CSS poravna besedilni element na mestu, ki je 50 % pod osnovno črto nadrejenega elementa. V vašem brskalniku ustvari naslednji izhod:

Kot lahko vidite na zgornji sliki, element besedila zaseda mesto pod slikovnim in video elementom, ki sta v isti vrstici. Če želite ta element postaviti na ali nad osnovno črto, uporabite pozitivno odstotno vrednost.

Uporaba vrednosti dolžine v besedilu

a {
 navpična poravnava: 90px;
}

Zgornja koda poravna osnovno črto elementa besedila na dolžini 90 slikovnih pik nad osnovno črto nadrejenega elementa. To ustvari naslednji izhod v brskalniku:

Kako navpično poravnati slike

The tag je vgrajeni element, s katerim dobro deluje lastnost CSS navpična poravnava.

Uporaba super vrednosti navpične poravnave na slikah

img {
 navpična poravnava: super;
}

Zgornja koda postavi sliko na nadpisno osnovno črto nadrejenega elementa. To pomeni na položaju nad osnovno črto, kot lahko vidite v naslednjem izhodu:

Uporaba odstotne vrednosti navpične poravnave na slikah

img {
 navpična poravnava: 25 %;
}

Zgornja koda poravna osnovno črto slikovnega elementa na 25 % nad osnovno črto nadrejenega elementa. To povzroči naslednji zrcalni učinek super vrednosti:

Uporaba vrednosti dolžine navpične poravnave na slikah

img {
 navpična poravnava: 5px;
}

Zgornja koda poravna osnovno črto slikovnega elementa na položaju 5 slikovnih pik nad osnovno črto nadrejenega elementa. To povzroči podoben učinek kot pri vrednostih super in 25 %:

Vdelani mediji, kot so videoposnetki in iframe, so vgrajeni elementi HTML. Zato se lastnost CSS navpična poravnava odlično obnese z njimi.

Uporaba super vrednosti vertikalne poravnave na videoposnetku

video {
 navpična poravnava: sub;
}

Zgornja koda postavlja videoposnetek na osnovno črto podpisa nadrejenega elementa. To pomeni na položaju pod osnovno črto, kot lahko vidite v naslednjem izhodu:

Uporaba odstotne vrednosti navpične poravnave na videu

video {
 navpična poravnava: -25 %;
}

Zgornja koda poravna osnovno črto video elementa na 25 % pod osnovno črto nadrejenega elementa. To povzroči naslednji zrcalni učinek podvrednosti:

Uporaba vrednosti dolžine navpične poravnave na videoposnetku

video {
 navpična poravnava: -5px;
}

Zgornja koda poravna osnovno črto slikovnega elementa na položaju 5 slikovnih pik pod osnovno črto nadrejenega elementa. To povzroči učinek, kot so vrednosti sub in -25 %:

Kako navpično poravnati elemente v tabeli

Uporaba lastnosti vertikalne poravnave s tabelo je nekoliko težavna, saj je tabela blokovni element. Vendar pa je

Uporaba zgornje vrednosti navpično poravnave na podatkih tabele

td {
 višina: 40px;
 navpična poravnava: vrh;
}

Zgornja koda vsaki celici v tabeli doda višino 40 slikovnih pik. Nato podatke v vsaki celici poravna na vrh vsake vrstice. To ustvari naslednji izhod v brskalniku:

Uporaba srednje vrednosti navpične poravnave na podatkih tabele

td {
 višina: 40px;
 navpična poravnava: sredina;
}

Srednja vrednost navpične poravnave v zgornji kodi navpično centrira podatke znotraj vsake celice. V brskalniku ustvari naslednji izhod:

Uporaba spodnje vrednosti navpično poravnane na podatkih tabele

td {
 višina: 40px;
 navpična poravnava: dno;
}

Zgornja koda poravna podatke v vsaki celici na dno vsake vrstice. V brskalniku ustvari naslednji izhod:

Zdaj lahko poravnate elemente na svoji spletni strani

Lastnost CSS navpična poravnava lahko zdaj uporabite z vrsto različnih elementov v vrstici, vključno z besedilom, vdelanimi mediji in podatki tabele. Splošno pravilo je, da lastnost navpična poravnava deluje samo na elementih v vrstici in bloku v vrstici.

Vendar pa lahko to lastnost uporabite za blokovne elemente, le najprej jih morate pretvoriti v elemente v vrstici ali v bloku v vrstici. Ne pozabite, da lahko kombinirate navpično poravnavo z drugimi lastnostmi poravnave, na primer za poravnavo besedila.

O avtorju

Kadeisha Kean (Objavljenih 52 člankov)

Kadeisha Kean je razvijalka programske opreme s celotnim skladom in pisateljica tehničnega/tehnološkega področja. Ima izrazito sposobnost poenostavitve nekaterih najbolj zapletenih tehnoloških konceptov; izdelava materiala, ki ga lahko zlahka razume vsak novinec v tehnologiji. Navdušena je nad pisanjem, razvojem zanimive programske opreme in potovanjem po svetu (skozi dokumentarne filme).

Več od Kadeishe Kean