Question

我正试图将这个底部导航中心放在测试网站上：

ul li使用float:left;，这是我认为让它停留在左边。我正在试图弄清楚如何让它居中。

要获得水平显示的链接，我需要将它们向左浮动，但现在我无法将整个导航设为居中。有办法吗？

Answer 1

经常使用：

.divStyle {
    text-align: center;
}
ul.styleName {
    margin: 0 auto; 
    text-align: left;
}

会做到这一点。

在这样的ul的左侧和右侧应用“自动”边距会使div在div居中文本时将其自身置于div中。这就是有多少网站将div作为其主页内容的中心。

Answer 2

以下是我解决它的方法，也适用于动态生成的菜单。

假设这是动态生成的菜单：

<div id="menu">
   <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
   </ul>
</div>

这是CSS：

.menu {
    width:300px;
    text-align: center; /*Set a width and text-align on the main div*/
}

.menu ul{
    margin:0;
    padding:0;
    display:inline-block;
    list-style: none;   /*Set display to inline-block to the ul*/
}

.menu ul li {
    float: left;
    margin-right: 1.3em; /*this is the usual*/
    padding: 0;
}

现在，要使列表居中，您需要添加一个空段落以清除浮动。如果菜单是静态的，或者使用jQuery，请手动执行此操作：

$(document).ready(function() {
    $("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child');
})

和.clear段落的CSS将是：

p.clear{
    clear:both;
    margin:0;
    padding:0;
    height: 0;
    width: 0;
}

就是这样！

Answer 3

将style="text-align: center;"添加到ul。
将style=" display:inline-table;"添加到ul。

Answer 4

CSS：

margin: 0px auto;

或

/*on the nav's parent*/
text-align: center;

/*on the nav*/
text-align: left;

Answer 5

要使margin:0 auto有效，您需要在ul上设置宽度并移除display:inline：

#footerLinks ul {
  list-style:none;
  margin:0 auto;
  padding:0;
  width:400px;
}

Answer 6

嗯，我认为KISS规则适用于此：

ul { text-align: center; }
ul li { display: inline-block; }

在div中居中使用浮点数

6 个答案: