如何使用 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

horizo​​ntal-align 确实不存在。使用 text-align: center 代替。要使元素本身水平居中，请使用margin: 0 auto;，它等于：

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

自动right和left margin 导致元素居中。

如果您想垂直对齐元素，请使用vertical-align: center（这仅适用于内联元素）。

Answer 3

将它们包装在

中（或使用其他方式将该样式应用于包含元素）。

Answer 4

将它们包裹在 div 中

#center {
margin: 0 auto 0 auto; }

然后应用

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