首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为什么我不能居中页边距:0自动?

为什么我不能居中页边距:0自动?
EN

Stack Overflow用户
提问于 2009-06-08 06:25:41
回答 4查看 432.1K关注 0票数 137

我有一个#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>
EN

回答 4

Stack Overflow用户

发布于 2013-04-08 01:45:37

内联块覆盖了整行(从左到右),所以左边距和/或右边距在这里不起作用。你需要的是一个块,一个块在左边和右边都有边框,所以可以受到边距的影响。

这就是我的工作方式:

#content {
display: block;
margin: 0 auto;
}
票数 52
EN

Stack Overflow用户

发布于 2010-08-24 13:41:47

为什么不行?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}
票数 14
EN

Stack Overflow用户

发布于 2017-06-16 14:46:12

我不知道为什么第一个答案是最好的,我试过了,事实上,正如@kalys.osmonov所说,你可以将text-align:center赋给header,但你必须将ul作为inline-block而不是inline,而且你还必须注意到text-align可以被继承,这在某种程度上是不好的,所以更好的方法(不适用于IE9)是使用margintransform。只需从ul中删除float rightmargin;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中心的动态宽度的问题。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/963636

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档