對齊問題（圖像+文本）

我正在處理圖像庫，並且存在圖像下方對齊文本的問題。每當文本填滿多行時，圖像就會向上移動，這是我不想要的。這裏描述的問題的屏幕截圖：對齊問題（圖像+文本）

我剪出來的圖片，但你可以看到框架，使這個問題應該是清楚的。這裏是我的代碼：

<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

對齊問題（圖像+文本）

回答

相關問題