jquery - jQueryMobile horizontal align grid-elements -
i have jquery mobile grid system 5 cells. i'd have content of these cells aligned middle of cells.
i tried add:
<div style="vertical-align:middle;">text</div>
but didn't work.
also:
<div style="top:50%;">text</div>
didn't work.
i created fiddle check out. ideas i'm doing wrong?
display blocks table display: table;
, wrap contents inside each block in p
.
<div class="ui-grid-d grids"> <div class="ui-block-a"> <p>a</p> </div> <div class="ui-block-b"> <p>b</p> </div> <div class="ui-block-c"> <p>c</p> </div> <div class="ui-block-d"> <p>d</p> </div> <div class="ui-block-e"> <p><a data-role="button" class="ui-link ui-btn ui-shadow ui-corner-all" role="button">delete</a> </p> </div> </div>
for content, display them table-cell, display: table-cell
, align them vertically vertical-align: middle
, horizontally text-align: center
.
.grids { border-style: solid; border-width: 5px; } .grids div { /* blocks */ display: table; height: 153px; } .grids div > p { display: table-cell; vertical-align: middle; text-align: center; }
Comments
Post a Comment