编辑导航菜单 - 如何包装显示：块，浮动：左以获得居中菜单？

Posted 2023-03-29

【中文标题】编辑导航菜单 - 如何包装显示：块，浮动：左以获得居中菜单？

【英文标题】：Editing Nav Menu - How Do I Wrap display:block, float:left to have a Centered Menu?

【发布时间】：2012-05-04 01:51:34

【问题描述】：

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

下面是代码：

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

我是一个编程菜鸟，几乎可以通过反复试验和谷歌浏览器中的“检查元素”命令来生存。请温柔而解释性强:)

干杯， 杰斯

【参考方案1】：

如果你想让 ul 在导航中居中，只需将 width 添加到 ul 和 ma​​rgin: 0 auto; 如果您不想添加宽度，请查看How do I center align horizontal <UL> menu?

【参考方案2】：

而不是 float 将 display:inline-block 给您的 LI 。像这样写：

#nav li 
    display:inline-block;
    *display:inline;/* For IE*/
    *zoom:1;
    position: relative;
    list-style-type: none;
    padding-bottom: 5px;