私は自分のヘッダーにコンテンツを集中させることができません

Question

私はヘッダーテーブルの中央になるように私のヘッダーのすべてを取得しようとしていますが、私はどのように把握できません。私はそれを垂直にセンタリングすることができましたが、それを水平にセンタリングする方法を理解することはできません。どうやってそれを教えてもらえますか？代わりにhttps://fiddle.jshell.net/rgfxs94L/2/

<div id="header"> 
    <div class="center"> 
    <div class="header_cells"> 
     <img onclick="get_page('?page=home');" title="logo" id="logo" src="http://www.rajohan.no/img/logo_small.png"> 
    </div> 
    <div id="main_buttons" class="header_cells"> 
     <div id="home" class="header_cells"> 
     &lt;Home&gt; 
     </div> 
     <div id="cv" class="header_cells"> 
     &lt;CV&gt; 
     </div> 
     <div id="nyheter" class="header_cells"> 
     &lt;Nyheter&gt; 
     </div> 
     <div id="movie" class="header_cells"> 
     &lt;Film&gt; 
     </div> 
     <div id="games" class="header_cells"> 
     &lt;Spill&gt; 
     </div> 
     <div id="music" class="header_cells"> 
     &lt;Musikk&gt; 
     </div> 
    </div> 
    <div class="header_cells"> 
     <form id="search_form"> 
     <input type="search" id="search_box" placeholder="S&oslash;k..."> 
     </form> 
    </div> 
    </div> 
</div> 

#header { 
    border-top: 3px solid #e87f29; 
    background-color: #f8f8f8; 
    min-width: 100%; 
    min-height: 100%; 
    position: static; 
    border-bottom: 1px solid #e8e8e8; 
    display: table; 
} 

.center { 
    text-align: center; 
} 

.header_cells { 
    display: table-cell; 
    min-height: 100%; 
    min-width: 100%; 
    vertical-align: middle; 
} 

#logo { 
    width: auto; 
    max-height: 40%; 
} 

Answer 1

使用インラインブロック：

https://fiddle.jshell.net/o4u8per4/

.header_cells { 
    display:inline-block; 
    vertical-align: middle; 
}