Centering a menu of buttons

**mikeglaz** · 09-22-2011 01:10 PM

I have this menu of buttons that I'm trying to center:
http://www.mikeglaz.com/test.html

Now the red div is centered within the page. The green div is centered within the red div but the menu buttons aren't centered and I can't figure out why. Also, in the code I have the buttons inside both divs. Why don't they appear inside the divs? Here's my code:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Development &amp; Design Foundations CSS Buttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.center {margin: 0 auto;
			width: 950px;
			border: 3px solid red;}
.center2 {margin: 0 auto;
			 width: 790px;
			 border: 3px solid green;}
.example2 li {
	display:inline;
    list-style-type:none;
	text-align:center;
	font-family:Verdana, sans-serif;
	font-size:10px;
	line-height:22px;
	text-decoration:none;
	color:#ffffff;
	font-weight:bold;
	background-color:#000033;
    width:150px;	
	float:left; 
}
.example2 a {	border-top:1px solid #6666ff;
	border-right:1px outset #444;
	border-bottom:1px outset #444;
	border-left:1px solid #6666ff;
	padding:5px;
	text-decoration:none;
	display:block;
	font-weight:bold;
	}
	
.example2 a:link {
	color:#ffffff;
	background-color:#000033;
}
.example2 a:visited {
	color:#cccccc;
	background-color:#000033;
}
.example2 a:hover {
	color:#ffffff;
	background-color:#2a85c4;

}
</style>
</head>
<body>
<div class="center">
<div class="center2">
<ul class="example2">
  <li><a href="#">Home</a></li>
  <li><a href="#">Products We Offer</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li> 
</ul>
</div>
</div>
</body>
</html>

thanks,
mike

**rtrethewey** · 09-22-2011 05:41 PM

Try setting the margin on .example2 to 0. I've found that browsers set the margins on <ul>s to some very unexpected values by default, and every one is different.

Thread: Centering a menu of buttons

Thread Tools

Display

Centering a menu of buttons

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions