对齐问题（图片+文字）答案

【问题标题】：Aligning problem (image+ text)对齐问题（图片+文字）
【发布时间】：2011-06-26 13:03:36
【问题描述】：

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

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

<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

【问题讨论】：

图像应该对齐，然后应该在图像下方添加另一行。现在，三行文本的三分之二图像比其他两行高。

标签： html css image alignment

【解决方案1】：

您的示例没有显示要查看的代码，但据我所知，您需要添加 line-height 属性以匹配您的 height 属性。

例如：

height:100px
line-height:100px;

另一种解决方案是用不同的 div 标签包装 text 和 image 标签，而不是共享一个 div，这样您就可以更好地控制每个标签的样式。

【讨论】：

【解决方案2】：

没关系在 tds 上设置这个 css 工作：

vertical-align: top;

【讨论】：

为什么人们对表格布局如此奇怪？无表格布局在 2002 年风靡一时，但您现代实用的 Web 开发人员不应该对一种技术与另一种技术大吵大闹。有利有弊，我就是这么说的。
@darkporter - 因为它不是语义化的并且被广泛认为是一种不好的做法 - webdesign.about.com/od/layout/a/aa111102a.htm
@darkporter，现代实用的网络开发人员应该知道如何使用 CSS 进行样式设置。如果他们不这样做，他们就不配获得这份工作。

【解决方案3】：

第 1000 次 次不要对非表格数据使用 f*^(%&*g 表格，我之前说过，我会说再一次，我会剥掉任何这样做的人，然后把它当作奖杯。

看在上帝的份上，2011 年使用 div 和 css！

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

【讨论】：

@AzaraT - 老实说，您正在使用网页设计领域中记录最多的“禁止”之一，只需极少甚至无需额外努力即可正确使用 DIV 和 CSS，从长远来看，通常会让您的生活更轻松。
@JCOC611 - 也许吧，但我已经回答了其他 3 个类似的问题，所有这些问题都以一种更温和的方式，所以我想我会做一个例子，当人们发布问题时看到在“类似问题”部分，他们可能只是看到了这一点，并看到了他们的方式的错误。过了一会儿它就变得烦人了：P虽然一切都很好，我现在很平静：D
我真诚地支持你，桌子很烂！哦，我很高兴你很冷静！ :D
@JCOC611 很高兴看到我有支持，我想我可能会做一个迷你网站，把桌子烧到地狱，每次人们做这种事情时都发布 URL...
你觉得怎么样，tablehell.com 还是 htmltablehell.com？两者都可用，或者更多 dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com - esque ;)