在HTML/CSS中居中元素的全宽标题

我从2010年开始购买一个旧的WordPress主题，并决定通过添加一个粘性标题使其更加现代一点。为此，我下载了一个名为myStickymenu的插件。该插件似乎工作完美，但是，我的主题头宽度为960px，并希望使其完整宽度。在HTML/CSS中居中元素的全宽标题

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

HTML代码：

<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; 
}

一切都移动到左边，一个一个div的960像素，从我的屏幕的最左边。

我希望得到纠正HTML/CSS组合能够始终有内居中我的头栏上。菜单行顶的元素，让人们有不同的屏幕分辨率可以在我的网站上轻松地浏览。我基本上喜欢从左到右对齐所有东西，我将使用CSS来最终正确定位元素。

来源

2014-11-08 LaGuille

尝试以下操作：

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

来源

2014-11-08 23:29:44

你可以用你希望中心成为新的div e.g “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%) 
}

来源

2014-11-09 00:06:24 SergeDirect

在HTML/CSS中居中元素的全宽标题

回答

相关问题