vinya vinya - 1 month ago 9
CSS Question

How to move navigation bar to the horizontal center?

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;


}

Answer

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>