Question

<div class="wrapper">
    <nav class="main-menu">

        <div class="main-menu-placeholder">
            <div class="main-menu-wrapper">
                <ul class="top-main-menu load-responsive" rel="Main Menu">
                    <li><a href="index.php">ANASAYFA</a></li>
                    <li><a href="detay.php">İÇİNDEKİLER</a></li>
                    <li><a href="detay.php">EDİTÖR</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

这是我的代码，我要问的是什么。我已经尝试了一切让它居中但我无法做到。有什么解决方案吗？

Answer 1

DEMO

这是一个垂直和水平居中的解决方案，因为你没有提到......它背后的基本思想是将position:relative的div放到一个absolute位置}

    .wrapper {
    position:absolute;
    width:100%;
        vertical-align:center;
    line-height:70px;
    height:70px;
    background:black;
}


.main-menu {
    position:relative;
    width:70%;
    background:#FE4C03;
    line-height:35px;
     margin: 0 auto;
}
li,ul{
    list-style-type:none;
    display:inline;
    margin:0 0;
}

Answer 2

这对您来说可能是一个简单的解决方案：

<div class="main-menu-wrapper">

.main-menu-wrapper {
    display:table;
    margin:0 auto 0 auto;
}

如何使菜单居中？

2 个答案: