如何将自定义 Wordpress 主题导航栏居中？答案

【问题标题】：How to Center Custom Wordpress Theme Navigation bar?如何将自定义 Wordpress 主题导航栏居中？
【发布时间】：2023-03-03 01:28:02
【问题描述】：

各位程序员大家好

我想使导航居中并且已经研究并且不知道要插入到我从 HTML 转换为 Wordpress 的自定义主题中的代码。（我对 Wordpress 主题开发有点陌生）

我的定制 wordpress 主题已经拉出 wordpress 上的任何菜单并将其插入。

但我只需要帮助使菜单居中。观察下图...菜单太靠左了。

这是我目前在网站上的“header.php”中显示 WordPress 菜单的一些相关代码。

(Header.php 文件)

<nav class="menubar"> <ul id="menu"> <?php wp_nav_menu();?> </nav>

Image of my navigation menu which appears more on the left side.

附：请帮助我简单地将我的菜单居中，非常感谢您的回复。

【问题讨论】：

你用来输出菜单的东西在编写 CSS 以使其居中时几乎没有重要性。请提供minimal reproducible example 以确保重现问题。您还需要研究并至少尝试一次自己编写代码。

标签： css wordpress header nav navigationbar

【解决方案1】：

或者您也可以将导航栏包装在一个包装器 div 中，并赋予其与网站主要内容相同的宽度（这可能是也可能不是您要查找的内容）。

<div class="nav-wrapper">
<nav class="menubar">
    <ul id="menu">
    <?php wp_nav_menu();?>
    </nav></div>

.nav-wrapper{
max-width: 1170px; /* let's say this is the width of the main div */
display: block;
margin: 0 auto;
}

【讨论】：

【解决方案2】：

.menubar, #menu {
    width:100%;
}

#menu {
    text-alighn:center;
    padding:0;
    margin:0;
}

【讨论】：