Centering things

[play_]

I'm having trouble centering my menu.

 

The way i have always done my menu, was

- i make them a list

- ul, li float to the left

- a display: block

 

but this works when there's a fixed width.

 

Now i just wanna align them in the center of the page.

 

here's the link of what i have (very minimal, for demonstration purpose)

http://purrr.org/del.html

 

Notice how i have the container aligned in the middle of the page, but not the text.

 

I could take out float: left and do display: inline, but then it won't let me add top/bottom padding to the links.

 

 

Thanks.

[play_]

K Update.

 

Found a way to center floating divs: http://www.cssplay.co.uk/menus/centered.html

 

However, even when i copy and paste the code, doesn't seem to work in IE7 for me.

 

Anyone?

[dbrimlow]

I could take out float: left and do display: inline, but then it won't let me add top/bottom padding to the links.

 

Who told you that?

 

Let's remove "text-align:center" from everything but the ul, and add "font-size:small" (which is @ 12px) to the body for a relative size dimension reference (so we can use ems for margin/padding). Also, don't forget to add type="text/css" to the style tag:

 

Then:

<style type="text/css">
body, html {
	margin: 0;
	padding: 0;
	font-size:small
}

.menu-holder{
	border: 1px solid red;


}

.menu {
	margin: 0 auto;
	background: #eee;
	width: 500px;
}

.menu ul {
	margin: .5em 0;
	padding: 0;
	list-style: none;
	text-align: center;

}

	.menu li {
	margin: .5em;
	padding: .25 .5em;
	display:inline;
}


</style>

 

This will center the list AND separately permit margins/paddings on both the ul and li elements