Markus: css + vertical-align

I created a table using div's. And now I encounter the problem that it seems impossible to vertically center a picture in the left column.

One row of my table looks like this:
------------------------------------------------------
<div style="padding:5px;">

<div id="left" style="float:left; width:200px; text-align:center; margin-top:10px;">
<a style="border-style:none;" href="home.html">
<img src="/home/markus/loko.jpg" id="logo" border="0"
</a>

</div>

<div id="content" style="float:left; width:300px; margin-left:5px;">
Text
</div>

<div id="right" style="float:left; width:70px; margin-left:20px;">
Text
</div>

<br style="clear:left;">
</div>
----------------------------------------------

The link (the picture) is centered horizontally.
How can I get it centered vertically too?
When I add "vertical-align:middle" to the left div nothing happens.

  1. @@Markus:

    I created a table using div's.

    Das ist Quatsch. Entweder du hast tabellarische Daten, dann ist 'table' & Co. das Markup der Wahl.

    Oder du hast keine tabellarischen Daten, dann hast du keine Tabelle, sondern evtl. auf der Seite positionierte Boxen.

    When I add "vertical-align:middle" to the left div nothing happens.

    Works as designed: “'vertical-align' […] Applies to: inline-level and 'table-cell' elements” [CSS21]

    Im Archiv dutzendfach zu finden. Lösungen auch.

    Live long and prosper,
    Gunnar

    --
    “New Jersey Hall of Fame? […] But then I ran through the list of names: Albert Einstein, Bruce Springsteen... my mother's going to like that. […] it's the only time she's going to hear those two names mentioned in the same sentence, so I'm going to enjoy it.” (Bruce Springsteen when inducted into the New Jersey Hall of Fame, 2008-05-04)
  2. hoi,

    to make something vertical center in div with css, is not that easy.

    Take a look at this example/solution:

    http://blog.termi.lv/blog/elements-vertikali-pa-vidu/

    and how it looks

    http://blog.termi.lv/storie/testing/center_block/center.html

    Inita

    1. hoi,

      oder kann man dieses beispiel auch anschauen:

      http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html

      Inita