在td單元格中定位文本和圖像

我的頁面上有三個表格，每個表格都有一行，裏面有三個數據單元格。在td單元格中定位文本和圖像

我的問題是，當向一個單元格添加文本時，儘管我已經定義了一個高度，但它正在增加表格的高度。我的第二個問題是將圖片放置在最後的（第三）數據單元中間。

#snake { 
 
    background-color: #c4df9b; 
 
} 
 
#bat { 
 
    background-color: #e2e2e2; 
 
    margin-top: 18px; 
 
    margin-bottom: 18px; 
 
} 
 
#monkey { 
 
    background-color: #c69c6d; 
 
} 
 
#monkeygraphic { 
 
    padding-top: 5px; 
 
} 
 
.animalcontainer { 
 
    width: 682px; 
 
    height: 200px; 
 
} 
 
.animalcontainer td { 
 
    border: 1px solid black; 
 
    width: 227px; 
 
    text-align: center; 
 
}

<div id="main-left"> 
 
    <table id="snake" class="animalcontainer"> 
 
    <tr> 
 
     <td> 
 
     <img src="images/snakegraphic.png" alt="Snake Graphic" title="Snake Graphic" width="155" height="196"> 
 
     </td> 
 
     <td>sad</td> 
 
     <td id="snakepic"> 
 
     <img src="images/snake.jpg" alt="Snake" title="Snake" width="152" height="152"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <table id="bat" class="animalcontainer"> 
 
    <tr> 
 
     <td id="batgraphic"> 
 
     <img src="images/batgraphic.png" alt="Bat Graphic" title="Bat Graphic" width="198" height="98"> 
 
     </td> 
 
     <td> 
 
     <h1>sad</h1> 
 
     </td> 
 
     <td id="batpic"> 
 
     <img src="images/bat.jpg" alt="Bat" title="Bat" width="152" height="150"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <table id="monkey" class="animalcontainer"> 
 
    <tr> 
 
     <td id="monkeygraphic"> 
 
     <img src="images/monkeygraphic.png" alt="Monkey Graphic" title="Monkey Graphic" width="207" height="185"> 
 
     </td> 
 
     <td> 
 
     <h1>sad</h1> 
 
     </td> 
 
     <td id="monkeypic"> 
 
     <img src="images/monkey.jpg" alt="Monkey" title="Monkey" width="152" height="150"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2014-12-23 Alex E

我傻，我剛剛學到的垂直對齊CSS的「東西」，這似乎已經整理我的問題。

感謝任何人誰讀了這個問題，雖然。

（修復：給我的中間td細胞一個類，並添加vertical-align：top;到css）

來源

2014-12-23 12:26:29

在td單元格中定位文本和圖像

回答

相關問題