Question

我的页面上有一个顶级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;
}

Answer 1

如果您将元素定位为absolute，那么margin 0 auto将无效移除position: absolute;并将display:block添加到JClogo css类。

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

JsFiddle Demo

Answer 2

我不认为保证金：0自动将使用绝对定位。删除position:absolute上的left:50%; margin-left:-195px或地点.JClogo。

Answer 3

这应该做你想要的：

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

        .JClogo
        {
            height: 194px;
            width: 389px;
        }

Answer 4

问题在于：

处的代码

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。

无法将图像置于div内

4 个答案: