0

您好，我无法将 div 居中，margin:0 auto;我的 HTML 结构是这样的，

<div class="wrapper">  
    <div class="content">  
        <nav class="mini">  
            <!-- nav class mini content -->
        </nav>   
    </div>  
</div>

CSS看起来像这样，

    .wrapper {  
        width:1154px;
        margin:0 auto;
    }

.content {  
     width:906px;  
     margin:0 auto;  
     text-align:center;
}

.mini {
   width: 350px;  
   margin:0 auto;
}

我希望.mini以内心为中心，.content但这不是我做错了什么？

4

4 回答 4

1

你所有的 div 都居中。唯一的问题是您的 li 向左浮动。所以让你的ul中心看起来不错。

.mini ul {display:inline-block;}

小提琴演示：http: //jsfiddle.net/surendraVsingh/pYbAP/7/

于 2012-07-04T15:10:12.707 回答
0

在您的小提琴中，您的 .mini div 以 .content 为中心，但您没有将 .mini 中的内容居中

您还需要将 margin:0 auto css 应用到那里的 UL 并将 text-align:center 应用到 .mini

于 2012-07-04T15:09:01.260 回答
0

问题是你max-width给.wrapper div. 当浏览器宽度小于 1154px 时，.wrappers 宽度变为浏览器宽度。如果您使浏览器窗口足够小，则.wrappers 宽度会小于其子项.content的宽度。如果父母比孩子小，那么, 因为变成 0 margin: 0 auto，所以不能做它该做的事情。auto

尝试将max-widthinto width，它会像你想要的那样工作，在任何浏览器宽度下。

于 2012-07-04T15:10:34.640 回答
0

因为 nav 是一个 html5 元素，所以你必须先将它显示为一个块： nav{ display: block; 实际上，任何默认不显示为块的元素都不能通过使用 margin 属性来居中。大多数框架已经为您做到了，但您始终可以使用Eric Meyer 的 CSS Reset中的这个 css 重置代码。

于 2012-07-04T15:26:23.310 回答