对齐问题（图像+文本）

我正在处理图像库，并且存在图像下方对齐文本的问题。每当文本填满多行时，图像就会向上移动，这是我不想要的。这里描述的问题的屏幕截图：对齐问题（图像+文本）

我剪出来的图片，但你可以看到框架，使这个问题应该是清楚的。这里是我的代码：

<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

来源

2011-02-13 AzaraT

反而会发生什么？ – thirtydot 2011-02-13 18:50:59

图像应该对齐，然后应该在图像下添加另一行。现在，具有三行文本的三分之二图像比另外两行更高。 – AzaraT 2011-02-13 18:58:02

决不介意设置在TDS这个CSS工作：

vertical-align: top;

来源

2011-02-13 19:09:10 AzaraT

对于第1000时间不使用F * ^（％& * G表用于非表格数据，我以前说过，我会说这，我再次将头皮任何人做这个，然后穿着它作为战利品。

看在上帝的份上的男人是2011使用的div和css！

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

来源

2011-02-13 18:49:21

这是非常有益的，谢谢-.- – AzaraT 2011-02-13 19:00:08

您的例子没有演示代码来看待，但是，从我看到你需要添加一个line-height属性，以配合您height属性。

例如：

height:100px 
line-height:100px;

另一个解决办法是换行文本和图像标记每一个不同的div标签，而不是两者共享的div一个，这样你对你如何样式每个更多的控制他们。

来源

2011-02-13 19:55:29 Hussein

对齐问题（图像+文本）

回答

相关问题