Question

我有一个网站，我需要将图像置于可见页面底部的中心位置。因此，在任何屏幕尺寸中，图像仍然位于底部，并居中。

Answer 1

使用纯CSS可以在所有新浏览器中实现这一目标

.fix{
    position:fixed;
    bottom:0px;
    left:50%;
}
<img src="yourimagepath" class="fix"/>

对于IE6，您可以使用position:absolute;而不是固定。这会将图像定位在页面底部，但是当您向上滚动时，图像将随页面一起滚动。不幸的是，IE6中不支持position:fixed。

Answer 2

老问题，但这是我提出的最佳解决方案。将图像放在容器div中，div位于屏幕底部，图像位于屏幕内部。 div的设置宽度为100％，因此图像可以正确居中。要使margin:auto;正常工作，图片必须显示为包含display:table;

的表格元素

使用display:table;表示您不必为要居中的元素设置固定宽度。

    <style>
    .sticky-image-wrapper{
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .sticky-image-wrapper img{
        display: table;
        position: relative;
        margin: auto;
   }
   </style>

    <div class="sticky-image-wrapper">
       <img src="myimage.jpg" />
    </di>

Answer 3

你应该将它放入div中，然后想象你的图像是500px宽：

div.className{
position:absolute;
margin-left: -250px; /* very important for the image to be centered */
left:50%;
bottom:0px;
}

如何将图像粘贴到可见屏幕的底部并居中？

3 个答案: