маржа по центру смещается кнопка слева в IPad

Question

Это моя кнопка:

<div id="body"> 
    <button>Hello</button> 
</div> 

и его стиль:

#body{ 
    width:400px; 
    margin:0 auto; 
    background:#eee; 
    border:1px solid #ccc; 
} 
button { 
    display: block; 
    margin: 0 auto; 
} 

Это по центру, но давайте посмотрим на результат в IPad:

Сдвиг влево.

Взгляните на этом: http://jsfiddle.net/c2HLe/9/

Примечание. Это похоже на мой предыдущий вопрос, но в этом случае я сделал это с простой структурой, поэтому я думаю, что люди могут лучше сосредоточиться на проблеме.

Answer 1

Чтобы центрировать вашу кнопку с помощью margin: 0 auto;, вам также необходимо определить ширину кнопки. Что-то вроде this.

Кроме того, вы также можете использовать this.

#body{ 
    text-align: center; 
} 
button { 
    display: inline-block; 
} 

В оригинальном CSS, если ширина контейнера (края + граница + заполнение + ширина содержимого) превышает 1024px (IPad ширина окна), вы получите неожиданные результаты. Поэтому убедитесь, что вы это помните.