在自身内部居中下拉菜单

Question

这是我的场景

（页面末尾的JsFiddle链接）

我想在同一个栏中将“主页”、“类别”、“工作”、ecc ecc 按钮居中。

换句话说，现在在左侧；我想把它居中。

<nav id="menu-wrap">    
    <ul id="menu">
        <li><a href="/">Home</a></li>

        <li>
            <a href="">Categories</a>
            <ul>
                <li>
                    <a href="">CSS</a>
                    <ul>
                        <li><a href="">Item 11</a></li>

                        <li><a href="">Item 12</a></li>
                        <li><a href="">Item 13</a></li>
                        <li><a href="">Item 14</a></li>
                    </ul>               
                </li>
                <li>
                    <a href="">Graphic design</a>

                    <ul>
                        <li><a href="">Item 21</a></li>
                        <li><a href="">Item 22</a></li>
                        <li><a href="">Item 23</a></li>
                        <li><a href="">Item 24</a></li>
                    </ul>               
                </li>

                <li>
                    <a href="">Development tools</a>
                    <ul>
                        <li><a href="">Item 31</a></li>
                        <li><a href="">Item 32</a></li>
                        <li><a href="">Item 33</a></li>
                        <li><a href="">Item 34</a></li>

                    </ul>               
                </li>
                <li>
                    <a href="">Web design</a>               
                    <ul>
                        <li><a href="">Item 41</a></li>
                        <li><a href="">Item 42</a></li>
                        <li><a href="">Item 43</a></li>

                        <li><a href="">Item 44</a></li>
                    </ul>   
                </li>
            </ul>
        </li>
        <li>
            <a href="">Work</a>
            <ul>

                <li>
                    <a href="">Work 1</a>
                    <ul>
                        <li>
                            <a href="">Work 11</a>      
                            <ul>
                                <li><a href="">Work 111</a></li>
                                <li><a href="">Work 112</a></li>

                                <li><a href="">Work 113</a></li>
                            </ul>                           
                        </li>
                        <li>
                            <a href="">Work 12</a>
                            <ul>
                                <li><a href="">Work 121</a></li>
                                <li><a href="">Work 122</a></li>

                                <li><a href="">Work 123</a></li>
                            </ul>                           
                        </li>
                        <li>
                            <a href="">Work 13</a>
                            <ul>
                                <li><a href="">Work 131</a></li>
                                <li><a href="">Work 132</a></li>

                                <li><a href="">Work 133</a></li>
                            </ul>                           
                        </li>
                    </ul>                   
                </li>
                <li>
                    <a href="">Work 2</a>
                    <ul>
                        <li>

                            <a href="">Work 21</a>
                            <ul>
                                <li><a href="">Work 211</a></li>
                                <li><a href="">Work 212</a></li>
                                <li><a href="">Work 213</a></li>
                            </ul>                           
                        </li>

                        <li>
                            <a href="">Work 22</a>
                            <ul>
                                <li><a href="">Work 221</a></li>
                                <li><a href="">Work 222</a></li>
                                <li><a href="">Work 223</a></li>
                            </ul>                           
                        </li>

                        <li>
                            <a href="">Work 23</a>
                            <ul>
                                <li><a href="">Work 231</a></li>
                                <li><a href="">Work 232</a></li>
                                <li><a href="">Work 233</a></li>
                            </ul>                           
                        </li>

                    </ul>                   
                </li>
                <li>
                    <a href="">Work 3</a>
                    <ul>
                        <li>
                            <a href="">Work 31</a>
                            <ul>

                                <li><a href="">Work 311</a></li>
                                <li><a href="">Work 312</a></li>
                                <li><a href="">Work 313</a></li>
                            </ul>                           
                        </li>
                        <li>
                            <a href="">Work 32</a>

                            <ul>
                                <li><a href="">Work 321</a></li>
                                <li><a href="">Work 322</a></li>
                                <li><a href="">Work 323</a></li>
                            </ul>                           
                        </li>
                        <li>
                            <a href="">Work 33</a>

                            <ul>
                                <li><a href="">Work 331</a></li>
                                <li><a href="">Work 332</a></li>
                                <li><a href="">Work 333</a></li>
                            </ul>                           
                        </li>
                    </ul>                   
                </li>

            </ul>       
        </li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

http://jsfiddle.net/uHuHE/

Answer 1

只需将text-align: center; 分配给#menu ul a

Demo

---

旁注：如果您想使用嵌套级别的文本对齐方式过于具体，您可以随时使用> 选择器，例如，您想在第一级下拉级别对齐文本，而不是简单地使用

ul#menu > li {
   /* Targets main menu items */
}

ul#menu > li > ul > li > a {
   /* Targets 1st level dropdown */
}

等等……

---

正如您评论的那样，您希望将主菜单项居中，而不是使用 #menu-wrap 代替 #menu {} 声明，为您的 #menu 分配一些固定宽度而不是使用 margin: auto;

Demo 2