编辑Nav菜单-如何包装display：block，float：left以具有居中菜单？ [英] Editing Nav Menu - How Do I Wrap display:block, float:left to have a Centered Menu?

问题描述

对，所以，我一直在自我编辑一个相当复杂的网站，并停留在涉及菜单的最后一部分。它有一个float：left命令（导航栏显示在屏幕左侧），我一直在尝试用包装器将其更改为text-align：center（显示在屏幕中央），但未成功。

Right, so, I've been self-editing a rather complicated site and have been stuck on this last part involving the menu. It has a float:left command (the navbar displays alined to the left of the screen) and I've been trying to get it to text-align:center (appear centered within the screen) with a wrapper but have been unsuccessful.

下面是编码：

#nav a {
    display: block;
    padding: 5px;
    color: #aaa;
    text-decoration: none;
    outline: none;
    font-weight: normal;
    font-family: "Droid Serif", Georgia ,serif;
}
#nav > .current-menu-item > a,
#nav > li a:hover { color: #4C4C4C }
.plus { color: #aaa }
#nav ul {
    position: center;
    display: none;
}
#nav li {
    float: left;
    position: relative;
    list-style-type: none;
    padding-bottom: 5px;
}
#nav li a {
    letter-spacing: 3px;
    font-size: 14px;
    text-transform: uppercase;
    padding: 8px 15px;

我是一个编程菜鸟，在反复试验和检查元素的组合下几乎可以生存。请保持温和，并作出解释：）

I'm a programming noob and pretty much survive on combination of trial and error and the "inspect element" command in google chrome. Please be gentle and rather explanatory :)

欢呼，
Jess

cheers, Jess

推荐答案

如果要将ul在导航中居中，只需在ul中添加 width 和 margin：0 auto;
如果您不想添加宽度签出如何居中对齐水平< UL>菜单？

If you want to center the ul in the nav, just add width to ul and margin: 0 auto; If you do not want to add a width check out How do I center align horizontal <UL> menu?

这篇关于编辑Nav菜单-如何包装display：block，float：left以具有居中菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！