CSS <li> 标签的边距自动居中

Question

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<style>
body,html,aside,article,header,nav,footer,ul,section,div,li,ul{
    padding:0;
    margin:0;
}

aside,article,header,nav,footer,section,div,ul {
    display:block;
    margin:0;
    padding:0;
}
html {
    background:#F1C4F2;
}
body {
    width:1000px;
    background:#FF53A9;
    margin: 0 auto;
    font-size:12px;

}

#header{
    width:98%;
    background-color:#F081F3;
    padding:1%;
    color:white;
    font-size:1.2em;
}

#nav {
    width:98%;
    background-color:#C043AA;
    font-size:1.1em;
    padding:1%;
}

ul{
    margin:0 auto;
    width:100%
}

li {
    list-style:none;
    float:left;
    margin-right:8%;
    color:white;

}
     OR
/*   
     li {
    list-style:none;
    display:inline-block;
    margin-right:8%;
    color:white;

}

    */ 
</style>


<body>

<div id="header">
some.com
</div><!--HEADER-->

<div id="nav">
<ul>
    <li>Home</li>
    <li>Bio</li>
    <li>Gallery</li>
    <li>Upcoming Projects</li>
    <li>Videos</li>
</ul>
</div><!--NAVIGATION-->

<div id="footer"> </div> <!--FOOTER-->

</body>
</html>

我在 'NAV' <DIV> 中有 'UL' 标签，为了我的导航，我创建了 'LI' 项并将其浮动，当我应用“margin:0 auto”时它不适用。
即使当我使用“display:inline-block”（这部分被注释掉）到'LI'.Js

Fiddle link: jsfiddle

Answer 1

尝试为您的 <ul> 添加 text-align:center 并从 <li> 中删除 float:left 并使用 display:inline-block; Demo

ul {
    margin:0 auto;
    width:100%;
    text-align:center;
}
li {
    list-style:none;
    display:inline-block;
    margin-right:8%;
    color:white;
}

Answer 2

这将使您的 ul 居中，我还添加了 overflow:hidden 以便包含浮点数（li）。

ul {
  margin: 0 auto;
  width: 50%;
  overflow: hidden; 
}

您将 margin:0px auto 应用于 100% 宽度的元素，但该元素不起作用。

结果：fixed

Answer 3

首先，ul 是居中但它是 100% 宽所以我假设，事实上。您希望列表项居中 ul.

因此，删除所有浮动，在 ul 上设置 text-align:center 并使 li 显示为 inline-block

* {
  padding: 0;
  margin: 0;
}
html {
  background: #F1C4F2;
}
body {
  width: 1000px;
  background: #FF53A9;
  margin: 0 auto;
  font-size: 12px;
}
#header {
  width: 98%;
  background-color: #F081F3;
  padding: 1%;
  color: white;
  font-size: 1.2em;
}
#nav {
  width: 98%;
  background-color: #C043AA;
  font-size: 1.1em;
  padding: 1%;
  text-align: center;
}
ul {
  background: blue;
}
li {
  list-style: none;
  display: inline-block;
  color: white;
  margin: 0 2%;
}

<body>

  <div id="header">
    some.com
  </div>
  <!--HEADER-->

  <div id="nav">
    <ul>
      <li>Home</li>
      <li>Bio</li>
      <li>Gallery</li>
      <li>Upcoming Projects</li>
      <li>Videos</li>
    </ul>
  </div>
  <!--NAVIGATION-->

  <div id="footer"></div>
  <!--FOOTER-->

CSS <li> 标签的边距自动居中

CSS Margin auto center for <li> tag

html

css

css-float