[Solved] centered button in a fixed width div shifts to left in ipad

[farzadina]

There is a button in a div, surrounded by <section>:

<div id="body">
<section>
    <div class="area">
        <button>Hello!</button>
    </div>
</section>
</div>

The #body, its <section> have a fixed width and the .area have a 50px padding:

 #body{
width:600px;
margin:0 auto;
background:#eee;
}
section{
width:300px;
margin:0 auto;
background:#FFF;
}
.area{
padding:50px;
}
button {
display: block;
margin: 0 auto;
}

Everything is done in my monitor, and the button is centered perfectly. But on ipad it shifts to left:

You can see this case in action: http://jsfiddle.net/c2HLe

[Paulie_D]

We’d probably need to test an actual live link & not a JSFiddle just to make sure there isn’t anything else going on.

[farzadina]

Here is an actual live link:
http://baghbagho.com/kingschool/
See the Photo Gallery’s show me more button

[Paulie_D]

I can’t see any reason for it specifically.

All the section widths (1000px) should be fine on an iPad (in landscape mode, I think) and you have the correct meta for device width.

Does it happen in both portrait and landscape mode?

It’s almost as though the centering by margin isn’t taking effect.

I’m pretty stumped…about the only think i can think of, and I have no idea why this should make a difference, is to take it out of the gallery div but leave it inside the section.

You would have to update the css selector from .gallery button to .content button but I would be curious to see if this changes anything.

Something to do with the inline-block images perhaps?

[farzadina]

Does it happen in both portrait and landscape mode?
Yes, both.
take it out of the gallery div but leave it inside the section.
I made this, but the result didn’t changed.

I made a better example, it’s so simple:
http://jsfiddle.net/c2HLe/9/
See the result:

[farzadina]

I used this method to solve the problem:
http://stackoverflow.com/questions/18866532/margin-centered-button-shifts-to-left-in-ipad

I added a .button-wrapper as parent of my button and gave it text-align:center style, then added a display:inline-block to the button, so it centered in both monitor & ipad.

[Author]

Posts