对齐标题底部

Question

我将我的 wordpress 网站移到了一个新域，现在由于某种奇怪的原因，布局略有改变。

在标题元素中有 div 徽标和主导航。 Logo 以前与主导航的底部对齐，但现在它浮动在顶部。

尝试摆弄边距、对齐和显示，但无法获得。

这里是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 上？）

你可以在这里看到它：http://tinyurl.com/7ywoqpf

我只希望徽标在其父元素的底部对齐，以便出现。这是一张图片，我添加了* {outline: 1px solid} 以便看得更清楚 - 我只是希望徽标在底部对齐。

Answer 1

您需要为 logo div 和 navigation div 稍微修改一下 CSS，如下所示：

#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 代替垂直对齐中间的徽标和导航菜单。