将div margin定位在顶部30px,但使用margin auto将margin保持在中心



我在让我的div向下移动30像素/在div顶部添加30像素的边距时遇到问题。我的div使用margin-auto在页面的中心对齐。

但是,当我尝试添加这行代码时:边距:30px自动0自动;

没有显示上边距?有人能告诉我我做错了什么吗?谢谢,

#content_other{
width:790px;
height: auto;
font-family: 'Arial Narrow', Tahoma, Verdana, Arial Narrow, sans-serif;
font-size:12px;
margin: 30px auto 0 auto;
position:relative;
overflow: hidden;
padding:20px;
background:#fff;
border: 1px solid #999;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

}

html:

<div id="content_other">
<html form here>
</div>

您的代码没有任何问题。看看这个JSFiddle。边距添加到顶部我使用了这个HTML

<div id="content_other">
    <form>
        <input type="text" />
    </form>
</div>

如果页面上的其他内容正在影响您的整个页面CSS,请尝试在margin-top中添加一个重要内容来提升它,并覆盖其他可能会取消该规则的内容。

margin: 30px auto 0 auto !important;

它取决于它周围的容器,所以我们需要看到完整的HTML。你可以添加一个内部包装并使其浮动:

<div id="content_other">
    <div id="float-wrap">
        <html form here>
    </div>
</div>
#float-wrap {
    float: left;
    width: 100%;
    margin-top: 30px;
}

最新更新