vertical-align:bottom

[Christian Wansart]

Hallo,

ich versuche gerade den Text in einem div an "bottom" auszurichten, allerdings will es nicht klappen.
Dass es mit <div> selbst nicht funktioniert, ist klar, aber dass es mein <span> auch nicht machen will, ist mir schleierhaft...

Ich habe mir mal auf CSS4You den Artikel zu vertical-align angeschaut.
Dann habe ich versucht ihn mehr oder weniger nachzubauen, aber es funktioniert nicht.
Hier mein Code:

<div style="height:500px; background:#eee; line-height:20px;">  
 <span="vertical-align:bottom;">  
  adsuhzguisahfduighayufsnd3w5vztwf8dcz77s9gfbn  
 </span>  
</div>

Als es nicht funktioniert habe, habe ich mal den Code aus dem Artikel kopiert, und er funktioniert!

Was stimmt denn nicht an meinem Code, dass es nicht funktioniert?

Vielen Dank,

Gruß
Christian Wansart

[Beat]

Was stimmt denn nicht an meinem Code, dass es nicht funktioniert?

Im CSS4YOU Beispiel werden Tabellenzellen verwendet. Die Eigenschaft vertical-align ist dort exklusiv für Tabellen und nicht auf andere Blockelemente anwendbar.

mfg Beat

[Christian Wansart]

Beat, danke für deine Antwort.

Aber in dem Artikel auf CSS4You werden tables, als auch divs verwendet ->

    <div class="test">Gq  
      <span class="baseline">baseline</span>  
  
      <span class="middle">middle</span>  
      <span class="sub">sub</span>  
      <span class="super">super</span>  
      <span class="text-top">text-top</span>  
  
      <span class="text-bottom">text-bottom</span>  
      <span class="percentage">30%</span>  
      <span class="length">30px</span>  
      <span class="top">top</span>  
  
      <span class="bottom">bottom</span>  
    </div>

und es funktioniert.... o_o
Das war das, wo rauf ich hinauswollte.

Wieso funktionieren die denn?

Danke,

Gruß
Christian Wansart

[Cheatah]

Hi,

Dass es mit <div> selbst nicht funktioniert, ist klar, aber dass es mein <span> auch nicht machen will, ist mir schleierhaft...

CSS interessiert sich ü-ber-haupt nicht für den Namen eines Elements. *Alles*, was mit einem <span> geht, geht auch mit einem <div>, <p>, <kbd>, <title> oder <foobar>. Lediglich Replaced Elements wie <img> oder <object> fallen ein wenig aus dem Rahmen.

Dann habe ich versucht ihn mehr oder weniger nachzubauen, aber es funktioniert nicht.

vertical-align wirkt auf Table-Cell- oder Inline-Elemente - und auf letztere ganz und gar nicht so, wie Du es Dir vorstellst. Mache Dein <div> also per CSS zu einem Table-Cell-Element oder suche Dir einen anderen Lösungsansatz als vertical-align.

Cheatah