Align <ul> in a middle of div - html

Question

I want that the text of the <li> will be in the middle of the #nav_bar. I tried to do this by margin and padding and I didn't succeed, anyone know how to do this?
#nav_bar {
border: 2px solid black;
background-color: gray;
height: 40px;
}
li {
display: inline-block;
margin: 40px;
}
<div id="header">
<div id="nav_bar">
<ul>
<li>home</li>
<li>home 2</li>
<li>home 3</li>
<li>home 4</li>
<li>home 5</li>
</ul>
</div>
</div>

Answer 1

Reset ul's default padding, add text-align: center to ul to center the lis and add some left and right padding to lis.
#nav_bar {
border: 2px solid black;
background-color: gray;
height: 40px;
}
ul {
text-align: center;
padding: 0;
}
li {
display: inline-block;
padding: 0 10px;
}
<div id="header">
<div id="nav_bar">
<ul>
<li>home</li>
<li>home 2</li>
<li>home 3</li>
<li>home 4</li>
<li>home 5</li>
</ul>
</div>
</div>

Answer 2

Try text-align:center http://jsfiddle.net/oktsheaw/
#nav_bar {
text-align:center;
border: 2px solid black;
background-color: gray;
height: 40px;
}

Answer 3

Try this:
#nav_bar {
border: 2px solid black;
background-color: gray;
height: 40px;
}
ul {
margin: 0;
padding: 0;
}
li {
display: inline;
margin; 0;
list-style: none;
line-height: 40px;
padding: 0 15px;
}

Answer 4

You mean like this: http://codepen.io/anon/pen/KwaNwZ
CSS:
#nav_bar {
border: 2px solid black;
background-color: gray;
text-align:center;
}
li {
display: inline-block;
margin-left: 40px;
}

Answer 5

Horizontally
You could use text-align:center to align horizontally.
#nav_bar {
border: 2px solid black;
background-color: gray;
height: 40px;
text-align:center;
}
ul {
padding: 0;
}
li {
display: inline-block;
}
<div id="header">
<div id="nav_bar">
<ul>
<li>home</li>
<li>home 2</li>
<li>home 3</li>
<li>home 4</li>
<li>home 5</li>
</ul>
</div>
</div>
Vertically
You could use positioning to align vertically.
#nav_bar {
border: 2px solid black;
background-color: gray;
height: 40px;
width:100%;
position:relative;
}
ul {
padding: 0;
margin:0;
position: absolute;
top: 25%;
}
li {
display:inline-block;
}
<div id="header">
<div id="nav_bar">
<ul>
<li>home</li>
<li>home 2</li>
<li>home 3</li>
<li>home 4</li>
<li>home 5</li>
</ul>
</div>
</div>
Both
I've used positioning, although other forms would be equally as efficient.
#nav_bar {
border: 2px solid black;
background-color: gray;
height: 40px;
width:100%;
position:relative;
}
ul {
padding: 0;
margin:0;
position: absolute;
top: 25%;
left:25%;
}
li {
display:inline-block;
}
<div id="header">
<div id="nav_bar">
<ul>
<li>home</li>
<li>home 2</li>
<li>home 3</li>
<li>home 4</li>
<li>home 5</li>
</ul>
</div>
</div>

Answer 6

because of the height the elements were flowing outside remove the height of #nav_bar it will be vertically center and add text-align:center horizontally center
#nav_bar {
border: 2px solid black;
background-color: gray;
text-align: center;
}
li {
display: inline-block;
margin: 5px;
}
<div id="header">
<div id="nav_bar">
<ul>
<li>home</li>
<li>home 2</li>
<li>home 3</li>
<li>home 4</li>
<li>home 5</li>
</ul>
</div>
</div>