居中响应 header - wordpress 博客

Question

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

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

我目前 header 的 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;

}

如果您更改浏览器 window 您可以看到发生更改的位置，并且只要它是其他容器的宽度，它就会变得固定，我只需要它从容器的宽度开始.

非常感谢任何帮助。

Answer 1

我想你所要做的就是：

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

如果您需要覆盖某些 CSS 规则，只需在 class 之前添加 body。这样您的规则将被优先考虑，您可以轻松识别您的规则。像这样：

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

解释
基本上你需要做的是将宽度限制设置为 header 匹配主要的宽度限制 max-width: 1160px; 并且显然将 header 与 margin: 0 auto;

居中

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

P.S。确保创建一个 Child 主题以编辑现有的 WP 主题。

居中响应 header - wordpress 博客

Centering responsive header - wordpress blog

html

css

wordpress

blogs