"display: table" and "float:left" not respecting margins

Question

I have a bunch of buttons in a row, with content vertically centered inside:

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

But for some reason, the buttons don't respect the margins when viewed on mobile browsers (Safari 8 and Chrome 41 on iOS 8.3).

If I change display: table to display: inline-block then the margins are fine, but then I lose the vertical centering achieved by using display: table-cell on .button-inner.

(I could vertically center .button-inner using the position: absolute, but it requires some tweaking across media queries to ensure it centers nicely.)

Any ideas why this margin issue is happening?

Answer 1

:) Also don't forget to add vendor prefixes.

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

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