Question

您好我刚刚定制了我的WP主题，只有Rev Slider作为主页上的标题。 http://test.texaswagyuassociation.com/

现在最后一步是将＃site-header-inner div（包含徽标和搜索框）置于1069px内容区域的中心，而不是在左侧。

我的目标只是将div放在中心位置，然后将徽标大小放在旋转滑块的左上角而不是左下角，只需在移动时位于正确的左上角位置即可。

似乎可以用CSS完成，但没有任何工作。主题支持说我需要“使用主题钩子在＃site-header-inner div周围添加一个额外的包装器（可能更容易），所以它保持宽度。”

这可以仅使用CSS完成，还是需要使用钩子？我对钩子一无所知。如果有人能给我实现这一目标的确切步骤，我将非常感激。

我已经添加了这个自定义CSS来移除标题，最后得到它的方式，如此接近。

body.home #site-header {
background: none;
}

body.home #site-header-inner {
position: absolute;
top: 51px /*offset topbar*/
}

body.home #site-logo,
body.home #header-aside {
position: relative;
z-index: 2;
}

感谢您提供的任何帮助，斯科特

Answer 1

类似的东西？：

   body.home #site-header-inner {
      position: relative;
      display: inline-block;
      max-height: 0;
      margin: 0;
      padding: 0;
   }

Answer 2

Hooks是基于主题的功能，除了wp_footer和wp_head，所以你需要询问你的主题作者你主题上可用的钩子是什么，以及它们是否支持你想要的那种钩子。

最好的方法是像这样构建你的＃site-header-inner内部HTML div

<div id="site-header-inner" class="container clr">
    <div> <!-- Add another div wrapper -->
        <div id="site-logo" class="site-branding clr header-two-logo">
            ........
        </div>
        <aside id="header-aside" class="clr visible-desktop header-two-aside">
            ........        
        </aside><!-- #header-two-aside -->
    </div><!-- another div wrapper close tag-->
</div>

然后你可以像这样简单地应用css，

/** Always set an outer wrapper with position relative for absolute div**/
#outer-wrap #site-header-inner {
    position: relative;
    padding: 0;
}
/** Absolute Div will inherit the maximum width of its outer wrapper**/
#site-header-inner > div {
    position: absolute;
    width: 100%;
    top: 20px;
}

如果编辑HTML标签更难，你可以使用jQuery

插入div包装器

jQuery(document).ready( function() {
    jQuery('#site-header-inner').wrapInner("<div></div>");
});

使用CSS或钩子在WP中居中一个div

2 个答案: