Html 如何在一个标题div内水平居中放置两个div？

我有一个标题div，它以100%的宽度固定在浏览器窗口的顶部。在标题div中有一个带有标题文本的div，还有一个带有水平列表的div。水平列表div应显示在标题文本div的右侧

这是我的CSS和HTML：

#标题{
位置：固定；
排名：0；
左：0；
右：0；
背景色：#333333；
填充：20px；
}
#头衔{
浮动：左；
颜色：#000000；
字体大小：30px；
右边距：24px；
背景色：#ffffff；
填充：8px；
}
#导航ul{
填充：0；
保证金：0；
列表样式类型：无；
}
#导航ulli{
显示：内联；
右边距：20px；
填充：3倍；
背景色：#ffffff；
}
#导航ulli a{
颜色：#000000；
文字装饰：无；
}

一些标题文本

您可以将标题和导航div包装到另一个div中，然后使用

边距：0 auto

将该div居中

HTML

<div id="header">
    <div id="center">
        <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>​​​​​​​​

---

JS Fiddle:

您好，请尝试使用以下css作为#标题

---

一种方法，用于更改标题和/或两个div的宽度（如果标题变长或变短，或者如果添加或删除导航项）：

在

#标题

上设置

文本对齐：居中

，在

#标题

和

#导航

-演示上设置

显示：内联块

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

边距（这会使导航的右侧看起来有更多空间）

如果要更改菜单的宽度，这将不起作用，我认为这不是一个好的解决方案，因为列表项的数量并不总是相同的。例如，如果用户已登录，则可能会有更多项目。是否有一种不必指定宽度为500px的方法？请参阅：可能重复的

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

#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 */
}