Question

我正试图用margin 0 auto属性显示div内的图像。现在我面临的问题是，在大屏幕中，图像正在变细，而在小屏幕中则是向左移动更多左边的空间。我不知道为什么会发生这种情况..

这是HTML ..

 <div id="headerbodyimage" class="headerbody-wrapper">

 </div>

这是css ..

.headerbody-wrapper {
background: url("../images/banner.jpg");
float: left;
margin-top: 77px;
height: 242px;
position: inherit;
width: 100%;
z-index: 60001; }

所以我的问题是如何在所有浏览器中居中这个div图像。请帮帮我。

Answer 1

据我所知，你的问题是在背景位置

所以你的CSS必须是

.header-wrapper {
background: url("../images/header_bg.png") repeat-x scroll 50% 0 rgba(0, 0, 0, 0);
float: left;
height: 77px;
margin: 0 auto;
position: absolute;
width: 100%;
z-index: 60001; }

Answer 2

最好的情况是，带有边距0的元素是否具有固定宽度（无百分比）。和位置绝对和保证金不起作用。所以我删除了绝对的位置。如果你的div的宽度是100％，那么它周围的边距不能居中，因为它总是100％。并且没有居中的空间。

这有效。

.header-wrapper {
    background: url("../images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    height: 77px;
    margin: 0 auto;
    width: 300px;
}

如果你需要在更大的屏幕上让你的div更大。您可以添加媒体查询。请参阅下面的示例...或者您将使用定义元素宽度的包装器。

@media all and (min-width: 699px) {
 .header-wrapper {
        background: url("../images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
        height: 77px;
        margin: 0 auto;
        width: 700px; /* bigger here */
    }
}

保证金0自动不以小屏幕为中心问题

2 个答案: