Question

我不明白为什么我的照片向左移动。如果我使用CTRL+F5刷新页面，则图片居中，正好在页面加载时我想要的位置。

我的HTML

<section id="showcase">
   <div id="container">
       <img src="billedarkiv/eaceramideprice.jpg" width="915" height="350">
   </div>
</section>

我的css

#container {
    width: 915px;
    margin: auto;
    overflow: hidden;
}

#showcase {
   margin-top: 0px;  
}

任何人都可以帮我吗？

Answer 1

您是否尝试过文本中心对齐？

#container {
    width: 915px;
    margin: auto;
    overflow: hidden;
    text-align: center;
}

Answer 2

将此添加到CSS中以将图像置于容器内。

#showcase #container {
    text-align: center;
}

Answer 3

我已将您的代码添加到jsFiddle以查看发生了什么。图像按预期在窗口中居中。

我相信你可能在展示上方的代码中的某处有一个未关闭的html标签。

您应该使用HTML validator service来验证代码的完整性。

另外我建议您使用类名而不是在HTML中使用ID。 ID应仅用于文档中的唯一元素。

例如：

<section class="showcase">
   <div class="container">
       <img src="billedarkiv/eaceramideprice.jpg" width="915" height="350">
   </div>
</section>

以及css：

.container {
    width: 915px;
    margin: auto;
    overflow: hidden;
}

.showcase {
   margin-top: 0px;  
}

Answer 4

我已经改变了

从容器到pic-container并添加了text-align：center;

现在它起作用了：S ..那是什么！

.pic-container {
text-align: center;

}

和

<section id="showcase">
        <div class="pic-container">
            <img src="billedarkiv/eaceramideprice.jpg" width="915" height="350">
        </div>
    </section>

任何人都有解决方案吗？：o

图像在页面加载时向左移动

4 个答案: