0

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

4

4 回答 4

1

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

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

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

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");

用带星号的斜线包裹的部分是注释。您可以在样式表的任何位置添加注释，以标记和组织您的自定义。以下“@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'。

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

于 2013-01-17T23:03:11.027 回答
1

在仪表板 > 外观 > 编辑器中，打开“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;
}
于 2013-04-04T21:22:41.527 回答
0

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

它应该看起来像：

.main-navigation {
clear: both;
margin: 0 auto;
max-width: 1080px;
min-height: 45px;
position: relative;
text-align: center;  }
于 2013-11-27T20:21:03.410 回答
0

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

margin:0 auto;

它会使 div 居中对齐。

于 2013-01-10T18:02:29.547 回答