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

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

2010-04-03 Shawn

左50％没有把它放到我的链接的中心。 testing-zone-51.blogspot.com – Shawn 2010-04-03 10:43:54

好吧我解决了这个问题:) – Shawn 2010-04-03 11:00:55

因为你是一个新用户在这里请选择一个问题的最佳答案作为问题解决时接受的答案。它有助于指向其他人该解决方案为你工作，并给回答者的声誉 – 2010-04-03 11:12:40

使用纯CSS，你可以在所有的浏览器新

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

和IE6实现这一点，你可以用 position:absolute;，而不是固定的。它会将图像放置在页面的底部，但当您向上滚动时，图像将随页面一起滚动。遗憾的位置：固定不IE6

来源

2010-04-03 10:33:59

如果职位：绝对的作品，为什么打扰使用位置：固定在较新的浏览器？ – xandy 2010-04-03 10:36:27

@xandy：固定是一个对象相对于浏览器窗口的位置。绝对值是对象相对于其包含元素的位置 – 2010-04-03 10:43:49

@shawn：我看到了ur代码。尝试在div内的图像上使用ARR类，而不是div – 2010-04-03 10:50:07

支持你应该把它放到一个div，然后，想象你的形象是500像素宽：

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

来源

2010-04-03 10:55:18 fmsf

老问题，但这里是我想出了最好的解决方案。将图像放入容器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>

来源

2013-07-18 16:58:13 stuyam

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

回答

相关问题