Question

我正在尝试将包含ul菜单的菜单放在中心。

菜单向左浮动，我似乎无法将菜单置于屏幕中央。

HTML

<section>
    <nav>
        <ul> 
            <li><a href='#'>item1</a></li>
            <li><a href='#'>item2</a></li>
            <li><a href='#'>item3</a></li>
            <li><a href='#'>item4</a></li>
            <li><a href='#'>item5</a></li>
        </ul>
    </nav>
</section>

CSS

nav ul{
    display: inline-block;
    background-color: red;
}
nav ul li{
    list-style: none;
    font:bold .6em arial;
    float: left;
    margin: .3em;
    padding: 1.3em;
    background-color: #A8A8A8;
}

//the and margin text align doesn't seem to work...
section {
   text-align:center;
   margin:0 auto;
}

任何人都可以帮我吗？非常感谢！

Answer 1

正如xec所指出的，问题似乎是无效的注释语法。 CSS中注释的正确语法是/*Comment Here */。当注释语法得到纠正后，您的代码会使菜单居中。

/*the and margin text align doesn't seem to work...*/
section {
   text-align:center;
   margin:0 auto;
 }

Demo

Answer 2

您没有为nav设置样式。 nav内的section是一个块，因此无论您是否为容器margin:0 auto，它都将是其容器的整个宽度。

解决方案：为nav提供与section相同的样式。或者，完全删除section，因为这里没有必要。

Answer 3

如果您不特别关心IE 7及以下版本（仅对inline-block提供部分支持 - 请参阅http://caniuse.com/inline-block），这可行，并且具有使链接更容易被击中的优势：http://jsfiddle.net/V97tR/1/

nav
{
    text-align:center;
}

nav ul{
    display: block;
    background-color: red;
}
nav ul li{
    display:inline-block;
    list-style: none;
    font:bold .6em arial;
    margin: .3em;
    background-color: #A8A8A8;
}

nav ul li a
{
    display:block;
    padding: 1.3em;
}

Answer 4

您可以使用flex-box：

section {
   text-align:center;
   margin:0 auto;
   display: flex;
 }

这是一个小提琴：http://jsfiddle.net/2c8LB/

Answer 5

试试这个：

JSFiddle

#wrapper {
    float:left;
    width:100%;
    background:#fff;
    overflow:hidden;
    position:relative;
}
nav ul {
    clear:left;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
    text-align:center;
}
nav ul li {
    list-style: none;
    font:bold .6em arial;
    float: left;
    background-color: red;
    display:block;
    list-style:none;
    margin:0;
    padding:5px;
    position:relative;
    right:50%;
}
nav ul li a {
    display:block;
    margin:0 0 0 1px;
    padding:3px 10px;
    background:#ddd;
    color:#000;
    text-decoration:none;
    line-height:1.3em;
}

Answer 6

喜欢这个

<强> DEMO

<强> CSS

nav ul{
    display: inline-block;
    background-color: red;
    margin:0;
    padding:0;
}
nav ul li{
    list-style: none;
    font:bold .6em arial;
    float: left;
    margin: .3em;
    padding: 1.3em;
    background-color: #A8A8A8;
}

/*the and margin text align doesn't seem to work...*/
section {
   text-align:center;
   margin:0 auto;
 }

如何将浮动元素居中？

6 个答案: