0

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

我已经尝试将图像居中对齐，文本对齐（够傻的），甚至left: 50%. left: 50%确实有效，但由于图像的宽度超过 100 像素，因此徽标不再居中，即使图像的开头为 50%。

我想成功，left 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;
}
4

4 回答 4

1

如果您将元素定位为absolutethenmargin 0 auto将不起作用删除position: absolute;并添加display:block到JClogocss 类。

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

JsFiddle 演示

于 2013-11-12T14:07:07.407 回答
1

我认为 margin:0 auto 不适用于绝对定位。删除position:absoluteORleft:50%; margin-left:-195px上的位置.JClogo。

于 2013-11-12T14:07:55.567 回答
1

这应该可以满足您的需求：

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

        .JClogo
        {
            height: 194px;
            width: 389px;
        }
于 2013-11-12T14:07:59.760 回答
0

问题是由于以下代码：

position: absolute; // here
margin: 0 auto;
height: 194px;
width: 389px;

绝对位置使其在提供的参数处浮动。

所以试试这个，这将使图像浮动在元素的中心。

position: absolute;
top: 20%; // this 
left: 20%; // and this
height: 194px;
width: 389px;

这样，您将更改图像的参数并使其浮动到您想要的位置。如果您想以position: absolute;其他方式使用，您可以删除它并简单地使用margin: values.

于 2013-11-12T14:12:07.023 回答