我有一个标题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
),因为列表大小并不总是相同。
答案 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;
}
答案 2 :(得分:0)
嗨,您可以尝试使用以下css for #header
#header {
position:fixed;
top:0;
left:0;
right:0;
background-color:#333333;
padding:20px;
text-align:center;
}