CSS中心 <ul> 在div問題中標記

Question

我試圖將UL標簽居中放置在DIV中，但是遇到了一些問題。 我已經嘗試了很多東西。 該代碼附在下面。 UL是一個水平列表。

<!-- Header -->
    <div id="header">
        <div class="container">

            <!-- Nav -->
                <nav id="nav">
                                            <ul>
                        <li <?php if($currenturl == 'index.php')  { ?>class="active"<?php } ?>><a href="index.php">Home</a></li>
                        <li <?php if($currenturl == 'limitededitions.php')  { ?>class="active"<?php } ?>><a href="limitededitions.php">Limited Editions</a></li>
                        <li <?php if($currenturl == 'left-sidebar.php')  { ?>class="active"<?php } ?>><a href="left-sidebar.php">Products</a></li>
                        <li <?php if($currenturl == 'services.php')  { ?>class="active"<?php } ?>><a href="services.php">Services</a></li>
                        <li <?php if($currenturl == 'suppliers.php')  { ?>class="active"<?php } ?>><a href="suppliers.php">Suppliers</a></li>
                        <li <?php if($currenturl == 'right-sidebar.php')  { ?>class="active"<?php } ?>><a href="right-sidebar.php">About</a></li>
                        <li <?php if($currenturl == 'no-sidebar.php')  { ?>class="active"<?php } ?>><a href="no-sidebar.php">Contact</a></li>
                        <li><a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_cart&amp;business=WEM898SE24RZL&amp;display=1">View Cart</a></li>
                    </ul>

                </nav>

        </div>
    </div>
<!-- Header -->


/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

#header
{
    position: relative;
    background: #FFF;
}

    #header .container
    {
        position: relative;
        padding: 3em 0em;
    }


/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/

#nav
{
    position: relative;
    top: 1em;
}

    #nav > ul > li
    {
        float: left;
    }

        #nav > ul > li:last-child
        {
            padding-right: 0;
        }

        #nav > ul > li > a,
        #nav > ul > li > span
        {
            display: block;
            padding: 0.80em 1.2em;
            letter-spacing: 0.06em;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 1.1em;
            outline: 0;
            color: #333;
        }

        #nav li.active a
        {
            background: #8B5A2B;
            border-radius: 5px;
            color: #FFF;
        }

        #nav > ul > li > ul
        {
            display: none;
        }

任何幫助將不勝感激！ 謝謝。

Answer 1

我無法完全說出您要如何確定這一點。 不過您的浮動余額沒有幫助，是100％必要嗎？ 無論如何，這里有一個Codepen向您展示了一種實現方式，但不確定是否是您想要的方式。

我假設這是常規導航，需要居中在頁面中間並內聯。

http://codepen.io/anon/pen/qEQodo

更改了CSS：

#nav {
    position: relative;
    top: 1em;
    text-align:center;
    margin:0 auto;
}

#nav > ul {
    margin:0 auto;
    text-align:center;
    position:relative;
    display:block;
}

#nav > ul > li {
    display:inline;
    list-style-type:none;
    margin:10px; 
}