Question

wordpress二十二主题的主导航菜单默认左对齐。我试图将菜单放在我孩子主题的中心，但却无法弄明白。有什么建议吗？

Answer 1

如果您将Firefox与附加Firebug一起使用，则可以检查标题菜单栏的CSS以查找相应的代码。我碰巧使用Twenty Twelve的儿童主题，其中还有中心对齐的菜单项。

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

1）如果您还没有，那么您需要创建一个子主题。要执行此操作，只需在“主题”中创建一个新文件夹即可。您的WordPress安装目录，并将其命名为＆＃39; Twenty Twelve Child Theme＆＃39;。有关子主题的更多信息，请参阅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");

用星号包裹斜线的部分是评论。您可以在样式表中的任何位置添加注释，以标记和组织自定义。以下＆＃39; @ import＆＃39;规则加载父主题的样式表，以便您的子主题不会将您的网站呈现为骨架。

使用文件名＆＃39; styles.css＆＃39;将此文件保存到您的子主题目录，并记住选择＆＃39;所有文件＆＃39;在＆＃39;文件类型＆＃39;列表。

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规则中的声明将导航菜单的外观定义为容器。要居中对齐菜单元素，只需替换＆＃39; text-align＆＃39;属于＆＃39; center＆＃39;。

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

Answer 2

在您的信息中心内＆gt;外观＆gt;编辑，打开你的'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;
}

Answer 3

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

margin:0 auto;

它会使div对齐中心。

Answer 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;  }

Wordpress二十二主题中心对齐主菜单

4 个答案: