如何在 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>

Answer 1

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

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

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

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