在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中居中元素的全寬標題

回答

相關問題