イメージとナビゲーションを同じ基礎行の中に集中させますか？

Question

私は現時点では新しいサイトを構築していますので、今度はファンデーションを使用することにしました。そのため、ベアボーンではなく、画像とナビゲーションを一列に並べた問題があります。彼らは一緒に同じ行に座っている、ちょうど '平等に'ではありません。

HTML：

 <div id="navigation"> 
      <div class="row fullWidth"> 
       <div class="large-12 columns"> 
         <div id="logo"> 
          <img src="logo.png" alt="Logo" /> 
         </div> 
         <?php 
          wp_nav_menu(array('main-menu' => 'Main Menu')); 
         ?> 
       </div> 
      </div> 
     </div> 

CSS：

#navigation { 
    margin: 0 auto; 
} 

#navigation li { 
    display: inline; 
    padding: 0px 10px; 
    margin: 0px 10px; 
} 

#navigation ul { 
    float: right; 
} 

任意の助けをいただければ幸いです、私はその非常に単純な想像が、通常は基礎なしであなただけの0自動車のマージンを設定していることをする必要がありますそれは...ですか。

Answer 1

それぞれを同じ行に揃えるには、各要素にdisplay: table-cell;を使用し、これらの要素を垂直に中心にvertical-align: middle;に配置します。同じ行に隣同士にそれらを中央にしませんでした

#navigation { 
    margin: 0 auto; 
    overflow: hidden; 
} 

#navigation #logo { display: table-cell; vertical-align: middle; } 

#navigation li { 
    display: inline; 
    padding: 0px 10px; 
    margin: 0px 10px; 
} 

#navigation ul { 
    display: table-cell; vertical-align: middle; 
} 

.columns { display: table; width: 100%; } 

Updated fiddle