div中的中心按钮

Question

我将所有div组与div { width: 95%; margin: 0 auto; }集中在一起，但是1个按钮没有居中的div，我还尝试将text-align: center;放到各个地方，但它没有用。

以下是jsfiddle

编辑：忘记提及我只想以@media（最大宽度：480px）为中心 图像：

Answer 1

修改

现在可以使用95％。 SEE NEW UPDATED DEMO

以下是我在您的媒体查询中添加的内容：

.pure-controls{
margin:0 auto;
width:100%;
text-align:center;
}
.pure-controls button{
width:95%;
display:inline-block;

}

我想我明白了。 SEE DEMO

我将此添加到您的媒体查询中：

.pure-controls{
width:100%;
text-align:center;
}
.pure-controls button{
display:inline-block;

}

Answer 2

这样做

 <div class="pure-controls" style="text-align:center">

按钮的容器应该有text-align:center

Answer 3

您错过了 pure-controls 类

.pure-controls {
  text-align: center
}

此div也略微远离其他div。即使在居中后，按钮也会远离中心。

Answer 4

使其Enclosing div的类纯控件具有此css

.pure-controls {
  text-align: center
}

Demo fiddle

Answer 5

试试这个css：

.pure-controls {
    margin: 1.5em 0 0 10em;
    margin-left:10%;
}

或

.pure-controls {
    margin: 1.5em 0 0 10em;
    text-align: center;
}