如何使导航栏居中？答案

【问题标题】：How to center a nav bar?如何使导航栏居中？
【发布时间】：2015-06-06 22:12:35
【问题描述】：

我无法将导航栏置于页面中间。我还没有做任何CSS。

HTML

<div class = "menu-wrap">

<nav class = "navMenu">

    <ul class = "ulMenu">

        <li><a href = "index.html">Home</a></li> 

            <li>

            <a href = "products.html">Products<span class="arrow">&#9660;</span></a> 

                <ul>
                    <li><a href = "#">#</a></li>
                    <li><a href = "#">#</a></li>
                </ul>

            </li>

        <li><a href = "contact.html">Contact Us</a></li> 
        <li><a href = "aboutUs.html">About </a></li> 

    </ul>

</nav>

【问题讨论】：

how to center navigation bar with css or html? 的可能重复项

标签： html nav

【解决方案1】：

.ul {
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: center;
  justify-content: center;		

  -webkit-align-items: center;
  align-items: center;

  width: 100%;
  height: auto;
  background-color: lightgrey;							
}

.li {
  background-color: white;
  padding: 0.5rem;
  margin: 0.5rem;							

  -webkit-align-self: center;							
  align-self: center;
}

a .li:hover {
  color: #000000;
  background-color: lightgreen;
  cursor: pointer;
}

<div class = "menu-wrap">

<div class="ul">
  <a><div class="li">Home</div></a>
  <a><div class="li">Products</div></a>
  <a><div class="li">Contact Us</div></a>  
  <a><div class="li">About</div></a>				
</div>
  
</div>

【讨论】：

【解决方案2】：

所以为了对齐布局元素。你会想要使用 CSS。希望这能让你开始：

在制作水平导航元素时，我们通常使用float 或display:inline 属性将单个链接强制放在一行。要使整个 nav 元素居中，您可以像我在此处所做的那样为其设置一个宽度，这样我们就可以将其边距设置为 auto，它使整个 div 水平居中。

nav ul li{
    list-style:none;
    float:left;
    margin:5px;
}

nav{
    height:50px;
    display:table;
    background:#eee;
    margin:auto;
}

<div class = "menu-wrap">

<nav class = "navMenu">

    <ul class = "ulMenu">

        <li><a href = "index.html">Home</a></li> 

            <li>

            <a href = "products.html">Products<span class="arrow">&#9660;</span></a> 

                <ul>
                    <li><a href = "#">#</a></li>
                    <li><a href = "#">#</a></li>
                </ul>

            </li>

        <li><a href = "contact.html">Contact Us</a></li> 
        <li><a href = "aboutUs.html">About </a></li> 

    </ul>

</nav>

不过，它看起来很可怕。多一点 CSS 样式，你可以把这个菜单变成很棒的东西。

【讨论】：

【解决方案3】：

添加 align="center"

&lt;div class = "menu-wrap" align="center"&gt;

【讨论】：

这是一个折旧的属性。坏主意。

【解决方案4】：

您需要添加一些 CSS 来指定类属性，这将定义您已定义为这些类成员的元素的属性。

类似的东西

#menu-wrap {
    width:750px;
    margin:0 auto;
    list-style:none;
}

你可以参考这个tutorial

【讨论】：