在flexbox中居中列 [英] Centering columns in flexbox

问题描述

这是我的目标：

Flex工作和定中心工作。但是两者都不工作：/ the centered选项不再工作，由于flex。

Flex works and centering works too. But both don't work :/ The centered option doesn't work anymore due to flex.

我想，这是由于那些部分从CSS与两个显示：

I think, this is due to those parts from the CSS with the two display:

.row-flex, .row-flex > div[class*='col-']
{  
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex; /* same height */
        flex: 0 auto;
}

.col-centered
{
        display: inline-block; /* centered */
        float: none;
        text-align: left;
        margin-right: -4px;
}

这是我的 Bootply ： http://www.bootply.com/rrpj1Y1cBB

如何解决这个问题？谢谢< 3

How can I fix this? Thank you <3

推荐答案

.row-flex, .row-flex > div[class*='col-'] {

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

        justify-content: center;       /* NEW; center flex items horizontally */
        align-items: center;           /* NEW; center single-line flex items vertically */
        align-content: center;         /* NEW; center multi-line flex items vertically */

}

修订演示

更多详情：如何在Flexbox中垂直和水平居中元素

这篇关于在flexbox中居中列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！