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並親自看看，你可以使用上面提供的鏈接爲你自己定製它