I've done tons of research on this and I cannot find any answer on how to fix this. Let's get started.
I have 2 menus and an image(you can see the format in the jFiddle). I want to center the menus. Now yes I know this is usually simple, but I have tried a bunch of normal remedies which include margin, position, and padding. Please give me some help. You can play around with the jFiddle by using the link below. Thanks.
Important CSS
#nav3 {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
text-align: center;
vertical-align: text-top;
}
#nav3 ul {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0;
}
#nav3 li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-left: 1px solid #ccc;
vertical-align: super;
margin: 10%;
}
Important HTML
<body>
<div id="nav3">
<ul>
<li><a href="#" style="float: left;">Home</a></li>
<?php
if($_SESSION){
?> <li><a href="#" style="float: left; border-right: 1px solid #ccc;">Logout</a></li> <?
}else{
?> <li><a href="#" style="float: left;">Login</a></li>
<li><a href="#" style="float: left; border-right: 1px solid #ccc;">Signup</a></li>
<?
}
?>
</ul>
</div>
<img style="margin-left: 650; z-index: 9;" src="includes/logo/diagram_v2_22.png">
<div id="nav">
<ul>
<li><a href="#" style="float: left">XBOX360</a></li>
<li><a href="#" style="float: left">XBOX1</a></li>
<li><a href="#" style="float: left">PS3</a></li>
<li><a href="#" style="float: left; border-right: 1px solid #ccc;">PS4</a></li>
</ul>
</div>
</body>
There is no float: center;. Use something like this:
#nav ul li, #nav3 li {display: inline-block;}
#nav ul {text-align: center;}