Question

我是网页设计的新手，我正在使用Phonegap（HTML5）我以这种方式水平居中我的图像：

html的

  <div id="loginholder" >

    <img id="image_person" src="img/icon_login.png" />
   ...

的CSS

    #image_person {
        display:block;    
        margin-left:auto;
        margin-right:auto;
        margin-top: 30px;
    }
     ...

    #loginholder{
        background-color: #29AAE1;
        height: 200px;
        width: 70%;  
        margin: 0 auto;
   }
   ...

请问为什么我的保证金不起作用？

Answer 1

您需要触发布局。添加溢出：隐藏到#loginholder

Answer 2

我将padding-top: 30px;添加到#loginholder，然后从margin-top: 30px;中移除#image_person：

<强> CSS

#image_person {
    display:block;
    margin-left:auto;
    margin-right:auto;
}

#loginholder {
    background-color: #29AAE1;
    height: 200px;
    width: 70%;
    margin: 0 auto;
    padding-top: 30px;
}

看看这个JSFiddle：http://jsfiddle.net/bazC4/。

另外，如果您希望#loginholder大小相同，只需从30px移除height即可height: 170px;。

Answer 3

尝试将其包装在div中：

的jsfiddle：

http://jsfiddle.net/MBLKs/

CSS：

   #loginholder {
    width: 300px;
    border: 1px solid red;
    overflow: hidden;
    position: relative;
}
#stabilizer {
    float: left;
    position: relative;
    left: 50%;
}
img {
    display: block;
    position: relative;
    left: -50%;
}

图像的行为与字符相似，因此输入它们并不总是有效。在这种情况下，包装div的位置和图像彼此偏移，使图像保持在中间。现在你的保证金最高，其他一切都应该有效。

Answer 4

边距可能会与父级折叠，导致30px边距显示在loginHolder div（more on margin collapsing）之上。要解决此问题，您可以执行以下操作之一：

向loginHolder添加border或padding;这将边缘分开，因此它们不会崩溃。
更改为在图片上使用padding-top而不是margin-top。

当图像水平居中时，边距顶部不起作用 - Phonegap

4 个答案: