中心菜单在div内

Question

我不能在我的div内水平地调整我的菜单。它已经垂直地居中了，但是我如何用CSS水平地居中呢？谢谢你的建议。

代码：

<div class="container-2">
            <div class="menu">
                <ul class="navbar-header nav menu-nav">
                    <li><a href="1.html">1</a></li>
                    <li><a href="2.html">2</a></li>
                    <li>logo</li>
                    <li><a href="3.html">3</a></li>
                    <li><a href="4.html">4</a></li>
                </ul>
                </div>
            </div>

CSS：

.menu{
display: inline-block;
margin: auto auto;
position: relative;
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;}


.container-2{
    width: 100%;
    display: table;
    background:rgba(255,255,255,0.755);
    position: absolute;
    height: auto;   
}


.menu-nav{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

如果您想遵循display:table方法，则必须清理CSS，使用display:table; + margin:auto和，然后使用 display:table-cell;和vertical-align:middle;使其正常工作：演示

.menu{
margin: auto auto;
display: table;
height: 100px;
text-align: center;
}
.menu-nav{
    background:rgba(255,255,255,0.755);
    padding:0;
    display:table-cell;
    vertical-align: middle;
}
.menu-nav li{
display:inline-block;/* whatever you wanna do with your li */
}

Answer 2

编辑CSS代码如下：

JSFiddle (来源)

.menu{
    display: inline-block;
    margin: auto auto;
    position: relative;
    vertical-align: middle;
    height: 100px;
    text-align: center;
}


.container-2{
    width: 100%;
    display: table;
    background:rgba(255,255,255,0.755);
    position: absolute;
    height: auto;
    text-align: center;
}


.menu-nav{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

因此，您需要将text-align: center;添加到.container-2并从.menu中删除display: table-cell;。

更新:垂直中心

您可以简单地尝试一下：

JSFiddle (来源)

.menu{
    height: 100px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Opera, Chrome, and Safari */
}

.container-2{
    width: 100%;
    background:rgba(255,255,255,0.755);
    position: relative;
    height: auto;   
    text-align: center;
    height: 400px;
}

第三解

JSFiddle (来源)

HTML

<div class="container-2">
    <div class="menu">
        <div class="menu_inside">
            <ul class="navbar-header nav menu-nav">
                <li><a href="1.html">1</a></li>
                <li><a href="2.html">2</a></li>
                <li>logo</li>
                <li><a href="3.html">3</a></li>
                <li><a href="4.html">4</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

.menu{
    margin: auto auto;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    height: 100px;
    text-align: center;
}

.menu_inside{
    display: inline-block;
}

.container-2{
    width: 100%;
    display: table;
    background:rgba(255,255,255,0.755);
    position: absolute;
    height: 300px;
}

.menu-nav{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Answer 3

这里有一个JSFiddle：http://jsfiddle.net/5V6gK/

CSS代码：

.menu {width:100%; text-align:center;}
.menu li {float:left; margin:0 10px;}
.menu ul {float:none; clear:both; width:auto; margin:0 auto; list-style-type:none; display:inline-block;}

您需要为.menu类提供一个完整的宽度。内部元素(<ul>)应该有width:auto; display:inline-block; margin-right:auto; margin-left:auto;。

列表项应在彼此之间浮动。