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

但由于某种原因，在移动浏览器（iOS 8.3 上的 Safari 8 和 Chrome 41）上查看时，这些按钮不尊重边距。

如果我更改display: table为display: inline-block然后边距很好，但是我失去了使用display: table-cellon实现的垂直居中.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;
}