Question

我从2010年开始购买旧的WordPress主题，并决定通过添加我的粘性标题使其更加现代化。为此，我下载了一个名为 myStickymenu 的插件。该插件似乎完美无缺，但是，我的主题标题的宽度为960px，并希望使其全宽。

我开始玩我的主题的HTML / CSS代码，以便将我的标题宽度更改为全宽，但是我的导航菜单中心存在问题，可能还有其他一些我希望添加到标题中的元素。

HTML CODE：

<header id="header">
        <div class="container_header clearfix">
                <div class="menu-row-top clearfix">

                  <div class="test-text"> This is just some random text </div>

                  <!-- NAVIGATION -->
                  <nav class="primary">
                       <?php wp_nav_menu( array(
                         'container'       => 'ul', 
                         'menu_class'      => 'sf-menu', 
                         'menu_id'         => 'topnav',
                         'depth'           => 0,
                         'theme_location' => 'header_menu' 
                        )); 
                        ?>
                   </nav><!--.primary-->
            </div>
     </div>
</header>

CSS代码：

#header {
  width: 100%;
  position: relative;
  z-index: 99;
}

.container_header{
background: #0459b5;
}

nav.primary {
position: relative;
z-index: 2;
}

使用上面的代码，我的蓝色标题栏的最左边和最右边的导航菜单基本上都有测试文本。我已经阅读了许多关于类似问题的论坛帖子，人们似乎建议添加最大宽度。

然而，

.menu-row-top {
max-width: 960px;
}

从屏幕的最左侧开始，所有内容都移动到左侧，以960像素为单位。

我想纠正HTML / CSS组合，以便始终将 .menu-row-top 中的元素放在我的标题栏中心，以便不同屏幕分辨率的人可以轻松浏览我的网站。我基本上喜欢让所有东西从左到右对齐，我将使用CSS最终正确定位元素。

Answer 1

尝试以下方法：

.menu-row-top {
    margin: 0 auto; 
    max-width: 960px;
}

Answer 2

您可以将所有想要居中的元素包装到新的div中，例如“headerCenter”

   <div class="menu-row-top clearFix">
     <div class="headerCenter">
     //centered elements e.g
     <nav class="primary">
     links
     </nav>
     </div>
     //full width located elements e.g.
     <div class="logo"></div>
   </div>

然后在你的样式表中：

.headerCenter{
max-width: 960px;
margin:0 auto;
}
.logo{
margin-left:50px;
margin-top:50px;
width:100px;
height:50px;
background:url('path/to/logo/image');
background-size:100%; or (100% 100%)
}

带有HTML / CSS中心元素的全宽标题

2 个答案: