gpt4 book ai didi

html - 为什么背景不在这里居中?

转载 作者:行者123 更新时间:2023-11-28 16:37:05 25 4
gpt4 key购买 nike

我希望此网站在移动设备上正确显示。

这是网站:Test

这是它在移动设备上的显示方式:Mobile image

这是我的代码:

CSS:

  #storia{
padding: 20px 0px 20px 0px;
text-align:center;
line-height: 1.2em;
background:url(img/homeback2.png) no-repeat;
background-position: center center;
height:700px;
}

#storiatesto1{
margin:0 auto;
margin-top: 15px;
width: 530px;
font-family: 'Courgette', serif;
font-size:14px;
}

#storiatesto2{
margin:0 auto;
width:450px;
font-family: 'Courgette', serif;
font-size:14px;
}

#doc { margin: 10px 0; }
#content {
margin: 0 auto;
margin-top: 75px; border: solid 1px #CCC; padding:7px; background:white;
width:530px;
}

.blueberry { max-width: 960px; }
.blueberry img { width:100%; }

html:

<body>

<div id="storia">

<div id="doc">
<div id="content">

<!-- blueberry -->

<div class="blueberry">
<img src="home.jpg" />
</div>

<!-- blueberry -->

</div>
</div>

<div id="storiatesto1">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ...
</div>


<div id="storiatesto2">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ...
</div>



</div>

</body>

最佳答案

因为您已经固定了宽度并且背景图像根据该宽度居中。尝试

    #storiatesto1{
margin:0 auto;
margin-top: 15px;
width: 80%;
font-family: 'Courgette', serif;
font-size:14px;
}
#storiatesto2{
margin:0 auto;
width:80%;
font-family: 'Courgette', serif;
font-size:14px;
}

也给有背景的容器一个背景尺寸,例如

      #storia{
padding: 20px 0px 20px 0px;
text-align:center;
line-height: 1.2em;
background:url(img/homeback2.png) no-repeat;
background-position: center center;
height:700px;
background-size:100% auto
}

关于html - 为什么背景不在这里居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26841294/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com