jQuery移动中间垂直对齐列表视图中的li

Question

如何在列表视图项中垂直居中文字？

例如，运行此代码：

<ul data-role="listview" id="exerciseList">    
<li>
    <img src="http://upload.wikimedia.org/wikipedia/pt/0/02/Homer_Simpson_2006.png">
    <p>Some large text 
    Some large text 
    Some large text 
    Some large text 
    Some large text 
    Some large text</p>
</li>
</ul>

我明白了：

https://dkpro.github.io/dkpro-jwpl/

但我需要这个：

Answer 1

我认为这可以通过柔性盒轻松完成。我拿了你的代码并创建了一个code pen，我冒昧地在这里和那里添加了一些元素，例如：

<强> HTML

<div class="slide-show">
  <ul data-role="listview" id="exerciseList">
    <li>
      <div class="image">
        <img src="http://upload.wikimedia.org/wikipedia/pt/0/02/Homer_Simpson_2006.png">
      </div>
      <div class="detail">
        Some large text Some large text Some large text Some large text Some large text Some large text
      </div>
    </li>
  </ul>
</div>

和 CSS

.slide-show {
  border: 1px dashed black;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  align-items: center;
  -webkit-align-items: center;
}
.slide-show ul {
  list-style-type: none;
}

#exerciseList li {
    align-items: center;
    display: flex;
    flex-direction: row;
    list-style-type: none;
    width: 100%;
}

#exerciseList li .image {
  margin-right: 20px;
}
#exerciseList li .image img {
  height: 100px;
}

查看code pen并亲眼看看，您可以使用上面提供的链接为自己定制