"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 和 iOS 8.3 上的 Chrome 41）上查看时，按钮不考虑边距。

如果我将 display: table 更改为 display: inline-block 那么边距就可以了，但是我失去了通过在 .button-inner 上使用 display: table-cell 实现的垂直居中。

（我可以使用 position: absolute 垂直居中 .button-inner，但它需要对媒体查询进行一些调整以确保它很好地居中。）

知道为什么会出现这个保证金问题吗？

Answer 1

:) 另外不要忘记添加供应商前缀。

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

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