2

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?

Jacob
  • 2,212
  • 1
  • 12
  • 18
deetwentytwo
  • 83
  • 5
  • Can we get a fiddle with the actual code? Hard to replicate otherwise. Also, in your `.button` rule, your semicolon after float is actually a colon. So that rule is going to be ignored. – Alex Wright Jun 26 '15 at 18:01

1 Answers1

0

:) 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;
}
deleted
  • 772
  • 1
  • 6
  • 19