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 实现的垂直居中: .button-inner 上的表格单元格。

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

知道为什么会出现这种 margin 问题吗？

Answer 1

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

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

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