Center Elements Inside of a Div - css

Question

I have a div where the elements need to be centered:
<div style="width:800px;margin:0 auto;color:#000;"><h3 style="float:left;color:#000;margin:0 10px;"> Test </h3><h4 style="float:left;padding-top:3px;"> | </h4><h3 style="color:#000;float:left;margin:0 10px;"> Test </h3></div>
However, the elements all just stay to the left. How do I fix this and center all the h3's and h4's?
Here is my example: http://approvemyride.ca/reno/

Answer 1

http://jsfiddle.net/ZeJdc/
HTML:
<div>
<h3> Test </h3>
<h4> | </h4>
<h3> Test </h3>
</div>
CSS:
div {
width: 800px;
margin: 0 auto;
color: #000;
text-align: center;
}
h3 {
color: #000;
margin: 0 10px;
display: inline-block;
}
h4 {
padding-top: 3px;
display: inline-block;
}
Check that out and let me know what you think, if it doesn't look centered when you first open it try stretching the little divider to the left to give the results pane more room.
To clarify, display:inline-block is what's allowing all the headers to be displayed on the same line while text-align:center is what's centering all of your header elements inside the <div>.

Answer 2

Whenever I face any floated container to center horizontally I use the followings. Try wrapping your markup (which needs to be centered; the div in your case) with these:
<div class="center_outer">
<div class="center_inner">
<!-- Put your contents here (which needs to be centered) -->
</div>
</div>
CSS:
.center_outer
{
position: relative;
left: 50%;
float: left;
}
.center_inner
{
position: relative;
left: -50%;
}
Check: http://jsfiddle.net/jduDD/1/ (I have removed the width style)