Выровнять заголовок внизу

Question

Я переместил сайт wordpress в новый домен, и теперь по какой-то странной причине макет слегка изменен.

Внутри элемента заголовка есть логотип div и main-navigation. Логотип был выровнен с нижней частью основной навигации, но теперь он плавает вверху.

Пробовал играть с полями, выравнивать и отображать, но не может получить его.

Вот суть 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?)

Вы, n см. здесь: http://tinyurl.com/7ywoqpf

Я просто хочу, чтобы логотип был выровнен в нижней части его родительского элемента, поэтому появляется. Вот фото, я добавил * {outline: 1px solid}, чтобы увидеть лучше - я просто хочу, чтобы логотип был выровнен внизу.

Answer 1

Вам нужно изменить ваш CSS немного для logo DIV и navigation ДИВ, как это:

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

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

Вы также можете вертикально выравнивать логотип и навигационное меню в середине, используя вместо этого vertical-align: middle.