html - 如何在标题 div 中水平居中放置两个 div？

Question

我有一个标题 div，它以 100% 的宽度固定在浏览器窗口的顶部。在标题 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)的解决方案，因为列表大小并不总是相同。

Answer 1

改变标题和/或两个 div 宽度的方法(如果标题变长或变短，或者添加或删除导航项):

在#header上设置text-align: center，在#title上设置display: inline-block > 和 #navigation - 演示 http://dabblet.com/gist/3151355

CSS 的变化:

#header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    background-color:#333333;
    padding:20px;
    text-align: center; /* added */
}
#title {
    color:#000000;
    font-size:30px;
    margin-right:24px;
    display: inline-block; /* took out float:left and added this */
    background-color:#ffffff;
    padding:8px;
}
#navigation {
    display: inline-block; /* added */
}

我还添加了 #navigation ul li:last-child {margin-right:0} 以便在最后一个列表项之后没有 24px 边距 (这会让导航的右侧看起来有更多空间)