디스플레이 내부에 텍스트를 세로로 가운데 맞추기 : 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 블록 텍스트를 중심으로 하나 여야합니다) :

는 기본적으로이 내가 가진 무엇 플렉스; 플렉스 방향 : 칼럼; 신장 : 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/