CSS在div问题中居中<ul>标签

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% 必要的吗？无论如何，这里有一个代码笔向您展示一种方法，但不确定它是否是您想要的方式。

我假设它是一种传统的导航，需要在页面中间居中并内联。

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