css - html5 导航中的中心徽标

Question

所以我试图在 html5 的导航部分中将徽标居中。

  <header>
    <div class="container1">
       <nav>
           <div class="logo">Logo</div>
       </nav>
    </div>
  </header>

有什么建议么？提前致谢！

score 2 · Accepted Answer

2

删除您的float: left;并添加margin: 0 auto;

于 2012-12-17T16:36:52.700 回答

score 1 · Accepted Answer

您不能使用float:left并期望能够将其居中。

到目前为止，将元素水平居中的最简单方法是使用其容器text-align:center并使用受影响的元素display:inline-block（并且可以选择text-align:left覆盖容器的文本对齐方式）

score 0 · Accepted Answer

正如上面的家伙所说，这只是另一种说法。

.logo {
    float: left; /*remove */
    margin: 0 auto; /*add */
}

score 0 · Accepted Answer

添加和删margin:0 auto;除..logofloat:left

此外，您没有nav正确使用该元素，因为它应该包含当前不包含的导航。

score 0 · Accepted Answer

第一的：

擦除这些行：

margin-left: auto;
margin-right: auto;

以您的#container1样式。

第二：

在您的.logo样式中，擦除：

float: left;

并添加：

margin: 0 auto;

我可以建议您删除所有不用于澄清代码的样式吗？

希望这能解决您的问题。

5 回答 5