Question

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

我试图添加：

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

但这没有用。

此外：

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

没有工作。

我创建了一个fiddle来查看它。我有什么想法我做错了吗？

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>

对于内容，将其显示为 table-cell ，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;
}

<强> Demo

Answer 2

使用line-height和text-align将文字设为中间

jsfiddle

jQueryMobile水平对齐网格元素

2 个答案: