Как это поместить в центр с помощью CSS?

Question

В основном я хочу поместить теги div ниже в центре страницы. Как это делается в CSS? Мне так тяжело делать это, какой лучший вариант!?

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

Оберните класс .tab-unselected в отдельный div, свойства которого будут -

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

Теперь -

<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 существует не существует. Вместо этого используйте text-align: center. Для горизонтального центрирования самого элемента используйте margin: 0 auto;, что равно:

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

Автоматическое поле right и left приводит к центрированному элементу.

Если вы хотите выровнять элемент по вертикали, используйте vertical-align: center (это только работает на встроенных элементах).

Answer 3

Оберните их в div

#center {
margin: 0 auto 0 auto; }

Затем примените

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

Answer 4

Оберните их в <div style="text-align: center;"> (или используйте другой способ применить этот стиль к содержащему элементу).