html - 居中响应标题 - wordpress 博客

Question

我尝试了几种方法，但似乎无法完成其中的每一部分。我为某人制作了一个 wordpress 博客，她对此很满意，但最近想要更改标题。我把它放宽了，她想要它装箱/居中。基本上，标题包含 Logo 、导航和左侧的两张图像，客户希望将它们放在那里以进行外观。该博客是响应式的，一旦屏幕到达某个点，标题就会与页面其余部分的容器相匹配。但是在全屏笔记本电脑/台式机上，开始时它的宽度仍然要宽得多，每边只有一点填充。当我将它填充到合适的宽度时，当屏幕改变时它会变小。我希望它始终与主 slider 和容器的宽度相同。

博客在 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。

附言确保您创建了一个子主题来编辑现有的 WP 主题。