Question

我尝试了几种方法，但似乎无法完成这一部分。我为某人制作了一个wordpress博客，她很满意，但最近想改变标题。我把它弄得很宽，她希望它盒装/居中。标题包含徽标，导航和左侧的两个图像，客户端希望放置在那里用于外观，基本上。博客是响应式的，一旦屏幕到达某一点，标题就会匹配页面其余部分的容器。但是在全屏笔记本电脑/台式机上，它的每一侧只需要一点填充，它仍然会开始更宽。当我将其填充到正确的宽度时，它会在屏幕更改时变小。我希望它始终与主滑块和容器的宽度相同。

博客位于http://www.allloveblog.com

我目前为标题提供的CSS：

.fusion-header{
position:relative;
display:block;
/*width:100%;*/
/*padding-left:162px;
padding-right:160px;*/
padding-top:0px;
padding-bottom:0px;
}

.fusion-header-wrapper{
position:relative;
display:block;
width:100%;
float:center;

}

如果您更改浏览器窗口，您可以看到更改发生的位置，并且只要它是其他容器的宽度就会变为粘贴，我只需要从容器的宽度开始。

非常感谢任何帮助。

Answer 1

我认为你所要做的就是：

.fusion-header-wrapper {
    max-width: 1160px;
    margin: 0 auto;
}

如果您需要覆盖一些CSS规则，只需在课程前添加body即可。这样，您的规则将被优先排序，您可以轻松识别您的规则。像这样：

body .fusion-header-wrapper {
    max-width: 1160px;
    margin: 0 auto;
}

说明
基本上你需要做的是设置一个宽度限制到与主要宽度限制max-width: 1160px;匹配的标题，并且明显将标题置于margin: 0 auto;

的中心位置

#main左右30px填充在#main内，我们.fusion-row max-width: 1100px; 在.fusion-header-wrapper内，我们有.fusion-header左右30px填充因此，如果设置max-width: 1100px;，您会注意到由于其他div上的填充，您需要再添加60个px。

P.S。确保创建子主题以编辑现有WP主题。

中心响应头 - wordpress博客

1 个答案: