html - ヘッダー div 内で 2 つの div を水平方向に中央揃えする方法は?

Question

ブラウザー ウィンドウの上部に 100% 幅で固定されたヘッダー div があります。ヘッダー div 内には、タイトル テキストを含む div と、水平方向のリストを含む div があります。水平リスト div は、タイトル テキスト div の右側に表示する必要があります。

これが私のCSSとHTMLです：

#header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  background-color:#333333;
  padding:20px;
}

#title {
  float:left;
  color:#000000;
  font-size:30px;
  margin-right:24px;
  background-color:#ffffff;
  padding:8px;
}

#navigation ul {
  padding:0;
  margin:0;
  list-style-type:none;
}

#navigation ul li {
  display:inline;
  margin-right:20px;
  padding:3px;
  background-color:#ffffff;
}

#navigation ul li a {
  color:#000000;
  text-decoration:none;
}

<div id="header">
  <div id="title">Some Title Text</div>
  <div id="navigation"><ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul></div>
</div>

そのため、現在、タイトルとナビゲーション div はヘッダー div 内で左揃えになっています。タイトルとナビゲーション div を水平方向に中央揃えするにはどうすればよいですか?

編集:width: 500pxリストのサイズは常に同じではないため、ハードコードされた幅 (例: ) を使用しないソリューションをお勧めします。