如何在标题div中水平居中两个div?

时间:2012-07-20 15:20:37

标签: html css center

我有一个标题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),因为列表大小并不总是相同。

3 个答案:

答案 0 :(得分:5)

一种方法,可以更改标题和/或两个div的宽度(如果标题变得更长或更短,或者添加或删除了导航项):

text-align: center上设置#header,在display: inline-block#title设置#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边距(这会使导航右侧看起来有更多空间)

答案 1 :(得分:2)

您可以将标题和导航div包装在另一个div中,然后使用margin: 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>​​​​​​​​

<强> CSS

#center {
    width: 500px; /* or any other width */
    margin: 0 auto;
}

JS小提琴:http://jsfiddle.net/rJyuJ/

答案 2 :(得分:0)

嗨,您可以尝试使用以下css for #header

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