我有一个#header
目录,它是100% width
,在这个目录中我有一个无序列表。我已经将margin: 0 auto
应用于无序列表,但它不会将其放在头文件div中。
有人能告诉我为什么吗?我认为如果我定义了父div的宽度,那么无序列表应该能够以margin: 0 auto
居中。我遗漏了什么?
下面是我的代码:
<style>
* {
margin: 0;
padding: 0;
}
#header {
width: 100%;
background-color: #333;
min-height: 160px;
font-family:Arial, Helvetica, sans-serif;
}
#sitename {
font-size: 50px;
width: 620px;
margin:0 auto;
padding-top: 35px;
color:#999;
}
#header ul {
float: right;
margin: 0 auto;
}
#header ul li {
float: left;
padding-right: 20px;
list-style-type: none;
font-size: 20px;
}
</style>
</head>
<body>
<div id="header">
<h1 id="sitename">Photography Auction Site</h1>
<ul>
<li>List of Photos</li>
<li>Image Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
发布于 2013-04-08 01:45:37
内联块覆盖了整行(从左到右),所以左边距和/或右边距在这里不起作用。你需要的是一个块,一个块在左边和右边都有边框,所以可以受到边距的影响。
这就是我的工作方式:
#content {
display: block;
margin: 0 auto;
}
发布于 2010-08-24 13:41:47
为什么不行?
#header {
text-align: center;
}
#header ul {
display: inline;
}
发布于 2017-06-16 14:46:12
我不知道为什么第一个答案是最好的,我试过了,事实上,正如@kalys.osmonov所说,你可以将text-align:center
赋给header
,但你必须将ul
作为inline-block
而不是inline
,而且你还必须注意到text-align
可以被继承,这在某种程度上是不好的,所以更好的方法(不适用于IE9)是使用margin
和transform
。只需从ul
中删除float right
和margin;0 auto
即可,如下所示:
#header ul {
/* float: right; */
/* margin: 0 auto; */
display: inline-block;
margin-left: 50%; /* From parent width */
transform: translateX(-50%); /* use self width which can be unknown */
-ms-transform: translateX(-50%); /* For IE9 */
}
这种方法可以解决在不关心IE8等的情况下制作ul
中心的动态宽度的问题。
https://stackoverflow.com/questions/963636
复制相似问题