html – 尝试使大背景图像保持居中,并以自动边距为中心的内容div

发布时间：2020-12-14 19:45:37 所属栏目：资源来源：网络整理

导读：我想要一个大于内容的背景图像,它将保持与内容居中,但不会影响布局(意味着没有滚动条来容纳背景图像).内容必须使用margin：auto;当视窗变得小于内容时,左侧将与视图窗格的左侧保持齐平. 我已经多次看过这个问题了,并且已经尝试了很多解决方案,但是没有一个已

我想要一个大于内容的背景图像,它将保持与内容居中,但不会影响布局(意味着没有滚动条来容纳背景图像).内容必须使用margin：auto;当视窗变得小于内容时,左侧将与视图窗格的左侧保持齐平.

我已经多次看过这个问题了,并且已经尝试了很多解决方案,但是没有一个已经接受的答案确实有效.

编辑澄清

这个问题仍然有点模糊,所以我会尝试用一些图片说明我需要什么.在这些图像中,绿色是背景图像,红色是主要内容,蓝色是浏览器的视图.

答：当视图窗口小于背景图像和主要内容时,内容的左侧与视图窗格的左侧保持齐平,背景图像保持居中于主要内容,视图窗格滚动条仅滚动出到主要内容的右边缘(而不是背景的右边缘).

B：当视图窗格大于背景图像和内容时,两者都保持在视图窗格的中心.

C：当视图窗格与主要内容的大小相同时,背景图像应保持居中于主要内容,不应存在滚动条.

解决方法

更新后的答案：我仍然花了太多时间在这上面:-),特别是当它结束如此简单时.它允许根据容器的高度调整背景大小,这似乎与yunzen的解决方案不同.现在确实使用margin：0 auto;.仍然随容器高度增长.

View the new answer.

你可以view the original,more complex answer不使用自动保证金.

HTML：

<div id="Bkg">
   <div id="Content">Content goes here. </div>
</div>

CSS：

#Bkg {
    width: 100%;
    min-width: 300px; /* equals width of content */
    background:url('http://dummyimage.com/400x20/ffff00/000000&text=Center') repeat-y top center;
    padding-bottom: 50px;
}

#Content {
    width: 300px;
    margin: 0 auto; 
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!