jquery - 如何在 JQuery Mobile 的列表视图中垂直对齐文本？

Question

我需要在<li>元素中垂直对齐我的文本

目前我设置line-height如下，但这意味着它不适用于所有屏幕尺寸。

我尝试应用vertical-algn:middle并将高度设置为 50% 无济于事。

<ul id="optionsList" style="line-height:0; height:93vh;" data-role="listview">

  <li class="listItem" id="divTSScroller" style="display: block;overflow: hidden;">
    <div style="float:left;">               
        <span style="line-height:160px; font-size: 4vw;">Timesheet</span>
    </div>
  //another list item
</ul>

标签： jquerycssjquery-mobile

Answer 1

使用 flex 设置居中元素，例如自由文本：

li {
  display: flex;
  justify-content: center;
}

如果您的子元素很少，请将其设置flex-direction为column并align-items: center改用：

li {
  display: flex;
  flex-direction: column;
  align-items: center;
}