Question

我正在加载Google DFP背景皮肤广告单元。我已经正确显示了它，但是一旦Web浏览器缩小到比图像宽度本身更小的宽度，我就无法使背景图像保持居中。相反，图像被挂在浏览的左侧并从右向左折叠，导致中心内容面板不再以背景图像为中心。

我的HTML代码是：

<div id="background-skin" class="desktop-ad">
<div id='div-gpt-ad-XXXXXXXXXXX-X'>
<script type='text/javascript'>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-XXXXXXXXXXX-X'); });
</script>
</div>
</div>

我使用的CSS是：

#background-skin {
position: fixed;
z-index: 1;
width: 100%;
height: 1600px;
margin-left: auto;
margin-right: auto;
top: 0px;
text-align: center;
}

Answer 1

获得所需效果的一种方法是将fixed包装器水平设置为50％，使用left，并且不需要宽度。让它与内容一起成长：

#background-skin {
    position: fixed;
    z-index: 1;
    height: 1600px;
    top: 0px;
    left: 50%;
}

然后，使用-50%和left将孩子置于position: relative;之前。类似的东西：

#background-skin > div {
    position: relative;
    left: -50%;
    ...

这样，容器就位于页面的正中间，内容将位于容器的正中间。

See this example fiddle

DFP背景皮肤 - 无法使其居中

1 个答案: