-1

I have multiple <ul> and I would like to align them in the center of my <nav>, for this I try this code below:

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

Lacrifilm
  • 213
  • 2
  • 15

2 Answers2

3

Method 1

Remove the floats, use 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

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

CSS Tables

#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>
Paulie_D
  • 95,305
  • 9
  • 106
  • 134
  • *Very* nice answer. Well done. Note: if you want the `ul`s stacked on top of each other instead of side by side (preferable for mobile devices), then you can use `display: block;` instead of `display: inline-block;`. The `ul`s will still be centered. – UndoingTech Apr 18 '16 at 15:05
0

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 :

<!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>
InitialCrow
  • 303
  • 1
  • 5