Question

我遇到导航中心问题。尝试了所有可能的方法。无法居中。想知道可能会有什么影响？我是否只需要定位.nav？还是容器呢？ My website：
HTML

    <div id="navcontainer">
    <a class="toggleMenu" href="#">Menu</a>
    <ul class="nav">
    <li  class="test">
    <li><a href="index.html" id="current">PRADŽIA</a></li>
    <li><a href="apie.html">APIE MUS</a></li>
    <li><a href="kainos.html">KAINOS</a></li>
    <li><a href="asmenines.html">ASMENINĖS</a>
    <ul>
    <li><a href="#">Asmeninė fotosesija</a></li>
    <li><a href="#">Poros fotosesija</a></li>
    <li><a href="#">Šeimos fotosesija</a></li>
    <li><a href="#">Nėščiosios fotosesija</a></li>
    <li><a href="#">Vaikų fotosesija</a></li>
    <li><a href="#">Draugų fotosesija</a></li>
    <li><a href="#">Erotinė fotosesija</a></li>
    <li><a href="#">Švencių fotosesija</a></li>
    <li><a href="#">Modelio testas</a></li>
    </ul>
    </li>
    <li><a href="kurybines.html">KŪRYBINĖS</a></li>
    <li><a href="atsiliepimai.html">ATSILIEPIMAI</a></li>
    <li><a href="kontaktai.html">KONTAKTAI</a></li>
    </li>   
    </ul>
    </div>
    </div><!--/navcontainer-->

    CSS
    /*---- NAVIGATION -------*/
    #navcontainer{
    float: left;
    width:100%;
    padding: 10px 0 10px 0;
    font-size:1.2em;
    background: #ccc;
    }

    .toggleMenu {
    display:  none;
    padding: 10px 15px;
    color: #fff;
    background:#383636;
    }
    .nav {
    list-style: none;
    *zoom: 1;
    background: blue;
    margin: 0 auto;
    }

    .nav:before,
    .nav:after {
    content: " "; 
    display: table; 
    }

    .nav:after {
    clear: both;
    }
    .nav ul {
    display: inline-block;
    list-style-type: none;
    width: 9em;
    }

   .nav a {
    display: inline-block;
    padding: 10px 15px;
    color:#383636;
    text-decoration:none;
    }

    .nav li {
    position: relative;
    display: inline;
    }

    .nav > li {
    float: left;
    }

    .nav > li > .parent {
    background-repeat: no-repeat;
    background-position: right;
    }

    .nav > li > a {
    display: block;
    }

    .nav li  ul {
    position: absolute;
    left: -9999px;
    }

    .nav > li.hover > ul {
    left: 0;
    }

    .nav li li.hover ul {
    left: 100%;
    top: 0;
    }

    .nav li li a {
    display: block;
    background: #efefef;
    position: relative;
    z-index:100;
    border-top: 1px solid #ccc;
    }

    #navcontainer ul li a:hover{
    color: #fff;
    background: #ccc;
    }

    #navcontainer ul li a#current{
    color: #fff;
    background: #ccc;
    }

Answer 1

尝试将此添加到您的NAV-CONTAINER：margin:0px auto;

Answer 2

试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
        /*---- NAVIGATION -------*/
        #navcontainer{
        width:100%;
        padding: 10px 0 10px 0;
        font-size:1.2em;
        background: #ccc;
        margin: 0 auto;
            text-align: center;
        }

        .toggleMenu {
        display:  none;
        padding: 10px 15px;
        color: #fff;
        background:#383636;
        }
        .nav {
        display: inline-block;
        list-style: none;
        background: #AE4532;
        }

        ul {
        display: inline-block;
        list-style-type: none;
        width: auto;
        }

       .nav a {
        display: inline-block;
        padding: 10px 15px;
        color:#3EBD36;
        text-decoration:none;
        margin: 10px
        }

        li {
            position: relative;
/*            display: inline;*/
            float: left;
        }

        .nav li  ul {
        position: absolute;
        width: 100%;
        left: -9999px;
        }

        </style>
    </head>
    <body>
        <div id="navcontainer">
            <a class="toggleMenu" href="#">Menu</a>
            <ul class="nav">
                <li><a href="index.html" id="current">PRADŽIA</a></li>
                <li><a href="apie.html">APIE MUS</a></li>
                <li><a href="kainos.html">KAINOS</a></li>
                <li><a href="asmenines.html">ASMENINĖS</a>
                <ul>
                    <li><a href="#">Asmeninė fotosesija</a></li>
                    <li><a href="#">Poros fotosesija</a></li>
                    <li><a href="#">Šeimos fotosesija</a></li>
                    <li><a href="#">Nėščiosios fotosesija</a></li>
                    <li><a href="#">Vaikų fotosesija</a></li>
                    <li><a href="#">Draugų fotosesija</a></li>
                    <li><a href="#">Erotinė fotosesija</a></li>
                    <li><a href="#">Švencių fotosesija</a></li>
                    <li><a href="#">Modelio testas</a></li>
                </ul>
                </li>
                <li><a href="kurybines.html">KŪRYBINĖS</a></li>
                <li><a href="atsiliepimai.html">ATSILIEPIMAI</a></li>
                <li><a href="kontaktai.html">KONTAKTAI</a></li>
            </ul>
        </div>
    </body>
</html>

如何集中我的导航

2 个答案: