Центрирование текста по вертикали внутри дисплея: flex

Question

У меня есть мобильный мобильный веб-календар, в котором я использую 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-блок должен быть один центрирования текста) .turno-сетка-контейнер { дисплей: сгибать; flex-direction: column; высота: 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", "Т", и такое должно быть по центру, а не количество дней): 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/