对齐 <ul> 以他人为中心

Question

I have multiple <ul> and I would like to align them in the center of my <nav> , for this I try this code below: 我有多个<ul> ，我想将它们对准<nav>的中心，为此，我尝试下面的代码：

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

You can see the test in jsfiddle , How can I align my <ul> in center of <nav> ? 您可以在jsfiddle中看到测试，如何将<ul>对准<nav>中心？

Answer 1

Method 1 方法1

Remove the floats, use display:inline-block 除去浮子，使用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>

Method 2 方法2

Flexbox 弹性盒

 #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>

Method 3 方法3

CSS Tables 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>

Answer 2

if you float you use your spells to half- container flow so you lose the inheritance with the parent so the auto margin does not detect the width of its parent 如果浮动，则使用拼写法将容器的流量减半，从而失去与父代的继承，因此自动边距不会检测到其父代的宽度

exemple of template to center ul : 以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>

对齐 <ul> 以他人为中心

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-04-18 15:02:29

解决方案2
0 2016-04-18 15:50:01

对齐 <ul> 以他人为中心

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-04-18 15:02:29

解决方案2 0 2016-04-18 15:50:01

解决方案1
3 已采纳 2016-04-18 15:02:29

解决方案2
0 2016-04-18 15:50:01