漂浮在CSS的中心？

Question

如何在CSS中居几个框？假设我有一个div“导航”。现在，导航边距是自动，也就是说，它位于中心，如何在导航中添加列表（display:inline）以扩展导航双方。我没有设置width属性，因此宽度将动态扩展。它就像float :center。

Answer 1

设置margin:auto和width:940px，您就完成了。您可以根据需要更改宽度。但是给予一定宽度是必须的。

检查这个小提琴并告诉我它是否对你有帮助。 http://jsfiddle.net/JNMZ3/4/

您可以更改li元素的填充以获得更多空间。然后调整导航div的宽度以使其保持在中心位置。

Answer 2

试试这个 你的css替换为

http://jsfiddle.net/JNMZ3/3/

.navigation li{
    margin: 3px 6px 3px 6px;
    display: inline;
    border: 2px solid black;
    padding: 2px;
    zoom:1;
    width:auto;
}

Answer 3

这是一个有效的one。

使用 margin：0 auto; 将使您的元素在大多数时间居中。 （快速注意：您的元素必须具有声明的宽度才能生效。）

margin：0 auto; 规则是0上下边距以及自动左右边距的简写。自动左右边距一起工作，将元素推入容器的中心。

margin：0 auto; 设置在每个居中情况下都不能完美运行，但它可以在很多场景中运行。
参考：You Can't Float Center with CSS  

的 HTML

<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>

<强> CSS

.leftsidebar 
{ 
height: 608px; 
width: 100px; 
background:red; 
float:left; 
} 

.rightsidebar { 
background:blue; 
height: 608px; 
width: 100px; 
float:right; 
} 

.content { 
width: auto; 
margin:0 auto;
background:yellow; 
height:608px; 
}