"display: table" и "float:left" без учета полей

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;
}