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

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> 

我得到这个：

但我需要这样的：

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并亲自看看，你可以使用上面提供的链接为你自己定制它