Függőleges igazítás - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

Függőleges igazítás

A vertical-align tulajdonság segítségével sorközi elemeknek a sorban elfoglalt függőleges pozíciója adható meg.

Többek között használható táblázatok cellái tartalmának függőleges igazítására.

Értékkel is megadható az eltolás mértéke.

baseline=betűvonalon;
sub=alsó index;
super=felső index;
top=fent;
bottom=lent;
text-top=a szöveg tetején;
text-bottom=a szöveg alján
midle=középen;

A szóköz beállítása:

kijelölő

{

vertical-align

érték/kulcsszó;

}

Példa:

Forráskód


<style>
  span {font: 22px Verdana, Geneva, sans-serif;}
  .va1 {vertical-align:0;}
  .va2 {vertical-align:sub;} 
  .va3 {vertical-align:super;}    
  .va4 {vertical-align:top;}
  .va5 {vertical-align:bottom;} 
  .va6 {vertical-align:text-top;}       
  .va7 {vertical-align:text-bottom;}  
  .va8 {vertical-align:baseline;}         
  .va9 {vertical-align:middle;}    
  .va10 {vertical-align:10px;}   
  .va11 {vertical-align:-10px;}   
</style>     
….
<body>   
 <p>          
  <span class="va1">0 </span>  
  <span class="va2">sub </span>   
  <span class="va3">super </span>  
  <span class="va4">top </span>  
  <span class="va5">bottom </span>   
  <span class="va6">text-top </span>   
  <span class="va7">text-bottom </span>
 </p> <br> <p>     
  <span class="va1">0 </span>  
  <span class="va8">baseline </span>        
  <span class="va9">middle </span>   
  <span class="va10">10px </span>   
  <span class="va11">-10px </span>   
 </p> 
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_szoveg_fuggolegesigazit_01.html