表格單元格中圖像對齊的問題

我有一張表格，圖像下面有大約45張圖片和一些標題。我遇到的問題是，當圖像後面跟着一個大文本標題時，每個圖像都會正確對齊（請參閱4.jpg的標題）。當有多行文本時，頂部的圖像會略微推到行的其他圖像之上。我很難弄清楚爲什麼會這樣。表格單元格中圖像對齊的問題

這裏的表元素的第一行：

<table> 
    <tr> 
    <td><a href="photos/1.jpg" title="354 Address Way"><img src="photos/1_t.jpg" width="72" height="72" alt="" /></a>House</td> 
    <td><a href="photos/2.jpg" title="354 Address Way"><img src="photos/2_t.jpg" width="72" height="72" alt="" /></a>House</td> 
    <td><a href="photos/3.jpg" title="Foyer"><img src="photos/3_t.jpg" width="72" height="72" alt="" /></a>Foyer</td> 
    <td><a href="photos/4.jpg" title="Family Room with small fireplace"><img src="photos/4_t.jpg" width="72" height="72" alt="" /></a>Family Room with small Fireplace</td> 
    <td><a href="photos/5.jpg" title="Family Room 2"><img src="photos/5_t.jpg" width="72" height="72" alt="" /></a>Family Room 2</td> 
    </tr>

表CSS：

table { 
    width: 570px; 
    font-size: .5em; 
    text-align: center; 
} 

table td { 
    width: 128px; 
    padding: 0px 10px 0px 10px; 
} 

table img { 
    border: 5px solid #3e3e3e; 
    border-width: 2px 2px 2px; 
} 

table a:hover img { 
    border: 5px solid #fff; 
    border-width: 2px 2px 2px; 
    border-color: #8f8f8f; 
    color: #fff; 
}

我只是想圖像排隊均勻不管標題的長度。

來源

2013-02-18 Tim Aich

添加vertical-align:top規則，你的表格單元格。默認值是baseline，但是您希望將值設置爲最高。

table td { 
    width: 128px; 
    padding: 0px 10px 0px 10px; 
    vertical-align:top; 
}

jsFiddle example

來源

2013-02-18 03:34:35 j08691

真棒，非常感謝。 – 2013-02-18 03:47:55

默認情況下，表格單元格將垂直對齊到中間。只需將它們設置爲vertical-align: top，可能還需要一些額外的填充。

http://jsfiddle.net/LBb6B/

來源

2013-02-18 03:34:26

表格單元格中圖像對齊的問題

回答

相關問題