I am trying to center a UL tag inside a DIV and I am having some problems. I have tried many things. The code is attached below. The UL is a horizontal list.
<!-- Header -->
<div id="header">
<div class="container">
<!-- Nav -->
<nav id="nav">
<ul>
<li <?php if($currenturl == 'index.php') { ?>class="active"<?php } ?>><a href="index.php">Home</a></li>
<li <?php if($currenturl == 'limitededitions.php') { ?>class="active"<?php } ?>><a href="limitededitions.php">Limited Editions</a></li>
<li <?php if($currenturl == 'left-sidebar.php') { ?>class="active"<?php } ?>><a href="left-sidebar.php">Products</a></li>
<li <?php if($currenturl == 'services.php') { ?>class="active"<?php } ?>><a href="services.php">Services</a></li>
<li <?php if($currenturl == 'suppliers.php') { ?>class="active"<?php } ?>><a href="suppliers.php">Suppliers</a></li>
<li <?php if($currenturl == 'right-sidebar.php') { ?>class="active"<?php } ?>><a href="right-sidebar.php">About</a></li>
<li <?php if($currenturl == 'no-sidebar.php') { ?>class="active"<?php } ?>><a href="no-sidebar.php">Contact</a></li>
<li><a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_cart&business=WEM898SE24RZL&display=1">View Cart</a></li>
</ul>
</nav>
</div>
</div>
<!-- Header -->
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header
{
position: relative;
background: #FFF;
}
#header .container
{
position: relative;
padding: 3em 0em;
}
/*********************************************************************************/
/* Nav */
/*********************************************************************************/
#nav
{
position: relative;
top: 1em;
}
#nav > ul > li
{
float: left;
}
#nav > ul > li:last-child
{
padding-right: 0;
}
#nav > ul > li > a,
#nav > ul > li > span
{
display: block;
padding: 0.80em 1.2em;
letter-spacing: 0.06em;
text-decoration: none;
text-transform: uppercase;
font-size: 1.1em;
outline: 0;
color: #333;
}
#nav li.active a
{
background: #8B5A2B;
border-radius: 5px;
color: #FFF;
}
#nav > ul > li > ul
{
display: none;
}
Any help will be greatly appreciated! Thanks.
I cant completely tell how you want to center this. Your float left wasn't helping though, is it 100% necessary? Regardless, here's a codepen to show you a way of doing it, not sure if it's the way you would like though.
I'm assuming it's a conventional navigation that needs to be centering in the middle of the page and inline.
http://codepen.io/anon/pen/qEQodo
changed CSS:
#nav {
position: relative;
top: 1em;
text-align:center;
margin:0 auto;
}
#nav > ul {
margin:0 auto;
text-align:center;
position:relative;
display:block;
}
#nav > ul > li {
display:inline;
list-style-type:none;
margin:10px;
}