Дисплей: коробка не очень хорошо работает на Safari 6

Question

SASS

> .pure-g > div[class^="pure-u"] { 
    //height: 100%; 
    vertical-align: middle; 

    &.actions{ 

     // display: -webkit-box; 
     // // -moz-box-pack: center; 
     // -webkit-box-align: center; 
     /* Firefox */ 
     display: -moz-box; 
     // -moz-box-pack: center; 
     -moz-box-align: center; 

     /* IE */ 
     display: -ms-box; 
     // -ms-box-pack: center; 
     -ms-box-align: center; 

     /* Native CSS */ 
     display: box; 
     // box-pack: center; 
     box-align: center; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
    } 

HTML

<div class="pure-u-1-3 l-padding actions"> 
<input type="submit" class="pure-button btn-submit" value="Upload"/> 
</div> 

Использование purecss.io и пользовательских CSS. Кнопка плавает с левой стороны, когда она должна оставаться в действии div справа, выровненном до середины. пробовал по-другому, но только для сафари 6 требуется webkit-box для работы. но не работает хорошо для последнего браузера Chrome. вздох.

любая помощь оценили

Update - Изображения

Это хром - не вертикально среднего.

Это FF - по вертикали среднего

Answer 1

сделать это таким образом, может помочь !!

display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 

здесь хорошо читать об этом: Flexbox

EDIT

, если выравнивание является вопросом, почему бы вам не использовать display:table-cell; вместо гибких коробок, это более широкой поддержка.

see demo here

check compatibility here