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; } 

demo


Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -