How to move navigation bar to the horizontal center?

Question

I would like to move the following navigation bar to the horizontal center, but don't know how!? Any idea?

ul {
  list-style-type: none;
  padding-left: 350px;
  padding-top: 30px;
}

li a {
  display: block;
  color: #ffffff;
  padding: 10px 15px 10px 15px;
  text-decoration: none;
  font-size: 15px;
  border-left: 1px solid #FEDD19;
  float: left;
}

li a:hover {
  color: #000000;
  background-color: #FEDD19;
}

Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Oct 10 '16 at 14:10

score 0 · Answer 1 · edited May 23 '17 at 12:33

0

#nav ul {
    display: inline-block;
    list-style-type: none;
}

How to center a navigation bar with CSS or HTML?

edited May 23 '17 at 12:33

Community

1
1

answered Oct 10 '16 at 14:13

Razia sultana

2,168
3
15
20

antelove · Answer 2 · 2017-09-25T08:08:41.640

Navigation bar to center

.ul {
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: center;
  justify-content: center;  

  -webkit-align-items: center;
  align-items: center;

  width: 100%;
  height: auto;
  background-color: lightgrey;       
}

.li {
  background-color: cornflowerblue;
  padding: 0.5rem;
  margin: 0.5rem;       

  -webkit-align-self: center;       
  align-self: center;
}

a .li:hover {
  color: #000000;
  background-color: #FEDD19;
  cursor: pointer;
}

<div class="ul">
  <a><div class="li">1</div></a>
  <a><div class="li">2</div></a>
  <a><div class="li">3</div></a>  
  <a><div class="li">4</div></a>
  <a><div class="li">5</div></a>     
</div>

score -1 · Accepted Answer · answered Oct 10 '16 at 14:32

Wrap the <ul> into a div with fixed width and apply margin: 0px auto; to that div.

body {
 background-color: black;
}
#nav {
 width: 440px;
 margin: 0px auto;
 border: 1px solid white;
}
.clear {
 clear: both;
}
ul {
 list-style-type: none;
 padding-top: 30px;
}

li a {
 display: block;
 color: #ffffff;
 padding: 10px 15px 10px 15px;
 text-decoration: none;
 font-size: 15px;
 border-left: 1px solid #FEDD19;
 float: left;
}

li a:hover {
 color: #000000;
 background-color: #FEDD19;
}

<div id="nav">
 <ul>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <div class="clear"></div>
 </ul>
</div>

How to move navigation bar to the horizontal center?

3 Answers3

Navigation bar to center