Question

我正试图将这个div背景集中在www.bakoproduction.com。当我将margin: auto添加到css .div.background img时，它会使图像居中，但不显示其余图像。这是我的CSS，如果有人可以帮助我，我会非常感激。

<style type="text/css">
body {
    margin: auto;
    padding: 0;
    width: 100%;
    text-align: center;
}
.fondolineas {
    background-image: url(fondo.gif);
    background-repeat: repeat-x;
}
.demo-ad-top{
    margin:20px 0;
}
.gradient {
    background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0.28, rgb(255,201,116)),  color-stop(0.64, rgb(228,143,10)) );
    background-image: -moz-linear-gradient(  center bottom,  rgb(255,201,116) 28%,  rgb(228,143,10) 64% );
    width:300px;
    height:150px;
    padding:5px;
}

h1 {
    font:bold 14px/1.5em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
    text-transform:uppercase;
}
div.background {
    position: absolute;
    left: auto;
    top: auto;
    z-index: -1;
    alignment-adjust: central;
    background-position: center;
    text-align: center;
}
div.background img {
    position:fixed;
    list-style: none;
    left:auto;
    top:auto;
}
div.background ul li.show {
    z-index:500
}
.content {
    width:1200px;
    margin-left:auto
    margin-right:auto
    background:#fff;
    padding:30px;
}
</style>

Answer 1

试试这个

background:no-repeat;
background-image:url(../Images/Home/Banner.png);
background-position:center;

要包含或拉伸您的尺寸背景，您必须使用此

background-size: contain;

Answer 2

由于您使用的是auto，因此您的图片不会将其边距设置为position: fixed;。相反，请将left和right都设置为0。

div.background img {
    list-style: none;
    position: fixed;
      left: 0;
      right: 0;
      top: 0;
}

Answer 3

由于您img的位置固定在屏幕上，margin:auto不会将它们居中。试试这个：

div.background img {
    position:fixed;
    left:50%;
    top:auto;
    margin-left:-600px; /* Half of the image's width */
}

如何将此<div> </div>居中

3 个答案: