1

我试图让“sp”和“bg” div 始终居中，但我似乎做不到。它居中，直到窗口的宽度超过图像的宽度。之后，图像停留在页面的左侧。我想要改变的是图像应该以所有宽度移动到页面的中心。理想的答案是保持位置：绝对。

谢谢！

<div id="slider-wrapper">
    <div id="slider">
            <div class="bg"> <width="100%" height="100%"/></div>
            <div class="sp"> <img src="../imgs/01_done.png" width="100%" height=100%"/></div>
    </div>
</div>

CSS：

#slider-wrapper{display:none;height:100%;position:fixed;width:100%;z-index:1000000}
#slider {position:fixed;width:100%;height:100%}
#slider .bg {position:absolute; max-height: 100%; display: none;} 
#slider .sp {position:absolute;z-index:10000; max-height: 100%; display: none;}

编辑：减少一些代码以使其更简单。

4

4 回答 4

1

就这么简单：

.bg, .sp {margin: 0 auto; width: n px;}
于 2013-11-04T19:15:15.033 回答
0

试试这个：http: //jsfiddle.net/sHnmx/

.bg, .sp {margin: 0 auto; width: 10%;}

并以像素为单位给出 css 中的图像宽度（代替宽度，给出图像的宽度）。

于 2013-11-05T11:51:58.910 回答
0

CSS

首先，清理 CSS 并摆脱绝对定位，这在以后的开发中成为一个真正的痛苦。<--除非绝对必要

清理 HTML 删除容器 为什么会有这些？如果它在 CSS 中，您不需要重新声明 100%。此外，%'s 的问题是他们需要像 1000px 这样的参考来知道相对于什么进行缩放。

CSS

#slider-wrapper{
clear:both;
position: relative;
max-width: 1000px;
width: 100%;
}

#slider{
    position: relative;
    width:100%
    height:100%
    }

    .sp,
    .bg {
    width:100%; 
    height:100%;
    margin: 0 auto;
    }
于 2013-11-04T19:16:18.587 回答
0

如果要使 css 中的元素居中，可以使用以下margin子句：

#centred
{
margin-left: auto;
margin-right: auto;
width:100px;
}

至于背景，如果你想要元素的背景，你也可以使用上面的代码，并定义height属性。

希望这可以帮助 ：）

于 2013-11-04T19:12:41.927 回答