1

我正试图解决这个问题，但我并没有取得太多进展。我有一个自动缩放到任何窗口大小的背景图像。在它前面，我试图将始终固定在页面底部的图像居中，同时可扩展。这是我现在拥有的 CSS。

        #guys img{
            width:35%;
            margin-left:auto;
            margin-right:auto;
            bottom:0px;
            position: fixed;
        }

这就是我所说的DIV

    <div id="guys">
        <img src="img/boys.png" alt="">
    </div>

我最终得到的是固定在页面底部的图像，并且是可扩展的，但我从来没有能够以它为中心结束。有什么想法吗？我将不胜感激！

4

2 回答 2

1

正如我所看到的，您的图像已经在一个 div 中，使该 div 相对和边距自动与您的图像具有相同的宽度，一切都应该正常工作。

        #guys{
        position:relative;
        margin:auto;
        width:35%;

    }       
       #guys img{
        width:35%;
        bottom:0px;
        position: fixed;

    }
于 2012-09-11T02:40:18.863 回答
0

固定位置后，边距自动停止工作。

作为替代方案，您可以将 img 的 left 值设为 50%（将页面中心与图像左侧对齐），然后将 margin-left 设为 -17.5%，将图像的中心移动到页面的中心。

见我的jsfiddle。

摘抄：

#bottomCentered {

    left: 50%;
    margin-left: -17.5%; /* Half of the width */

    position: fixed;
    width:35%;
    margin-left:auto;
    margin-right:auto;
    bottom:0;
    position: fixed;
    display: inline-block;
    height: 20px;
    background: #00FF00;
}
于 2012-09-11T02:31:28.907 回答