HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

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.
  1. baseline=betűvonalon;
  2. sub=alsó index;
  3. super=felső index;
  4. top=fent;
  5. bottom=lent;
  6. text-top=a szöveg tetején;
  7. text-bottom=a szöveg alján
  8. 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