div not centering - text not centering

Well i've been messing around with this for quite a while and tried a lot of different methods, text-align: center; - margin: auto; - left: auto; - right: auto in varies ways, but with no luck.. If you take a look at:

http://sbeinati.monline.dk/
stylesheet: http://sbeinati.monline.dk/styles.css
you can see some buttons saying "hovedside" etc.

Nr 1 - i'd like to center these buttons
Nr 2 - i'd like to center the text within the buttons

i've come to a point where i've simply run out of ideas, so really need some help..

you can take a look at the html if you want, else i've narrowed it down here;

HTML;
-----------------------------------------------------------

<div id="menu_container">

	<div id="menu_left"></div>
		<div id="menubg">
			<div style="position: relative; width: 100%; margin: auto; text-align: center;">
			  <div id="knap_left"></div>
				<div id="knap_bg">
				<div style="position: relative; top: 7px; left: 4px;"><a href="link.com" class="knap">Hovedside</a></div>
			  </div>
			  <div id="knap_left"></div>
				<div id="knap_bg">
				<div style="position: relative; top: 7px; left: 4px;"><a href="link.com" class="knap">Gallery</a></div>
			  </div>
			  <div id="knap_left"></div>
				<div id="knap_bg">
				<div style="position: relative; top: 7px; left: 4px;"><a href="link.com" class="knap">CV</a></div>
			  </div>
			  <div id="knap_left"></div>
				<div id="knap_bg">
				<div style="position: relative; top: 7px; left: 4px;"><a href="link.com" class="knap">Sjove Ting </a></div>
			  </div>
		</div>
	</div>
<div id="menu_right"></div>
</div>

Code (markup):

-----------------------------------------------------------
CSS for involving id's;
-----------------------------------------------------------
#menu_container {
width: 806px;
height: 25px;
}

#menu_container *{
float: left;
height: 25px;
text-align: center;
}

#menu_left {
background-image: url(images/menu_left.gif);
width: 38px;
background-repeat: no-repeat;
}

#menubg {
background-image: url(images/menu_bg.gif);
width: 730px;
background-repeat: repeat;
text-align: center;
}

#menu_right {
background-image: url(images/menu_right.gif);
width: 38px;
background-repeat: no-repeat;
}
-----------------------------------------------------------

Any help would be appreciated. Thanks in advance!

 

by the way its:
margin: 0px auto;

-HaloT

 

For perfection, remove the 'px' as well. margin: 0 auto;

There isn't a need to define units if you aren't using any.

 

I like using a div with text-align: center then another div inside with margin-right: auto; and margin-left: auto; Seems to work very well on different browsers for centering divs. Then use a text-align right or left to move the text in your inner divs, default hsould be at center.