html - 无法将图像置于 div 中

Question

我的页面上有一个顶部 div，但在我的导航上方。我想要这个 div 中间的公司 Logo 。但是，margin: 0 auto 不起作用。我试过摆弄 div 定位是绝对的，图像是相关的，反之亦然。

我试过图像居中对齐、文本对齐(够傻)，甚至 left: 50%。 left: 50% 确实有效，但由于图像的宽度超过 100px，因此 Logo 不再居中，即使图像的开头位于 50%。

我想让它 剩余 30% 但这在所有屏幕尺寸上都不公平。我只是不知道如何在 div 的中心制作这个图像。有谁知道我该怎么做？

HTML

<div id="stripes">
    <img src="JCC.gif" class="JClogo" />
</div>
<div id="navigation">

CSS

#stripes
{
    width: 100%;
    height: 185px;
    background-image: url('stripes.png'); 
}


.JClogo
{
    position: absolute;
    margin: 0 auto;
    height: 194px;
    width: 389px;
}

Answer 1

如果您将元素定位为 absolute，则 margin 0 auto 将不起作用删除 position: absolute; 并将 display:block 添加到 JClogo css class。

.JClogo{
   margin: 0 auto;
   height: 194px;
   width: 389px;
   display:block;
}

JsFiddle Demo