开发者

Aligning problem (image+ text)

I'm working on an image gallery, and I have some problems with aligning of text below the images. Whenever the text fill up more than one line the image gets moved up, which I do not want. Here's a screenshot describing the problem:

Image of problem

I've cut out the images, but you can see the frame so the problem should be clear. Here's my code:

<table style="padding:10px; width:500px;">
  <tr>
    <td style="padding-right:10px;">
      <div style="width:150px; margin-left:0px;" class="photo_frame">
        <a href="album.php?id=1" title=""><img width="150px" src=
        "images/photos/thumb_6512bd43d9caa6e02c990b0a82652dca.jpg" alt=
        "" /></a>
      </div>

      <p class="photo_total" style="margin-left:2px;"><a class=
      "album_title" href="album.php?id=1">test</a><br />
      22 photos.</p>
    </td>

    <td style="padding-right:10px;">
      <div style="width:150px; margin-left:0px;" class="photo_frame">
        <a href="album.php?id=2" title=""><img width="150px" src=
        "images/photos/thumb_d82c8d1619ad8176d665453cfb2e55f0.jpg" alt=
        "" /></a>
      </div>

      <p class="photo_total" style="margin-left:2px;"><a class=
      "album_title" href="album.php?id=2">Here's an test album</a><br />
      8 photos.</p>
    </td>

    <td style="padding-right:10px;">
      <div style="width:150px; margin-left:0px;" class="photo_frame">
        <a href="album.php?id=3" title=""><img width="150px" src=
        "images/photos/thumb_fc490ca45c00b1249bbe3554a4fdf6fb.jpg" alt=
        "" /></a>
      </div>

      <p class="photo_total" style="margin-left:2px;"><a class=
      "album_title" href="album.php?id=3"开发者_如何学运维>AzaraT @ Static
      Underground</a><br />
      3 photos.</p>
    </td>
  </tr>
</table>

CSS:
.album_title {
    font-weight:bold;
    font-size:10px;
}

.photo_total {
    margin-top:5px;
    font-size:10px;
    color:#969696;
}

Any hints? Thanks :D


Never mind setting this css on the tds worked:

vertical-align: top;


For the 1000th time don't use f*^(%&*g tables for non-tabular data, I've said it before and I will say it again I will scalp anyone that does this and then wear it as a trophy.

For god's sake man it's 2011 use divs and css!

http://css-discuss.incutio.com/wiki/Why_I_think_divs_are_better_than_tables


Your example doesn't show a code to look at but, from what i see you need to add a line-height property to match your height property.

ex:

height:100px
line-height:100px;

The other solution is to wrap the text and image tag each with a different div tag instead of both sharing div one, that way you have more control on how you can style each of them.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜