我有一个标题 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
)的解决方案,因为列表大小并不总是相同。
最佳答案
改变标题和/或两个 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
边距 (这会让导航的右侧看起来有更多空间)
关于html - 如何在标题 div 中水平居中放置两个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11582226/