Centering Nav. Bar. [Archive] - Dynamic Drive Forums

Ron D

01-31-2011, 09:39 PM

I’m trying to get the navigation bar centered.

<div align="center"> centers my page but I cant get passed float:left;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>curbappeal12811strict</title>
</head>

<style type="text/css">

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

</style>
</head>

<body>

<div align="center">
<h1>Matt Galaska's Curb Appeal</h1>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

websterthehamster

02-01-2011, 02:23 AM

Are you trying to center the <h1> tag in the middle of its parent element? If so, consider trying the <center> tags. They always work for me (although I'm told they've been depreciated...)

djr33

02-01-2011, 03:06 AM

<center> tags are messy because they aren't standard (now) and behave in strange ways with different browsers. Also, what exactly is being centered?

<div style="text-align:center"> is roughly equivalent and will center the contents.

<h1> can have the same property.

To center a div or other block element (the holder, not the contents), you can use this:
<div style="margin:auto;">
Of course that assumes the div can be centered-- that is is less than 100% width.

Unlike the example above for the contents, that won't apply to the child elements, just that element.