将 <ul> 与其他中心对齐答案

【问题标题】：Align <ul> center with others将 <ul> 与其他中心对齐
【发布时间】：2016-04-18 14:57:50
【问题描述】：

我有多个<ul>，我想将它们对齐在我的<nav> 的中心，为此我尝试以下代码：

#navigation{
  width:100%;  height:200px; color:black; background:blue;  text-align:center;
    margin:0 auto;
}
ul{
margin: 0 auto;
float:left;
}

您可以在jsfiddle 中看到测试，如何将我的<ul> 对齐在<nav> 的中心？

【问题讨论】：

您是否需要一个
标签才能使其居中？
不知何故我有一个不同的小提琴

标签： html css

【解决方案1】：

方法一

删除浮动，使用display:inline-block

#navigation {
  width: 100%;
  height: 200px;
  color: black;
  text-align: center;
  margin: 0 auto;
}
ul {
  display: inline-block;
  vertical-align: top;
}
li {
  list-style: none;
  font-size: 16px;
  font-family: My Custom Font2;
  margin: 5px;
  font-weight: 600;
  margin-right: .8em;
  padding: 0;
}

<nav id="navigation">
  <ul>
    <li class="titleLi">About Us</li>
    <li><a href="" target="">Team</a>
    </li>
    <li><a href="" target="">Blog</a>
    </li>
    <li><a href="" target="">Contact</a>
    </li>
    <li><a href="" target="">Support</a>
    </li>
  </ul>

  <ul>
    <li class="titleLi">Download</li>
    <li><a href="" target="">for iOS</a>
    </li>
    <li><a href="" target="">for Android</a>
    </li>
  </ul>

  <ul>
    <li class="titleLi">Legal</li>
    <li><a href="" target="">Terms and conditions</a>
    </li>
    <li><a href="" target="">Privacy police</a>
    </li>
  </ul>

</nav>

方法二

弹性盒

#navigation {
  width: 100%;
  height: 200px;
  color: black;
  text-align: center;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
ul {} li {
  list-style: none;
  font-size: 16px;
  font-family: My Custom Font2;
  margin: 5px;
  font-weight: 600;
  margin-right: .8em;
  padding: 0;
}

<nav id="navigation">
  <ul>
    <li class="titleLi">About Us</li>
    <li><a href="" target="">Team</a>
    </li>
    <li><a href="" target="">Blog</a>
    </li>
    <li><a href="" target="">Contact</a>
    </li>
    <li><a href="" target="">Support</a>
    </li>
  </ul>

  <ul>
    <li class="titleLi">Download</li>
    <li><a href="" target="">for iOS</a>
    </li>
    <li><a href="" target="">for Android</a>
    </li>
  </ul>

  <ul>
    <li class="titleLi">Legal</li>
    <li><a href="" target="">Terms and conditions</a>
    </li>
    <li><a href="" target="">Privacy police</a>
    </li>
  </ul>

</nav>

方法3

CSS 表格

#navigation {
  width: 100%;
  height: 200px;
  color: black;
  text-align: center;
  margin: 0 auto;
  display: table;
}
ul {
  display: table-cell;
}
li {
  list-style: none;
  font-size: 16px;
  font-family: My Custom Font2;
  margin: 5px;
  font-weight: 600;
  margin-right: .8em;
  padding: 0;
}

<nav id="navigation">
  <ul>
    <li class="titleLi">About Us</li>
    <li><a href="" target="">Team</a>
    </li>
    <li><a href="" target="">Blog</a>
    </li>
    <li><a href="" target="">Contact</a>
    </li>
    <li><a href="" target="">Support</a>
    </li>
  </ul>

  <ul>
    <li class="titleLi">Download</li>
    <li><a href="" target="">for iOS</a>
    </li>
    <li><a href="" target="">for Android</a>
    </li>
  </ul>

  <ul>
    <li class="titleLi">Legal</li>
    <li><a href="" target="">Terms and conditions</a>
    </li>
    <li><a href="" target="">Privacy police</a>
    </li>
  </ul>

</nav>

【讨论】：

非常很好的答案。做得好。注意：如果您希望uls 堆叠在一起而不是并排（移动设备更可取），那么您可以使用display: block; 而不是display: inline-block;。 uls 仍将居中。

【解决方案2】：

如果你浮动，你会使用你的咒语来半容器流，这样你就会失去与父级的继承，因此自动边距不会检测到其父级的宽度

以 ul 为中心的模板示例：

<!DOCTYPE html>
<html>
<head>
    <title>test ul center</title>
    <style type="text/css">
    #wrapper{
        margin: 0 auto;
        max-width: 1200px;
    }
    #navigation{
        margin: 0 auto;
        width: 40%;

    }
    #navigation ul{


        vertical-align: top;
        display: inline-block;
    }

    </style>
</head>

<body>
<div id ="wrapper">
    <nav id="navigation">
      <ul>
        <li class="titleLi">About Us</li>
        <li><a href="" target="">Team</a>
        </li>
        <li><a href="" target="">Blog</a>
        </li>
        <li><a href="" target="">Contact</a>
        </li>
        <li><a href="" target="">Support</a>
        </li>
      </ul>

      <ul>
        <li class="titleLi">Download</li>
        <li><a href="" target="">for iOS</a>
        </li>
        <li><a href="" target="">for Android</a>
        </li>
      </ul>

      <ul>
        <li class="titleLi">Legal</li>
        <li><a href="" target="">Terms and conditions</a>
        </li>
        <li><a href="" target="">Privacy police</a>
        </li>
      </ul>

    </nav>
</div>
</body>
</html>

【讨论】：