如何在表格的正确中心显示图像？

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确保它位于顶部。