My goal is to make my #header div centered. It contains buttons to navigate to different pages. I tried using the <div align=center> tag but it just won't work. I just want it to be in the center like everything else on my page.
Here is my code:
<style>
#header ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#header ul li {
position:relative;
float:left;
}
#header ul li ul li a {
font-size: 12px;
}
#header ul li a {
display: block;
height: 35px;
width: 90px;
color: #666;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
line-height: 35px;
text-align: center;
}
#header ul li ul {
position: absolute;
top: 31px;
visibility: hidden;
}
#header ul li a:hover {
color: #333;
font-weight: bold;
}
#header ul li:hover ul {
visibility: visible;
}
#header {
width:100%;
margin: 0px auto 0px auto;
text-align:left;
}
body {
padding-left:40px;
padding-right:40px;
text-align: center;
}
</style>
</head>
<body bgcolor="#E6F7F4">
<center>
<p><img src="othlogo.gif"/><br />
</p>
<div id="header" align="right" >
<ul>
<li><a href"blog.html">Blog</a>
</li>
</ul>
<ul>
<li><a href"blog.html">More</a>
<ul>
<li><a href="more.html">Education</a></li>
<li><a href="more.html">Domestic</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href"blog.html">Option3</a>
<ul>
<li><a href="more.html">Psychology</a></li>
<li><a href="more.html">Map</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href"blog.html">About</a>
</li>
</ul>
</div>
You can use margin: auto to center #header as long as it has a width set on it.