如何在表格的正確中心顯示圖像？

Question

我有一個<table>，我希望通過<table>在正確的中心顯示<img>。

我該怎麼做？

Answer 1

如果圖像的尺寸是固定的（比如，寬度200高度300），那麼這樣的事情應該工作：

HTML：

<div id="table-and-image-container"> 
    <table id="the-table">...</table> 
    <img src="..." id="the-image" /> 
</div> 

CSS：

#table-and-image-container 
{ 
    position: relative; 
    display: inline-block; 
} 
#the-table 
{ 
    z-index: 1; 
} 
#the-image 
{ 
    left: 50%; 
    margin-left: -100px; /* = 200px width of image/2 */ 
    margin-top: -150px; /* = 300px height of image/2 */ 
    position: absolute; 
    top: 50%; 
    z-index: 2; 
} 

包含#table-and-image-container將是表格的大小，因爲position: absolute將採用#the-image超出尺寸算法和display: inline-block w生病將寬度減少到表的寬度而不是100％的容器。然後，您使用標準top/left/margin技巧將圖像放置在中心位置，並使用z-index確保它位於頂部。