Home

Vertical alignment of DIVs?

Wed, 2006.11.01 - 17:32 — müzso
I tried it hard, but I cannot get a DIV inside another DIV to be aligned vertically in the middle. Sad

The code looks like this:
<table id="acidfree-main">
  <caption></caption>
  <tbody>
  <tr class="none odd">
    <td class="album-cell">
      <div class="fullslide" style="width: 160px;">
        <div class="folder" onclick='document.location="http://muzso.hu/node/9999999"'>
          <span></span>
          <a href="http://muzso.hu/node/9999999">
            <img src="/dfiles/public/active/1/540_thumb.jpg" alt="image title" title="image title" class="album-thumb" id="acidfree-thumb9999999">
          </a>
        </div>
        <div>Budapest</div>
      </div>
    </td>
  </tr>
</table>

This is generated by the Acidfree Drupal module and I can use only styles to alter its layout (of course I could dig into the code too, but I don't want to). The innermost DIV (the one with the "folder" class) contains an image and the problem is that this DIV is aligned vertically at the top of the "fullslide" DIV and not in the middle. I could not make it to align to the middle. Shock I'd be most grateful if someone could help me out with this.

The class definitions are like this (at the moment):
div.folder {
    display: block;
    margin: auto;
    padding: auto;
    width: 125px;
    height: 125px;
    border: none;
    vertical-align: middle;
    text-align: center;
    background: none;
    cursor: pointer;
}

div.fullslide {
    margin: auto;
    padding: auto;
    border: none;
    vertical-align: middle;
    text-align: center;
}

img.album-thumb {
    margin: 0px;
    vertical-align: middle;
    border: 1px solid #ccc;
    padding: 2px;
    height: auto;
}