显示：框在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和custom css。按钮在左侧浮动时应保持在右侧与中间对齐的动作div中。尝试了不同的方式，但只有safari 6需要webkit-box才能工作。但最新的Chrome浏览器效果不佳。叹息。

任何帮助表示赞赏

更新 - 图片

这是铬 - 而不是垂直中间。

这是FF - 垂直中间

Answer 1

这样做，可能有帮助！

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

这里有一个很好的解读：Flexbox

修改

如果对齐是一个问题，为什么不使用display:table-cell;代替弹性框，它会得到更广泛的支持。

see demo here

check compatibility here