Currently working on a webpage using html/css, I came across a stylish navigation bar which I decided to customize. However, I'm facing difficulty in aligning the navigation bar at the center of the header. Here is a snapshot of the current layout:
https://www.dropbox.com/s/20viph17tc36iwb/header.png
index.html
<ul id="nav">
<li><a href="#"><img src="images/home.png" /> Home</a></li>
<li><a href="#"><span><img src="images/temperature.png" /> Measurement</span></a></li>
<li><a href="#"><span><img src="images/sun.png" /> Day Shift</span></a></li>
<li><a href="#"><img src="images/evening.png" /> Evening Shift</a></li>
<li><a href="#"><img src="images/wash.png" /> Control Monitor</a></li>
<li><a href="#"><img src="images/search.png" /> Search</a></li>
<li><a href="#"><img src="images/top2.png" /> Statistics</a></li>
<li><a href="#"><img src="images/top3.png" /> Report</a></li>
</ul>
menu.css
ul#nav {
/* CSS styles for navigation menu */
}
/* More CSS styles for navigation styled menu */
design.css
#logo {
/* Logo position and alignment styles */
}
.header {
/* Header design properties */
}