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

“display：table”和“float：left”不尊重边距

1 个答案: