How is this put in the center using CSS?

Question

Basically I want to put the div tags below in the center of the page. How is this done in CSS? I am having such a hard time doing it what is the best option!?

HTML

<div class="tab-selected" id="search">Search</div>
<div class="tab-unselected" id="search">Tags</div>
<div class="tab-unselected" id="search">Recruiters</div>

CSS:

.tab-selected {
background: #FF00FF;
-moz-border-radius: 3px;
border-radius: 3px;
font: 13px helvetica;
color: #FFFFFF;
height: 15px;
display: inline;
}

.tab-unselected {
-moz-border-radius: 3px;
border-radius: 3px;
font: 13px helvetica;
color: #585858;
height: 15px;
display: inline;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
position: relative;
width: 60px;
display: inline-block;
horizontal-align: center;
}

Answer 1

Wrap the class .tab-unselected in a seperate div whose properties would be -

.center { margin: 0 auto; float: none; }

Now -

<div class="center">
    <div class="tab-selected" id="search">Search</div>
    <div class="tab-unselected" id="search">Tags</div>
    <div class="tab-unselected" id="search">Recruiters</div>
</div>

Answer 2

horizontal-align does not exist. Use text-align: center instead. To horizontally center the element itself, use margin: 0 auto;, which equals:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin:left: auto;

The automatic right and left margin results in a centered element.

If you want to vertically align an element, use vertical-align: center (this does only work on inline elements).

Answer 3

Wrap them in a <div style="text-align: center;"> (or use some other way to apply that style to a containing element).

Answer 4

Wrap them in a div

#center {
margin: 0 auto 0 auto; }

Then apply

<div id="center"> <YOURSTUFF HERE> </div>