«дисплей: стол» и «Поплавок: левый» не уважающие поля

Question

У меня есть куча кнопок в ряд, с содержанием вертикально в центре внутри:

.button { 
    width: 18%; 
    margin: 0 1%; 
    height: 160px; 
    padding: 10px; 
    display: table; 
    float: left; 
} 

.button-inner { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

Но по какой-то причине, кнопки не соблюдайте поля при просмотре в мобильных браузерах (Safari 8 и Chrome 41 на iOS 8.3).

Если изменить display: table, чтобы display: inline-block то, что поля находятся в порядке, но потом теряют вертикальную центровку, достигнутый с помощью display: table-cell на .button-inner.

(я мог бы вертикально центр .button-inner с помощью position: absolute, но это требует некоторые настройки через запросы средств массовой информации, чтобы гарантировать ее центры приятно.)

Любые идеи, почему эта разница проблема происходит?

Answer 1

Надеюсь, что это поможет :) Также не забудьте добавить префиксы поставщика.

.button { 
    width: 18%; 
    margin: 0 1%; 
    height: 160px; 
    padding: 10px; 
    display: flex; 
    align-items: center; 
    float: left; 
} 

.button-inner { 
    text-align: center; 
}