Question

您好，我无法使用margin:0 auto;来设置div，我的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中居中，但这不是我做错了什么？

Answer 1

所有div都居中。唯一的问题是你的李被漂浮了。所以，让你的ul中心和看起来不错。

.mini ul {display:inline-block;}

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

Answer 2

在你的小提琴上你的.mini div在.content中居中，但是你没有集中你所拥有的内容.mini

您需要将保证金：0 auto css应用于UL，并将text-align：center应用于.mini

Answer 3

问题是您向max-width提供了.wrapper div。当浏览器的宽度小于1154px时，.wrapper的宽度将成为浏览器的宽度。如果您使浏览器窗口足够小，.wrapper的宽度将小于其子.content的宽度。如果父级小于子级，则margin: 0 auto无法执行自auto变为0以来的操作。

尝试将max-width转换为width，无论浏览器宽度如何，都可以按照您的意愿使用。

Answer 4

因为nav是一个html5元素，所以你必须先将它显示为一个块：nav {display：block;实际上，默认情况下未显示为块的任何元素都无法使用margin属性进行居中。大多数框架已经为您完成了这项工作，但您始终可以使用Eric Meyer's CSS Reset中的css重置代码。

在固定宽度div内以固定的div为中心

4 个答案: