jQuery mobile middle vertical align for li in listview -

how center text vertically in list view item?

for example, running code:

<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      large text      large text      large text      large text      large text</p> </li> </ul> 

i this:

but need this:

i think can done flex boxes. took code , created code pen, took liberty of adding few elements here , there, example:

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">         large text large text large text large text large text large text       </div>     </li>   </ul> </div> 

and 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; } 

have @ code pen , see self, can use link provided above customize self