Question

我正在处理图片库，我在图像下方对齐文字时遇到了一些问题。每当文本填满多行时，图像就会向上移动，这是我不想要的。这是描述问题的屏幕截图：

我剪掉了图像，但你可以看到框架，所以问题应该清楚。这是我的代码：

<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;
}

任何提示？谢谢：D

Answer 1

别介意在tds上设置此css：

vertical-align: top;

Answer 2

对于 1000th 时间，不要对非表格数据使用 f * ^（％＆amp; * g 表格，我之前已经说过了，我会说再说一次，我会把任何做过这件事的人当成头皮，然后把它当成奖杯。

为了上帝的缘故，人们在2011年使用div和css！

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

Answer 3

您的示例未显示要查看的代码，但从我看到您需要添加行高属性以匹配您的height属性。

例如：

height:100px
line-height:100px;

另一个解决方案是将text和image标签分别包含一个不同的div标签，而不是同时共享div标签，这样你就可以更好地控制每个标签的样式。

对齐问题（图像+文字）

3 个答案: