「顯示：表」和「浮動：左」不尊重利潤率

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的Safari 8和Chrome 41）上查看時尊重差距。

如果我改變display: table到display: inline-block那麼利潤都很好，但後來我失去了通過.button-inner使用display: table-cell實現垂直居中。

（我可以使用position: absolute垂直居中.button-inner，但它需要整個媒體查詢一些調整，以確保它很好地中心。）

任何想法，爲什麼這個問題保證金是怎麼回事？

Answer 1

希望它有助於:)也不要忘了添加供應商前綴。

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

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