居中標題下的div

我在我的標題下添加了一個小部件區域，我嘗試將它置於標誌下方。居中標題下的div

我試圖在#header-sidebar上添加display: block和margin:0 auto或text-align: center，但它不起作用。此外，我試圖改變HTML代碼的結構，而不是隻做CSS調整，但仍然是左邊的#header-sidebar堆棧，而不是居中。

這裏是我的代碼：

HTML代碼：

<header id="header"> 

    <div class="header-container"> 

     <a href="javascript:;" class="show-on-phone show-on-tablet" id="phone-toggle-menu"></a> 

     <a href="#" class="logo"><img style="vertical-align: middle;" src="#"></a> 

     <nav> //here is the navigation, hidden in mobile view </nav> 

     <div id="header-sidebar" class="header-widget-area"> 
      <div class="textwidget"> 
       //some widget here 
      </div> 

      <div class="mlp_language_box"> 
       // some other widget here 
      </div> 
     </div> 
    </div> 

</header>

CSS代碼：

header#header { 
    position: relative; 
    z-index: 300; 
    height: 70px; 
    line-height: 70px; 
    display: block; 
} 

header#header #phone-toggle-menu { 
    left: 20px; 
    margin-left: 0; 
    position: absolute; 
} 

header#header .header-container { 
    max-width: 1200px; 
    margin: 0 auto; 
} 

header#header .logo { 
    width: 100%; 
    float: none; 
    box-sizing: border-box; 
    text-align: center; 
    position: absolute; 
}

來源

2015-09-07 Tasos

你希望自己的標誌，是絕對的定位？ – Chetan

@Chetan如果我不這樣做，它不會在移動設備的切換按鈕旁邊對齊中心。至少，我找不到方法 – Tasos

@Tasos，你還可以分享'＃header-sidebar'或'.header-widget-area'的css代碼嗎？ –

display:table和margin:auto兩個標誌和按鈕區會做的伎倆......所以單獨的切換按鈕可以保持絕對。

header#header { 
    position: relative; 
    z-index: 300; 
    height: 70px; 
    line-height: 70px; 
    display: block; 
} 

header#header #phone-toggle-menu { 
    left: 20px; 
    margin-left: 0; 
    position: absolute; 
} 

header#header .header-container { 
    max-width: 1200px; 
    margin: 0 auto; 
} 

header#header .logo { 
    box-sizing: border-box; 
    display: table; 
    margin: auto; 
} 

header #header-sidebar{ 
    display: table; 
    margin: auto; 
}

來源

2015-09-07 08:49:53 Chetan

我忘了放置在他們兩個之間的'nav'元素，但隱藏在手機中。然而，它需要的地方和標題側邊欄不能堆疊在標誌下方。如果我改變了html的結構，並將nav放在header-sidebar後面，它會起作用嗎？ – Tasos

對不起，我不明白，你可以發佈建議的標記和預期輸出。 – Chetan

我之間有一個導航欄，但之後移動它，工作沒有問題。我標記你的答案是正確的。謝謝:) – Tasos

與以下替換您的CSS代碼：

header#header { 
    position: relative; 
    z-index: 300; 
    height: 70px; 
    line-height: 70px; 
    display: block; 
} 

header#header #phone-toggle-menu { 
    left: 20px; 
    margin-left: 0; 
    position: absolute; 
} 

header#header .header-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    text-align: center; 
} 

header#header .logo {   
    box-sizing: border-box; 
    text-align: center; 
    position: absolute; 
}

來源

2015-09-07 09:00:52 Amit

居中標題下的div

回答

相關問題