HTML中心导航栏

Question

我有一个带有多个级别的导航栏，我根据此站点进行了更改：https://codepen.io/philhoyt/pen/ujHzd

我在互联网上环顾四周，但他们提供的解决方案（使用display：inline-block）似乎没有成功。

我试过的来源：

How to center a navigation bar with CSS or HTML?

how to center css navigation bar

任何帮助都会得到满足。

#primary_nav_wrap
{
    margin:auto;
}

#primary_nav_wrap ul
{
	list-style:none;
    text-align:center;
	position:relative;
	float:left;
	margin:auto;
	padding:0;
}

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:Futura;
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0;
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block
}

<nav id="primary_nav_wrap">
    <ul>
        <li><a href="#">Nieuws</a></li>
        <li><a href="#">Info &#x25BC;</a>
            <ul>
                <li><a href="scouts_taf&toetje.html">Taf & Toetje</a></li>
                <li><a href="scouts_papierwerk.html">Papierwerk</a></li>
                <li><a href="scouts_uniform.html">Uniform</a></li>
                <li><a href="https://www.scoutsengidsenvlaanderen.be/technieken-databank">Technieken</a></li>
            </ul>
        </li>
        <li><a href="scouts_afspraken.html">Algemeen</a></li>
        <li><a href="scouts_fotos.php">Foto's</a></li>
        <li><a href="scouts_inschrijven.html">Inschrijven</a></li>
        <li><a href="scouts_contact.html">Contact</a></li>
        <li><a href="#">Permekiaan &#x25BC;</a>
            <ul>
                <li class="dir"><a href="#">Kapoenen &#x25BC;</a>
                    <ul>
                        <li><a href="#">Info</a></li>
                        <li><a href="#">Activiteiten</a></li>
                    </ul>
                </li>
                <li class="dir">
                    <a href="#">Kawellen &#x25BC;</a>
                    <ul>
                        <li><a href="#">Info</a></li>
                        <li><a href="#">Activiteiten</a></li>
                    </ul>
                </li>
                <li class="dir">
                    <a href="#">Jong-Givers &#x25BC;</a>
                    <ul>
                        <li><a href="#">Info</a></li>
                        <li><a href="#">Activiteiten</a></li>
                    </ul>
                </li>
                <li class="dir">
                    <a href="#">Givers &#x25BC;</a>
                    <ul>
                        <li><a href="#">Info</a></li>
                        <li><a href="#">Activiteiten</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Answer 1

我对这两个类进行了一些更改：

#primary_nav_wrap
{
    margin:auto;
    text-align:center;
}

#primary_nav_wrap ul
{
    list-style:none;
  text-align:center;
  display: inline-block;
    position:relative;
    margin:auto;
    padding:0;
}

解决方案是使用display:inline-block和text-align:center;。但也删除了float: left。工作Fiddle

Answer 2

尝试添加：

position: absolute;
left: 50%;
transform: translateX(-50%);

在#primary_nav_wrap

Answer 3

您可以使用此代码将整个导航中心化。

#primary_nav_wrap ul {
    list-style: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    margin: 0;
    padding: 0;
}

Answer 4

我从ul和li中移除了浮点数，并在li标签中添加了display：inline-block，所以我最终得到了这个：

#primary_nav_wrap
{
    margin-top:15px
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    text-align: center;
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
    position:relative;
    display: inline-block;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#ddd
}

#primary_nav_wrap ul li:hover
{
    background:#f6f6f6
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}

Answer 5

将课程添加到<ul>并将其<ul class="extra">添加到该课程.extra{left:33.33%}

Answer 6

如果向primary_nav_wrap添加左右自动边距会怎样？即将此添加到CSS：

＆＃13;

＆＃13;

#primary_nav_wrap
{
	margin-top:15px;
    margin-right: auto;
    margin-left: auto;
}

＆＃13;

＆＃13;

＆＃13;

Answer 7

您只需要在css类中进行一些更改。

#primary_nav_wrap ul li
{
    position:relative;
    /*float:left;*/
    margin:0;
    padding:0;
  display:inline-block;
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    /*float:left;*/
    margin:0;
    padding:0;
  text-align:center
}

请查看更新的fiddle

Answer 8

带有flexbox的

HTML中心导航栏

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:Futura;
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0;
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block
}

/* flexbox */
#primary_nav_wrap {
  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;							
}

#primary_nav_wrap ul {
  list-style:none;

  background-color: cornflowerblue;
  //padding: 1rem;
  //margin: 1rem;							

  -webkit-align-self: center;							
  align-self: center;
}
/* || flexbox */

<nav id="primary_nav_wrap">
    <ul>
        <li><a href="#">Nieuws</a></li>
        <li><a href="#">Info &#x25BC;</a>
            <ul>
                <li><a href="scouts_taf&toetje.html">Taf & Toetje</a></li>
                <li><a href="scouts_papierwerk.html">Papierwerk</a></li>
                <li><a href="scouts_uniform.html">Uniform</a></li>
                <li><a href="https://www.scoutsengidsenvlaanderen.be/technieken-databank">Technieken</a></li>
            </ul>
        </li>
        <li><a href="scouts_afspraken.html">Algemeen</a></li>
        <li><a href="scouts_fotos.php">Foto's</a></li>
        <li><a href="scouts_inschrijven.html">Inschrijven</a></li>
        <li><a href="scouts_contact.html">Contact</a></li>
        <li><a href="#">Permekiaan &#x25BC;</a>
            <ul>
                <li class="dir"><a href="#">Kapoenen &#x25BC;</a>
                    <ul>
                        <li><a href="#">Info</a></li>
                        <li><a href="#">Activiteiten</a></li>
                    </ul>
                </li>
                <li class="dir">
                    <a href="#">Kawellen &#x25BC;</a>
                    <ul>
                        <li><a href="#">Info</a></li>
                        <li><a href="#">Activiteiten</a></li>
                    </ul>
                </li>
                <li class="dir">
                    <a href="#">Jong-Givers &#x25BC;</a>
                    <ul>
                        <li><a href="#">Info</a></li>
                        <li><a href="#">Activiteiten</a></li>
                    </ul>
                </li>
                <li class="dir">
                    <a href="#">Givers &#x25BC;</a>
                    <ul>
                        <li><a href="#">Info</a></li>
                        <li><a href="#">Activiteiten</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>