div内的中心菜单 [英] Center menu inside div

问题描述

我无法在div内水平居中放置菜单.它已经垂直居中，但是如何使用CSS水平居中呢?感谢您的任何建议.

I cant center horizontally my menu inside my div. It is already centered vertically, but how can I center horizontally too with CSS? Thanks for any advice.

代码:

<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;
}

推荐答案

如果要遵循 display:table 方法，则必须清理CSS并使用 display:table; + margin:auto 和然后 display:table-cell; 和 vertical-align:middle; 使其正常运行: 演示

If you want to follow the display:table methode , you have to clean up your CSS and use display:table; + margin:auto and then display:table-cell; and vertical-align:middle; to make it work properly: DEMO

.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 */
}

这篇关于div内的中心菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！