在显示中垂直居中文本：flex

Question

我有一个日历移动 web 应用程序，我在其中使用 jQuery Mobile Grid。在任何单元格内都有另一个网格，它可能包含最多三个不同的块，代表一个时间表。为了让这些块扩展到整个父单元格，我使用了 display:flex 属性。

但是我需要在这些块中打印一些信息，并且在将每个块中的文本垂直居中时遇到困难。由于没有直接指定高度，因此我尝试将文本居中的每种方法都失败了。

基本上这就是我所拥有的：

<div class="ui-grid-d">
     <div class="ui-block-a">
            <div class="ui-bar dia-block">
                <span class="dia_titulo"> 1</span>
                <div class="ui-grid-a turno-grid-container">

                        <div class="ui-block-a turno-block manana">M</div>
                             <div class="ui-block-a turno-block manana">T</div>
                             <div class="ui-block-a turno-block manana">N</div>
                </div>
            </div>
        </div>
     ....
</div>

CSS：（turno-block 应该是文本居中的那个） .turno-grid-container { 显示：弯曲； 弹性方向：列； 高度：100%；

}

.turno-grid-container>div {
    flex: 1;
    justify-content: center;
    flex-direction: column;
}

.turno-block {
    height: 100%;
    width: 100% !important;
    color: #FFF;
    text-align: center;
    line-height: 100%;
    border-bottom: 1px solid white;
}

这是一个显示我的问题的小提琴（文本“M”、“T”等应该居中，而不是日期）：http://jsfiddle.net/kelmer/36xkggvc/2/

Answer 1

.turno-grid-container>div {
   flex: 1;
   justify-content: center;
   flex-direction: column;
   align-items: center; <-- add this
   display: flex; <-- add this
}

演示 - http://jsfiddle.net/36xkggvc/6/