Question

我有一个日历移动webapp，我正在使用jQuery Mobile Grid。在任何Cell中，有另一个网格，可能包含最多三个代表计划的不同块。为了使这些块扩展到整个父单元格，我使用display：flex property。

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

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

<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 { 显示：flex; 弯曲方向：柱; 身高：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;
}

这里有一个小提示，显示我的问题（文字＆＃34; M＆＃34;，＆＃34; T＆＃34;这样应该居中，而不是天数）：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/

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

1 个答案: