Question

我有<table>，我希望在确切的中心<img>上显示<table>。

我该怎么做？

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会将宽度减小到宽度表而不是100％的容器。然后，您使用标准的top / left / margin技巧将图片定位在中心，并使用z-index确保图片位于顶部。

如何在桌子的正中心显示图像？

1 个答案: