为什么 `margin: 0 auto` 不将我的元素居中？

为什么 Margin: 0 Auto 无法使元素居中

当尝试使用 margin: 0 auto 属性水平对齐元素时，指定要居中的元素的宽度（而不是父元素的宽度）至关重要。

考虑以下情况：您有一个具有已定义宽度的父容器元素 (#header)，并且其中有一个无序列表 (

)。
元素应通过应用 margin: 0 auto 在 #header div 内水平居中。但是，如果您不指定
的宽度，元素，它不会在父容器中居中。

要解决此问题，请向

添加宽度属性。元素，例如：

#header ul {
  margin: 0 auto;
  width: 90%;
}

这会将 90% 的宽度分配给

元素。元素，使其在 #header div 中居中。

更新了 CSS 以改进布局（编辑）：

#header ul {
  list-style: none;
  margin: 0 auto;
  width: 90%;
}

#header ul li {
  color: #CCCCCC;
  display: inline;
  font-size: 20px;
  padding-right: 20px;
}

这些修改后的样式确保

ul>元素居中并且其列表项内联显示，消除了使用 float: left; 引起的任何问题。在

内并避免旧版本 Internet Explorer 中水平边距加倍。

以上是为什么 `margin: 0 auto` 不将我的元素居中？的详细内容。更多信息请关注PHP中文网其他相关文章！