對齊頁眉底部

我將我的wordpress網站移動到一個新的域名，現在出於某種奇怪的原因佈局稍有改變。對齊頁眉底部

標題元素內有divs標誌和主導航。標誌用於與主導航的底部對齊，但現在它漂浮在頂部。

嘗試邊緣擺弄，對齊和顯示，但無法得到它。

這裏是HTML的要點：

<div id="logo"> 
    <a href="http://www.example.com/"> 
     <img src="http://www.example.com/wp-content/uploads/2014/10/cropped-75021.png" width="736" height="118" alt="Patchwood logo"> 
    </a> 
    </div> 
    <!-- end of #logo --> 
    <div id="main-navigation"> 
    <div class="social-icons"> 
     <ul> 
     <li> 
      <a href="https://twitter.com/trashswag"> 
      <img src="http://www.example.com/wp-content/themes/orbit/images/twitter-icon.png" width="24" height="24" alt="Twitter url "> 
      </a> 
     </li> 
     <li> 
      <a href="https://www.facebook.com/patchwood.reclaimed.wood"> 
      <img src="http://www.example.com/wp-content/themes/orbit/images/facebook-icon.png" width="24" height="24" alt="Facebook url "> 
      </a> 
     </li> 
     </ul> 
    </div> 

    <nav> 
     <div class="dropdown dropdown-horizontal"> 
     <ul id="menu-main" class="main-nav l_tinynav1"> 
      <li id="menu-item-132" class="first-menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-132"> 
      <a href="http://example.com/"> 
       Home 
      </a> 
      </li> 
      <li id="menu-item-154" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-154"> 
      <a href="http://www.example.com/patchwork/"> 
       Patchwork 
      </a> 
      </li> 
      <li id="menu-item-150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-150"> 
      <a href="http://www.example.com/clear-outs-offers/"> 
       Clear Outs &amp; Offers 
      </a> 
      </li>

可能相關的CSS：

#logo { 
display: inline; 
float: left; 
width: 40%; 
margin: 0 1.0416666666666665%; 
margin-bottom: 2.25%; 

#main-navigation { 
display: inline; 
float: left; 
width: 55%; 
margin: 0 1.0416666666666665%;

（離開了行項目和錨CSS可能不相關過於詳盡，也許是？問題在兄弟元素#logo和＃main-navigation？）

You ca ñ看到它在這裏：http://tinyurl.com/7ywoqpf

我只是想徽標對齊它的父元素的底部，所以出現。這裏有一張圖片，我添加了* {outline: 1px solid}以便更好地看到 - 我只是想將徽標對齊在底部。

enter image description here

來源

2014-10-26 Doug Fir

你需要修改你的CSS一點點你的logo DIV和navigation DIV這樣的：

#logo { 
    display: inline-block; 
    float: none; 
    width: 40%; 
    vertical-align: bottom; 
} 

#main-navigation { 
    display: inline-block; 
    float: none; 
    width: 55%; 
    vertical-align: top; 
}

enter image description here

您也可以垂直對齊的徽標和導航菜單中間使用vertical-align: middle代替。

來源

2014-10-26 17:10:33

非常感謝，推測valign不能對塊元素工作？ – 2014-10-26 17:21:26

@dougfirr不，不。 – 2014-10-26 18:04:58

對齊頁眉底部

回答

相關問題