jQueryMobile 水平对齐网格元素

Question

我有一个包含五个单元格的 jQuery Mobile 网格系统。我想让这些单元格的内容与单元格的中间对齐。

我尝试添加:

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

但这没有用。

还有:

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

没用。

我创建了一个 fiddle检查出来。知道我做错了什么吗？

Answer 1

将 blocks 显示为 table display: table; 并将内容包装在 p 中的每个 block 中。

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

对于内容，将它们显示为table-cell，display: table-cell，将它们vertically对齐 vertical-align : 中间 和水平 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;
}

Demo