如何将此内容中的内容居中？

Question

这是一个链接：http://jsfiddle.net/zCXMv/18/

我无法弄清楚如何让这个工作。请帮忙。

HTML：

<div id="button" >
    <a class="button1 active" rel="1"></a>
    <a class="button2" rel="2"></a>
    <a class="button3" rel="3"></a>
    <a class="button4" rel="4"></a>
</div>

CSS：

.button1,
.button2,
.button3,
.button4    {
    background:#999;
    padding:6px;
    display:block;
    float:left;
    margin-right:5px;
}

#button {
    width: 50%;
    border-width: 1px;
    border-style: solid;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

http://jsfiddle.net/zCXMv/19/

我制作了按钮display: inline-block，删除了float并将text-align: center添加到了父级。

.button1,
.button2,
.button3,
.button4
{
    background:#999;
    padding:6px;
    display: inline-block; // Changed from "block"
    margin-right:5px;
    // Removed floats    
}

#button
{
    width: 50%;
    border-width: 1px;
    border-style: solid;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center; // Added central alignment to content
}

<div id="button" >
    <a class="button1 active" rel="1"></a>
    <a class="button2" rel="2"></a>
    <a class="button3" rel="3"></a>
    <a class="button4" rel="4"></a>
</div>

Answer 2

试试这个css

.button1,
.button2,
.button3,
.button4    {
    background:#999;
    padding:6px;
    display:block;
    float:left;
    margin-right:5px;
}

#button {
    width: 50%;
    border-width: 1px;
    border-style: solid;
    height: 30px;
    margin: 0px auto;
}

Answer 3

试试这个：

#button a{
display:block;
 margin:auto;}

Answer 4

删除按钮上的“display：block”和“float：left”，并在#button定义中添加“text-align：center”。

所有浏览器都不支持显示“inline-block”，因此除非您绝对必须，否则我建议您不要使用此功能。

Answer 5

试试这个。它可能会起作用：

#button a{display:block;margin:0 auto !important;text-align:center !important;}