Center button within a div

Question

I centered all divs groups with div { width: 95%; margin: 0 auto; } but 1 div that has button is not centering, I tried also to place text-align: center; to various places but it not worked.

Here is the jsfiddle

EDIT: Forgot to mention I want to center for @media (max-width: 480px) only Image:

Answer 1

EDIT

It now works with 95%. SEE NEW UPDATED DEMO

Here's what I added to your media query:

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

}

I think I figured it out. SEE DEMO

I added this to your media queries:

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

}

Answer 2

do this

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

container of the button should have text-align:center

Answer 3

You missed for pure-controls class

.pure-controls {
  text-align: center
}

Also this div is slightly positioned away from the others. Even after centering the button will be little away from center.

Answer 4

make its Enclosing div's class pure-controls have this css

.pure-controls {
  text-align: center
}

Demo fiddle

Answer 5

Try this css:

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

or

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