如何在jQuery Mobile的listview列表视图中实现文本垂直对齐

问题根源 #

1. 你目前使用的固定line-height:160px是绝对值配置，当屏幕尺寸变化导致容器高度动态调整时，无法匹配动态高度，对齐效果自然失效
2. vertical-align: middle不生效是因为该属性仅对行内元素、行内块元素、table单元格元素生效，你当前为<li>设置了display:block，还使用了float让子元素脱离文档流，该属性无法生效
3. 高度设为50%不生效是因为父元素没有明确的可继承高度基准，百分比高度无法完成计算

推荐解决方案：Flex布局（兼容性好、适配所有屏幕尺寸） #

移除原有的float、固定line-height配置，改用Flex布局实现垂直对齐，修改后代码如下：

<ul id="optionsList" style="height:93vh;" data-role="listview">
  <!-- 移除ul的line-height:0配置，避免影响内部行高继承 -->
  <li class="listItem" id="divTSScroller" style="display: flex;align-items: center;min-height: 18vh;overflow: hidden;">
    <!-- align-items:center是垂直居中的核心配置，min-height可根据你的li数量调整，比如5个li就设置93/5≈18vh，自动适配屏幕高度 -->
    <div>               
        <span style="font-size: 4vw;">Timesheet</span>
    </div>
  </li>
  <!-- 其余列表项配置逻辑完全一致 -->
</ul>

该方案无需固定行高，列表高度会自动适配父容器的93vh设置，任意屏幕尺寸下都可以保持垂直对齐效果。

备用方案：table布局（适配极低版本浏览器） #

如果需要兼容IE9及以下的老旧浏览器，可以使用table布局实现：

<li class="listItem" id="divTSScroller" style="display: table;height: 18vh;width: 100%;overflow: hidden;">
  <div style="display: table-cell;vertical-align: middle;">               
      <span style="font-size: 4vw;">Timesheet</span>
  </div>
</li>

注意事项 #

• 非必要不要使用float做常规布局，容易导致高度塌陷、对齐失效等问题，Flex布局完全可以替代float实现绝大多数布局需求
• 如果你的列表项高度是随内容动态变化的，不需要配置固定的min-height，Flex会自动根据内容撑开容器，同时保持内部内容垂直居中

内容的提问来源于stack exchange，提问作者jackhamper32