I am working on a calendar mobile webapp that utilizes jQuery Mobile Grid. Each cell in the grid may contain up to three blocks representing a schedule, which I want to expand to fill the parent cell using the display:flex property.
However, I am having difficulty centering text vertically within these blocks as the height is not directly specified. None of the methods I have tried so far seem to work in achieving this.
Below is a snippet of the code:
<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 should be used for centering the text) .turno-grid-container { display: flex; flex-direction: column; height: 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;
}
For reference, here is a fiddle demonstrating the issue (the text "M", "T" should be centered): http://jsfiddle.net/kelmer/36xkggvc/2/