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