对齐标题底部

Question

我将自己的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？）

您可以在此处查看：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在中间垂直对齐徽标和导航菜单。