居中对齐 WordPress 二十十二主题的主菜单答案

【问题标题】：Center Align Main Menu on Wordpress Twenty Twelve Theme居中对齐 WordPress 二十十二主题的主菜单
【发布时间】：2013-11-28 04:21:03
【问题描述】：

wordpress 212 主题的主导航菜单默认是左对齐的。我试图在我的子主题上居中对齐菜单，但无法弄清楚。有什么建议吗？

【问题讨论】：

您好，我尝试了以下变体，但没有效果； .main-navigation { 位置：相对； } .main-navigation div { 显示：内联块；边距：0 自动；边距右：-40px； } .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { 边框：无； }

标签： wordpress

【解决方案1】：

如果您使用带有插件 Firebug 的 Firefox，您可以检查标题菜单栏的 CSS 以找到合适的代码。我碰巧自己使用了一个 212 的子主题，它还具有居中对齐的菜单项。

假设您使用的是带有 WordPress.org 脚本的自托管网站，这应该是一个简单的修复方法，如下所示：

1) 如果您还没有，您需要创建一个子主题。为此，只需在 WordPress 安装的“主题”目录中创建一个新文件夹，并将其命名为“二十十二个儿童主题”。有关子主题的更多信息，请参阅this page。

2) 您现在需要为您的子主题创建一个新的样式表文件，并使其加载父主题的样式表，否则您的网站将加载时没有任何样式。为此，请打开记事本并添加以下内容。

/*
Theme Name:     Twenty Twelve Child Theme
Theme URI:      
Description:    Child theme for Twenty Twelve
Author:         <You Name here>
Author URI:     
Template:       twentytwelve
Version:        <Add any number to your liking here, for instance '0.5'>
*/


@import url("../twentytwelve/style.css");

带有星号的斜线包裹的部分是注释。您可以在样式表中的任何位置添加 cmets 来标记和组织您的自定义。以下“@import”规则加载父主题的样式表，这样您的子主题就不会将您的网站呈现为仅仅是骨架。

将此文件保存到您的子主题目录，文件名为“styles.css”，并记得在“文件类型”列表中选择“所有文件”。

3) 既然已经创建了子主题的基础，我们就可以进行自定义部分了。首先，我们将主题导航菜单的 CSS 规则添加到子主题的样式表中。此代码已存在于父主题的样式表中，因此我们实际上将使用自定义覆盖它。

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    border-bottom-color: #EDEDED;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: #EDEDED;
    border-top-style: solid;
    border-top-width: 1px;
    display: inline-block !important;
    text-align: left;
    width: 100%;
}

此 CSS 规则中的声明将导航菜单的外观定义为容器。要居中对齐菜单元素，只需将 'text-align' 属性的值替换为 'center'。

再次保存文件并重新加载您的网站；菜单项现在应该居中对齐。

【讨论】：

【解决方案2】：

在仪表板 > 外观 > 编辑器中，打开“style.css”并向下滚动直到看到标题；

/* =Main content and comment content
-------------------------------------------------------------- */

稍微向下滚动并将text-align: center; 行添加到.entry-header .entry-title 的底部，其余部分保持不变。

..完成上述操作后，我的代码如下所示；

.entry-header .entry-title {
    font-size: 20px;
    font-size: 1.428571429rem;
    line-height: 1.2;
    font-weight: normal;
    text-align: center;
}

【讨论】：

【解决方案3】：

将此代码部分添加到容器 div 的 css 中。

margin:0 auto;

它会使 div 居中对齐。

【讨论】：

您好，感谢您的建议，但不幸的是没有运气。 “li”项目目前左对齐，我希望它们在 22 的主导航栏中居中对齐。
先找到li项的div，然后在#div_name ul li中添加"text-align:center"

【解决方案4】：

只需将 lign: text-align: center; 添加到 .main-navigation

应该是这样的：

.main-navigation {
clear: both;
margin: 0 auto;
max-width: 1080px;
min-height: 45px;
position: relative;
text-align: center;  }

【讨论】：