jQueryMobile水平对齐网格元素

Question

我有一个带有五个单元的jQuery Mobile Grid系统.我想让这些细胞的内容与细胞中间对齐.

我试着添加:

<div style="vertical-align:middle;">text</div>

但这没效果.

也:

<div style="top:50%;">text</div>

没工作.

我创造了一个小提琴来检查它.我有什么想法我做错了吗？

Answer 1

显示块如表 display: table;和包装每个内部内容块在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>

对于内容,将它们显示为表格单元格,垂直和水平display: table-cell对齐它们. vertical-align: middle text-align: center

.grids {
  border-style: solid;
  border-width: 5px;
}

.grids div { /* all blocks */
  display: table;
  height: 153px;
}

.grids div > p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

演示