首页 > web前端 > css教程 > 为什么我的 `margin: 0 auto;` 没有将我的元素集中在 100% 宽度的父级中?

为什么我的 `margin: 0 auto;` 没有将我的元素集中在 100% 宽度的父级中?

Susan Sarandon
发布: 2024-12-05 06:40:16
原创
344 人浏览过

Why Isn't My `margin: 0 auto;` Centering My Element Within a 100% Width Parent?

为什么使用“margin: 0 auto;”将元素居中在 100% 宽度内,父级不起作用

问题描述:

考虑这种情况:您有一个宽度设置为 100% 的父级 div 和一个无序的列出其中。您已应用“margin: 0 auto;”到无序列表以使其居中,但它拒绝让步。

问题原因:

问题的关键在于您已经定义了父 div 的宽度,而不是您尝试居中的元素的宽度。对于“保证金:0 自动;”为了有效地工作,必须指定居中元素的宽度。

解决方案:

要纠正此问题,请为无序列表指定宽度:

#header ul {
    margin: 0 auto;
    width: 90%;
}
登录后复制

额外注意事项:

为了获得更优雅的外观,请考虑以下改进:

  • 删除“float: left;” “li”元素中的属性,因为它与“display: inline”冲突,并在 IE6 和更早版本的浏览器中创建意外的边距加倍。
  • 将下面的样式属性直接应用于“li”元素:
#header ul li {
    color: #CCCCCC;
    display: inline;
    font-size: 20px;
    padding-right: 20px;
}
登录后复制

以上是为什么我的 `margin: 0 auto;` 没有将我的元素集中在 100% 宽度的父级中?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板